我有一个预算应用程序,我将 3 个模型拉入 1 个 View 。
- 预算 - 获取用户预算信息详细信息(即预算名称、日期等)
- BillBudgetTotal - 允许用户添加该预算的累计总额(i.d.、budgetid、总金额)
- BudgetTotalBreakdown - 允许用户将预算分割为更多细节(即,按账单名称(水、煤气、电、杂项等)分割总金额)
用户界面将为用户提供选择他们想要工作的预算(通过下拉菜单)的选项,然后允许他们根据他们选择的账单输入他们的美元金额。
问题:我正在尝试找出一种方法来允许部分 View (下拉列表下方的区域)根据下拉列表选择进行刷新。我似乎无法使用更新的模型刷新部分(它需要根据下拉列表选择的值进行重置)。我已经用尽了堆栈溢出的多个选项。
型号:
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>
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);
}
最佳答案
您可以使用 ajax 对您的页面进行部分更新。当 Razor 呈现您的页面时,它会生成一个带有 ID "Budget_SelectedBills"
的 SELECT 元素。因此,请收听此下拉列表中的更改事件,获取所选值并将其发送到您的服务器(一种操作方法),然后让它返回您想要的标记的部分 View 。您可以使用 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 并返回屏幕底部的部分 View 。
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 代码在同一个 razor View 中,您可以简单地使用 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 数据属性中。
关于c# - 在 DropDownList 更改上使用新模型刷新 MVC PartialView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38511098/