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

你需要参考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使它成为一个蛋糕，只用几行代码来交互和更新部分视图！

快乐编码...

原文链接：https://www.f2er.com/ajax/160823.html