ViewModel 与 Parent 的 ViewModel 不同的局部视图
Partial View with different ViewModel than Parent's ViewModel
在我的 View
中,我显示了一个用于选择年份列表的下拉菜单。但是所选年份对应的数据来自多个表。因此 Partial View
对应于所选年份的数据需要 ViewModal
。部分视图中的数据是来自 ViewModel 的记录列表。 问题:当我们在同一个视图中处理两个不同的视图模型时,如何实现上述内容。示例如下:
注意:
- 我正在使用 Ajax 和 Tag Helpers。但是没有这些技术的任何建议都可以。
- 我知道如何通过 Ajax 加载局部视图数据。
Parent 的 ViewModel [年份下拉列表]
public class OrderYearsViewModel
{
public SelectList lstOrderYears { get; set; }
public int SelectedOrdYear { get; set; }
}
Parent 查看
@model MyProj.Models.OrderYearsViewModel
<div>
<form asp-controller="OrderYearsCtrl" asp-action="SelectYearsList" method="get">
Select Order Year:<select asp-for="SelectedOrdYear" asp-items="Model.lstOrderYears"></select><button type="button" value="Go" class="clsGo">GO</button>
</form>
</div
<div id="OrderDetailsID">
<!--Partial view data for selected year displayed here-->
</div>
部分视图的 ViewModel [对于每年选择的订单]
public class OrdersPerYearViewModel
{
public in CustomerID { get; set; }
public string CustName{ get; set; }
public string OrderType { get; set; }
public float Price { get; set; }
....
}
局部视图
@model List<MyProj.Models.OrdersPerYearViewModel>
<table><tr><th>..</th>..........</th></tr>
@foreach (var item in Model)
{
<tr>
<td>
@item.CustomerID
</td>
<td>
@item.CustName
</td>
<td>
@item.OrderType
</td>
<td>
@item.Price
</td>
....
}
</table>
您只需拨打 Ajax 电话
@model MyProj.Models.OrderYearsViewModel
<div>
Select Order Year:<select id="ddlYear" asp-for="SelectedOrdYear" asp-items="Model.lstOrderYears"></select><button id="btnGo" type="button" value="Go" class="clsGo">GO</button>
</div>
<div id="OrderDetailsID">
<!--Related data for each year displayed here-->
</div>
在文档准备好注册按钮上单击
$(document).ready(function(){
$("#btnGo").click(function(){$("#OrderDetailsID").load("@Url.Action("yourpartialviewactionname","controllername")"+"?year="+$("#ddlYear").val());
});
});
在我的 View
中,我显示了一个用于选择年份列表的下拉菜单。但是所选年份对应的数据来自多个表。因此 Partial View
对应于所选年份的数据需要 ViewModal
。部分视图中的数据是来自 ViewModel 的记录列表。 问题:当我们在同一个视图中处理两个不同的视图模型时,如何实现上述内容。示例如下:
注意:
- 我正在使用 Ajax 和 Tag Helpers。但是没有这些技术的任何建议都可以。
- 我知道如何通过 Ajax 加载局部视图数据。
Parent 的 ViewModel [年份下拉列表]
public class OrderYearsViewModel
{
public SelectList lstOrderYears { get; set; }
public int SelectedOrdYear { get; set; }
}
Parent 查看
@model MyProj.Models.OrderYearsViewModel
<div>
<form asp-controller="OrderYearsCtrl" asp-action="SelectYearsList" method="get">
Select Order Year:<select asp-for="SelectedOrdYear" asp-items="Model.lstOrderYears"></select><button type="button" value="Go" class="clsGo">GO</button>
</form>
</div
<div id="OrderDetailsID">
<!--Partial view data for selected year displayed here-->
</div>
部分视图的 ViewModel [对于每年选择的订单]
public class OrdersPerYearViewModel
{
public in CustomerID { get; set; }
public string CustName{ get; set; }
public string OrderType { get; set; }
public float Price { get; set; }
....
}
局部视图
@model List<MyProj.Models.OrdersPerYearViewModel>
<table><tr><th>..</th>..........</th></tr>
@foreach (var item in Model)
{
<tr>
<td>
@item.CustomerID
</td>
<td>
@item.CustName
</td>
<td>
@item.OrderType
</td>
<td>
@item.Price
</td>
....
}
</table>
您只需拨打 Ajax 电话
@model MyProj.Models.OrderYearsViewModel
<div>
Select Order Year:<select id="ddlYear" asp-for="SelectedOrdYear" asp-items="Model.lstOrderYears"></select><button id="btnGo" type="button" value="Go" class="clsGo">GO</button>
</div>
<div id="OrderDetailsID">
<!--Related data for each year displayed here-->
</div>
在文档准备好注册按钮上单击
$(document).ready(function(){
$("#btnGo").click(function(){$("#OrderDetailsID").load("@Url.Action("yourpartialviewactionname","controllername")"+"?year="+$("#ddlYear").val());
});
});