在DropDownList更改上使用新模型刷新MVC PartialView [英] Refreshing MVC PartialView with new Model on DropDownList Change

问题描述

我有一个预算应用程序，我有3个模型，正在将其拉入1个视图.

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

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

用户界面将使用户可以选择要使用的预算(通过下拉菜单)，然后允许他们根据选择的账单输入美元金额.

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.

问题::我正在尝试找出一种方法，允许根据下拉选择刷新部分视图(下拉菜单下的区域).我似乎无法使用更新的模型来刷新部分内容(需要根据dropdownlist选择的值来重置它).我已经用尽了堆栈溢出的多个选项.

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.

类似这样的内容:

型号:

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

HTML

     <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对页面进行部分更新.当剃刀渲染您的页面时，它将生成一个ID为"Budget_SelectedBills"的SELECT元素.因此，请在此下拉列表上侦听change事件，获取选定的值并将其发送到您的服务器(一种操作方法)，然后让其返回您要在下面标记的部分视图.您可以使用jQuery load方法来使用来自服务器的新标记来更新DOM.

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.

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

假设您在BudgetingController中具有BillDetails动作方法，该方法使billId生效，并返回屏幕底部的部分视图.

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

编辑:根据评论

如何在其中传递2个参数?不仅是来自 删除，但列出@ Model.BudgetId

How can I pass 2 parameters in this? like not just the id from the drop but something else the list the @Model.BudgetId

如果您的javascript代码在同一剃刀视图中，则可以简单地将Model.BudgetId用作第二个查询字符串参数值.

If your javascript code is in the same razor view, you can simply use Model.BudgetId as the second querystring param value.

假设BudgetId是int类型

Assuming BudgetId is an int type

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

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

Now make sure that your action method has this second parameter

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

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

If your javascript code is in an external js file, you may keep Model.BudgetId to somewhere in the DOM and read that. Either a hidden field or keep it in html 5 data attributes of the select element.

这篇关于在DropDownList更改上使用新模型刷新MVC PartialView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！