使用Ajax更新MVC部分视图

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元素丢失（头，身体等），但我认为这些已经被定义。但是，您需要注意两件事情：

1. 你需要参考jquery。这可以是本地的或通过CDN<script type="text/javascript" src="CDN or local jquery file"></script>
2. 并且，您需要将部分视图放在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使它成为一个蛋糕，只用几行代码来交互和更新部分视图！

快乐编码...