ASP.NET MVC中的部分视图非常好。它们允许您仅更新DOM的一部分，而不必执行完整的页面刷新或回发。当然，有很多方法可以实现这一点，比如ajax和webAPI，但是部分视图比其他方法有一个主要的好处：
强类型的数据模型
使用这种方法，控制器可以将一个漂亮的对象模型推回到部分视图而不是Json，我们可以利用Razor和/或脚手架进行数据呈现，同时增强整个用户体验。
在这个例子中，我们将创建一个包含一个下拉框的母版页，然后我们将添加一个部分视图来显示由下拉列表值过滤的数据。
父/主视图
部分视图需要位于主页/父页面中，因此我们创建一个：
@model Models.FullAndPartialviewmodel
@{
ViewBag.Title = "My Master Page";
}
<script type="text/javascript" src="CDN or local jquery file"></script>
<div id="container">
<label for="ddlCategory"><strong>Select a category</strong></label>
@Html.DropDownListFor(m =>m.CategoryId,new SelectList(Model.CategoryList,"CategoryId","CategoryName",Model.CategoryId),new { id = "ddlCategory",@class = "test" })
<br/><br/>
<div id="dvCategoryResults">
@{Html.RenderPartial("CategoryResults",Model);}
</div>
</div>
这里没什么好想的有一些HTML元素丢失（头，身体等），但我认为这些已经被定义。但是，您需要注意两件事情：
-
你需要参考jquery。这可以是本地的或通过CDN
<script type="text/javascript" src="CDN or local jquery file"></script> - 并且，您需要将部分视图放在div中，因为我们将在ajax调用中稍后引用div。
部分视图
部分视图只是普通视图的非常纤薄的版本。您只需添加必需的html元素。通常，您应该避免在部分视图中放置任何javascript和css引用，并尽量使其尽可能轻。视图的名称应@Html.RenderPartial()与主视图中声明中使用的名称相同CategoryResults
@model Models.FullAndPartialviewmodel
<table>
<thead>
<tr>
<th>Category</th>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
@foreach (var product in Model.Products)
{
<tr>
<td>@product.Category</td>
<td>@product.Product</td>
<td>@product.Product</td>
</tr>
}
</tbody>
</table>
3.控制器
控制器由3种方法组成：
-
一个用于加载整个页面（父和部分） -
Index() -
一个用于重新加载/刷新部分视图 -
GetCategoryProducts() -
和一个帮助程序来创建和填充数据模型 -
GetFullAndPartialviewmodel()
[HttpGet]
public async Task<ActionResult> Index()
{
var model = await this.GetFullAndPartialviewmodel();
return this.View(model);
}
[HttpGet]
public async Task<ActionResult> GetCategoryProducts(string categoryId)
{
var lookupId = int.Parse(categoryId);
var model = await this.GetFullAndPartialviewmodel(lookupId);
return PartialView("CategoryResults",model);
}
private async Task<FullAndPartialviewmodel> GetFullAndPartialviewmodel(int categoryId = 0)
{
... code omitted...
// populate the viewmodel and return it
return fullAndPartialviewmodel;
}
4.数据模型
public class FullAndPartialviewmodel
{
public int CategoryId { get; set; }
public List<CategoryProductItem> Products { get; set; }
public List<CategoryListItem> CategoryList { get; set; }
}
AJAX代码
这里的想法是在用户从下拉列表中选择不同的类别时，重新加载页面上的部分视图。在您的母版页底部，在html下面添加以下JavaScript代码：
<script type="text/javascript">
$(document).ready(function () {
$("#ddlCategory").change(function () {
var categoryId = $("#ddlCategory").val();
$("#dvCategoryResults").load('@(Url.Action("GetCategoryProducts","Home",null,Request.Url.Scheme))?categoryId=' + categoryId);
});
});
</script>
注意：JavaScript代码可以并且应该存在于外部.js文件中，但是为了简单起见，我将其放在一起。
编辑作为读者指出（感谢marc），如果您将代码放在外部.js文件中，请确保删除任何Razor代码，因为它会破坏事物。在上面的例子中，@UrlAction ..应该被替换为正确的链接。
这一小块代码是从下拉列表中拉取categoryId的值，执行GetCategoryProducts()对Home控制器中的方法的调用，然后使用新数据更新包含部分视图的div的内容。
使用部分视图，很容易扩展您的视图，并使其更加灵敏和用户友好。更重要的是，jQuery使它成为一个蛋糕，只用几行代码来交互和更新部分视图！
快乐编码...