title: Refreshing MVC PartialView with new Model on DropDownList Change
body: <p>I have a budgeting application, I have 3 models I am pulling into 1 view.</p>
  
  <ul>
  <li>Budget - get the users budgeting information details (i.e, name of budget, date, etc.)</li>
  <li>BillBudgetTotal - Allows the user to add a cumulative total for that budget (i.d., budgetid, total amount)</li>
  <li>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.)</li>
  </ul>
  
  <p>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.</p>
  
  <p><strong>Problem:</strong> 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. </p>
  
  <p>Something like this:<a href="https://i.stack.imgur.com/ukImO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ukImO.png" alt="enter image description here"></a></p>
  
  <p><strong>Model:</strong></p>
  
  <pre><code>public class MyBudgets : Financials
      {
          public Budgets Budget{ get; set; }
          public BillBudgetTotal BudgetTotals { get; set; }
          public BillBudgetTotalBreakdown BudgetTotalBreakdown { get; set; }
      }
  </code></pre>
  
  <p><strong>Html:</strong></p>
  
  <pre><code>     &lt;div class="col-md-3"&gt;&lt;/div&gt;
       &lt;div class="row col-md-6"&gt;
            @Html.DropDownListFor(model =&gt; model.Budget.SelectedBills, Model.Budget.SelectedBills.Select(b =&gt; new SelectListItem() { Value = b.Bill_Id.ToString(), Text = b.Bill}), "Select A Bill...",  new { @class = "form-control"})
       &lt;/div&gt;
       &lt;div class="col-md-3"&gt;&lt;/div&gt;
       &lt;br /&gt;&lt;br /&gt;
       &lt;hr /&gt;
       &lt;div id="billBudgetPartial"&gt;                 
            @Html.Partial("Budgeting/_BillTotalAmount", Model);
       &lt;/div&gt;
  </code></pre>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>[HttpGet]
      public ActionResult Budgets(int budgetId)
      {
          MyBudgets model = new MyBudgets
          {
              Budgets = _executionRepository.RetrieveBudgets(budgetId)
          };
  
          model.Budget.SelectedBills = _executionRepository.SetSelectedBudgets(budgetId);
  
          return View(model);
      }
  
      [HttpPost]
      public ActionResult Budgets()
      {
  
  
          return Json(new { success = "false" });
      }
  
      public ActionResult BillTotalAmount(int id)
      {
          var model = new MyBudgets
          {
              Budgets = _executionRepository.RetrieveBudgetsByBillBudget(id),
              BillBudgetTotal = _executionRepository.RetrieveBillBudgetByBillId(id),
              BillBudgetTotalBreakdown = _executionRepository.RetrieveBillBudgetTotalBreakdown (id)
          };
  
          return PartialView("Execution/_BillTotalAmount", model);
      }
  </code></pre>