[英]Refreshing MVC PartialView with new Model on DropDownList Change
I have a budgeting application, I have 3 models I am pulling into 1 view. 我有一个预算申请,我有3个模型,我正在进入1视图。
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. 用户界面将为用户提供选择他们想要工作的预算(通过下拉列表)的选项,然后允许他们根据他们选择的账单输入他们的美元金额。
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. 我已经用尽了堆栈溢出的多个选项。
Model: 模型:
public class MyBudgets : Financials
{
public Budgets Budget{ get; set; }
public BillBudgetTotal BudgetTotals { get; set; }
public BillBudgetTotalBreakdown BudgetTotalBreakdown { get; set; }
}
Html: 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>
Controller: 控制器:
[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);
}
You can use ajax to do partial update to your page. 您可以使用ajax对页面进行部分更新。 when razor render your page, it will generate a SELECT element with the id "Budget_SelectedBills"
. 当剃刀渲染您的页面时,它将生成一个ID为"Budget_SelectedBills"
的SELECT元素。 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. 您可以使用jQuery load
方法使用来自服务器的新标记更新DOM。
@section Scripts
{
<script>
$(function(){
$("#Budget_SelectedBills").change(function(e){
var val=$(this).val();
$("#billBudgetPartial").load("/Budgeting/BillDetails/"+val);
});
});
</script>
}
Assuming you have BillDetails
action method in BudgetingController
which accpets the billId an return the partial view for the bottom portion of screen. 假设你在BudgetingController
有BillDetails
动作方法,它接受billId并返回屏幕底部的局部视图。
public ActionResult BillDetails(int id)
{
var model = ReplaceYourModelForBillTotalAmountViewHere();
return PartialView("Budgeting/_BillTotalAmount", model);
}
EDIT: As per the comment 编辑: 根据评论
How can I pass 2 parameters in this? 我怎样才能传递2个参数呢? like not just the id from the drop but something else the list the @Model.BudgetId 不仅仅是drop中的id,还有@ Model.BudgetId列表中的其他内容
If your javascript code is in the same razor view, you can simply use Model.BudgetId
as the second querystring param value. 如果你的javascript代码在同一个剃刀视图中,你可以简单地使用Model.BudgetId
作为第二个查询字符串参数值。
Assuming BudgetId is an int type 假设BudgetId是int类型
@secion Scripts
{
<script>
$(function(){
$("#Budget_SelectedBills").change(function(e){
var val=$(this).val();
$("#billBudgetPartial").load("/Budgeting/BillDetails/"+val
+"?budgetId="+@Model.BudgetId);
});
});
</script>
}
Now make sure that your action method has this second parameter 现在确保您的action方法具有第二个参数
public ActionResult BillDetails(int id,int budgetId)
{
var model = ReplaceYourModelForBillTotalAmountViewHere();
return PartialView("Budgeting/_BillTotalAmount", model);
}
If your javascript code is in an external js file, you may keep Model.BudgetId
to somewhere in the DOM and read that. 如果你的javascript代码在外部js文件中,你可以将Model.BudgetId
到DOM中的某个位置并读取它。 Either a hidden field or keep it in html 5 data attributes of the select element. 隐藏字段或将其保留在select元素的html 5数据属性中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.