cxwilson cxwilson - 1 year ago 225
Ajax Question

Refreshing MVC PartialView with new Model on DropDownList Change

I have a budgeting application, I have 3 models I am pulling into 1 view.

  • Budget - get the users budgeting information details (i.e, name of budget, date, etc.)

  • BillBudgetTotal - Allows the user to add a cumulative total for that budget (i.d., budgetid, total amount)

  • BudgetTotalBreakdown - Allows the user to break their budget down into futher details (i.e., break the total amount down by bill name (water, gas, electric, misc, etc.)

The UI will give the user the option to select a budget (via dropdown) they want to work in and then allow them to enter in their dollar amounts based on which bill they selected.

Problem: I am trying to figure out a way to allow the partial view (the area under the dropdown) to refresh based on the dropdown selection. I can't seem to get the partial to refresh with the updated model (it needs to be reset based on the value of the dropdownlist selection). I have exhausted multiple options on stack overflow.

Something like this:enter image description here


public class MyBudgets : Financials
public Budgets Budget{ get; set; }
public BillBudgetTotal BudgetTotals { get; set; }
public BillBudgetTotalBreakdown BudgetTotalBreakdown { get; set; }


<div class="col-md-3"></div>
<div class="row col-md-6">
@Html.DropDownListFor(model => model.Budget.SelectedBills, Model.Budget.SelectedBills.Select(b => new SelectListItem() { Value = b.Bill_Id.ToString(), Text = b.Bill}), "Select A Bill...", new { @class = "form-control"})
<div class="col-md-3"></div>
<br /><br />
<hr />
<div id="billBudgetPartial">
@Html.Partial("Budgeting/_BillTotalAmount", Model);


public ActionResult Budgets(int budgetId)
MyBudgets model = new MyBudgets
Budgets = _executionRepository.RetrieveBudgets(budgetId)

model.Budget.SelectedBills = _executionRepository.SetSelectedBudgets(budgetId);

return View(model);

public ActionResult Budgets()

return Json(new { success = "false" });

public ActionResult BillTotalAmount(int id)
var model = new ExecutionCANBudgets
Budgets = _executionRepository.RetrieveBudgetsByBillBudget(id),
BillBudgetTotal = _executionRepository.RetrieveBillBudgetByBillId(id),
BillBudgetTotalBreakdown = _executionRepository.RetrieveBillBudgetTotalBreakdown (id)

return PartialView("Execution/_BillTotalAmount", model);

Answer Source

You can use ajax to do partial update to your page. when razor render your page, it will generate a SELECT element with the id "Budget_SelectedBills". So listen to the change event on this dropdown, get the selected value and send that to your server(an action method) and let it return the partial view for the markup you want below. You may use jQuery load method to update the DOM with the new markup coming from server.

@secion Scripts
         var val=$(this).val();

Assuming you have BillDetails action method in BudgetingController which accpets the billId an return the partial view for the bottom portion of screen.

public ActionResult BillDetails(int id)
    var model = ReplaceYourModelForBillTotalAmountViewHere();
    return PartialView("Budgeting/_BillTotalAmount", model);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download