C# 使用DropDownList更改上的新模型刷新MVC PartialView

我有一个预算应用程序，我有3个模型，我拉到一个视图

• 预算-获取用户预算信息详细信息（即预算名称、日期等）
• BillBudgetTotal-允许用户添加该预算的累计总额（即，budgetid，总额）
• 预算明细-允许用户将预算分解为更多详细信息（即按账单名称（水、天然气、电气、杂项等）将总金额分解

用户界面将为用户提供选择他们想要使用的预算的选项（通过下拉菜单），然后允许他们根据选择的账单输入美元金额

问题：我正在试图找到一种方法，允许局部视图（下拉列表下的区域）根据下拉列表选择进行刷新。我似乎无法使用更新的模型刷新局部视图（需要根据下拉列表选择的值进行重设）.我已经用尽了堆栈溢出的多个选项

大概是这样的：

型号：

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>
     <div class="col-md-3"></div>
     <br /><br />
     <hr />
     <div id="billBudgetPartial">                 
          @Html.Partial("Budgeting/_BillTotalAmount", Model);
     </div>

[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);
    }

Html:

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>
     <div class="col-md-3"></div>
     <br /><br />
     <hr />
     <div id="billBudgetPartial">                 
          @Html.Partial("Budgeting/_BillTotalAmount", Model);
     </div>

[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);
    }

---

您可以使用ajax对页面进行部分更新。razor呈现页面时，它将生成一个id为“Budget\u SelectedBills”的SELECT元素。因此，请收听此下拉列表上的更改事件，获取所选值并将其发送到服务器（一种操作方法）然后让它返回下面所需标记的部分视图。您可以使用jQuery

load

方法使用来自服务器的新标记更新DOM

@section Scripts
{
  <script>
    $(function(){
       $("#Budget_SelectedBills").change(function(e){
         var val=$(this).val();
         $("#billBudgetPartial").load("/Budgeting/BillDetails/"+val);
       });
    });    
  </script>
}

根据评论编辑：

我怎么能在这里传递两个参数呢？不仅仅是来自 只从@Model.BudgetId列表中删除其他内容

如果您的javascript代码位于同一razor视图中，则只需使用

Model.BudgetId

作为第二个查询字符串参数值

假设BudgetId是int类型

@secion Scripts
{
  <script>
    $(function(){
       $("#Budget_SelectedBills").change(function(e){
         var val=$(this).val();
         $("#billBudgetPartial").load("/Budgeting/BillDetails/"+val
                                                            +"?budgetId="+@Model.BudgetId);
       });
    });    
  </script>
}

---

如果您的javascript代码位于外部js文件中，您可以将

Model.BudgetId

保存在DOM中的某个位置并读取该文件。可以是隐藏字段，也可以将其保存在select元素的HTML5数据属性中。

那么您面临的问题/问题是什么？@Shyju更新如上所述如何在此传递2个参数？不仅仅是我是下拉列表，但还有一些其他的列表@Model.BudgetId