Refreshing MVC PartialView with new Model on DropDownList Change
<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>