[英]Refreshing MVC PartialView with new Model on DropDownList Change
我有一个预算申请,我有3个模型,我正在进入1视图。
用户界面将为用户提供选择他们想要工作的预算(通过下拉列表)的选项,然后允许他们根据他们选择的账单输入他们的美元金额。
问题:我试图找出一种方法来允许部分视图(下拉区域下面的区域)根据下拉选择进行刷新。 我似乎无法使用更新的模型进行部分刷新(需要根据下拉列表选择的值重置)。 我已经用尽了堆栈溢出的多个选项。
模型:
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);
}
编辑: 根据评论
我怎样才能传递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>
}
现在确保您的action方法具有第二个参数
public ActionResult BillDetails(int id,int budgetId)
{
var model = ReplaceYourModelForBillTotalAmountViewHere();
return PartialView("Budgeting/_BillTotalAmount", model);
}
如果你的javascript代码在外部js文件中,你可以将Model.BudgetId
到DOM中的某个位置并读取它。 隐藏字段或将其保留在select元素的html 5数据属性中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.