在 DropDownList 更改上使用新模型刷新 MVC PartialView

Question

我有一个预算应用程序，我有 3 个模型要拉入 1 个视图。

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

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

问题：我试图找出一种方法来允许部分视图（下拉列表下方的区域）根据下拉列表选择进行刷新。我似乎无法使用更新后的模型刷新部分（需要根据下拉列表选择的值进行重置）。我已经用尽了有关堆栈溢出的多种选项。

像这样的东西：

模型：

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

Answer 1

您可以使用 ajax 对页面进行部分更新。当 razor 渲染页面时，它将生成一个带有 id 的 SELECT 元素"Budget_SelectedBills"。因此，侦听此下拉列表中的更改事件，获取所选值并将其发送到您的服务器（操作方法），并让它返回您想要的标记的部分视图。您可以使用 jQueryload方法使用来自服务器的新标记来更新 DOM。

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

假设您有一个BillDetails操作方法，其中BudgetingController接受 billId 并返回屏幕底部的部分视图。

public ActionResult BillDetails(int id)
{
    var model = ReplaceYourModelForBillTotalAmountViewHere();
    return PartialView("Budgeting/_BillTotalAmount", model);
} 

编辑： 根据评论

我怎样才能在其中传递2个参数？不仅像drop中的id，还像@Model.BudgetId列表中的其他东西

如果您的 JavaScript 代码位于同一个剃刀视图中，您可以简单地用作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>
}

现在确保您的操作方法具有第二个参数

public ActionResult BillDetails(int id,int budgetId)
{
    var model = ReplaceYourModelForBillTotalAmountViewHere();
    return PartialView("Budgeting/_BillTotalAmount", model);
} 

如果您的 javascript 代码位于外部 js 文件中，您可以保留Model.BudgetId在 DOM 中的某个位置并读取它。要么是隐藏字段，要么将其保留在 select 元素的 html 5 数据属性中。