c# – 使用DropDownList上的新模型刷新MVC PartialView

我有一个预算申请,我有3个模型,我正在进入1视图.

>预算 – 获取用户预算信息详细信息(即预算名称,日期等)
> BillBudgetTotal – 允许用户添加该预算的累计总额(i.d.,budgetid,总金额)
> BudgetTotalBreakdown – 允许用户将预算分解为更多详细信息(即按账单名称(水,煤气,电力,杂项等)减少总金额

用户界面将为用户提供选择他们想要工作的预算(通过下拉列表)的选项,然后允许他们根据他们选择的账单输入他们的美元金额.

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

像这样：

模型：

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元素.因此,请在此下拉列表中收听更改事件,获取所选值并将其发送到您的服务器(操作方法),然后让它返回您想要的标记的部分视图.您可以使用jQuery load方法使用来自服务器的新标记更新DOM.

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

假设你在BudgetingController中有BillDetails动作方法,它接受billId并返回屏幕底部的局部视图.

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

编辑：根据评论

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作为第二个查询字符串参数值.

假设BudgetId是int类型

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

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

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

如果你的javascript代码在外部js文件中,你可以将Model.BudgetId保存到DOM中的某个位置并读取它.隐藏字段或将其保留在select元素的html 5数据属性中.

c# – 使用DropDownList上的新模型刷新MVC PartialView

相关推荐