Asp.net mvc 3 MVC3-异步分页

我有一个在my home>index.cshtml中使用分页的对象列表。当用户单击每个对象页面时，我只想刷新页面的该部分，而不想刷新其他内容。我将如何做到这一点

理想情况下，我希望使用异步方法和ControllerActions

控制器>HomeController.cs

public ViewResult Index(int page = 1) {
ProductsListViewModel viewModel = new ProductsListViewModel {
Products = repository.Products
.OrderBy(p => p.ProductID)
.Skip((page - 1) * PageSize)
.Take(PageSize),
PagingInfo = new PagingInfo {
CurrentPage = page,
ItemsPerPage = PageSize,
TotalItems = repository.Products.Count()
}
};
return View(viewModel);
}

主页>Index.cshtml：

@model SportsStore.WebUI.Models.ProductsListViewModel
@{
ViewBag.Title = "Products";
}
@foreach (var p in Model.Products) {
<div class="item">
<h3>@p.Name</h3>
@p.Description
<h4>@p.Price.ToString("c")</h4>
</div>
}
<div class="pager">
@Html.PageLinks(Model.PagingInfo, x => Url.Action("List", new {page = x}))
</div>

@model sportstore.WebUI.Models.ProductsListViewModel
@{
ViewBag.Title=“产品”；
}
@foreach（模型产品中的var p）{
@p、 名字
@p、 描述
@p、 价格。ToString（“c”）
}
@PageLinks（Model.pagininfo，x=>Url.Action（“List”，new{page=x}））

HtmlHelper>PagingHelper.cs

namespace SportsStore.WebUI.HtmlHelpers {
public static class PagingHelpers {
public static MvcHtmlString PageLinks(this HtmlHelper html,
PagingInfo pagingInfo,
Func<int, string> pageUrl) {
StringBuilder result = new StringBuilder();
for (int i = 1; i <= pagingInfo.TotalPages; i++) {
TagBuilder tag = new TagBuilder("a"); // Construct an <a> tag
tag.MergeAttribute("href", pageUrl(i));
tag.InnerHtml = i.ToString();
if (i == pagingInfo.CurrentPage)
tag.AddCssClass("selected");
result.Append(tag.ToString());
}
return MvcHtmlString.Create(result.ToString());
}
}
}

namespace sportstore.WebUI.HtmlHelpers{
公共静态类分页帮助器{
公共静态MvcHtmlString页面链接（此HtmlHelper html，
PaginInfo PaginInfo，
Func页面（URL）{
StringBuilder结果=新建StringBuilder（）；
对于（inti=1；i您可以使用AJAX。第一步是将您想要刷新的内容放入一个分部并放入它自己的div中：

@model SportsStore.WebUI.Models.ProductsListViewModel
@{
    ViewBag.Title = "Products";
}

<div id="products">
    @Html.Partial("_products", Model.Products)
</div>

<div class="pager">
    @Html.PageLinks(Model.PagingInfo, x => Url.Action("Index", new { page = x }))
</div>

然后调整控制器动作，使其能够响应AJAX请求：

public ActionResult Index(int page = 1) 
{
    var viewModel = new ProductsListViewModel 
    {
        Products = repository.Products
            .OrderBy(p => p.ProductID)
            .Skip((page - 1) * PageSize)
            .Take(PageSize),
        PagingInfo = new PagingInfo 
        {
            CurrentPage = page,
            ItemsPerPage = PageSize,
            TotalItems = repository.Products.Count()
        }
    };
    if (Request.IsAjaxRequest())
    {
        return PartialView("_Products", viewModel);
    }

    return View(viewModel);
}

现在剩下的就是AJAXify分页锚。可以在单独的javascript文件中完成，您可以使用jQuery订阅
。单击它们的事件（）
，并用AJAX请求替换默认操作：

$(function() {
     $('.pager a').click(function() {
         $.ajax({
             url: this.href,
             type: 'GET',
             cache: false,
             success: function(products) {
                 $('#products').html(products);
             }
         });

         // prevent the default redirect
         return false;
     });
});

通过将
索引
操作的返回类型从
查看结果
更改为
操作结果
。我已经更新了我的答案。我没有注意到您已经修改了此选项。您应该始终将
操作结果
作为返回类型保留给您的操作，这是结果层次结构中的最高级别。不，
返回rtialView（“产品”，视图模型）；
不应包括主布局。您确定AJAX请求有效并且输入了
if
条件吗？您将收到一个500错误。控制器操作中是否引发异常？或者在渲染部分时？使用FireBug查看AJAX请求的响应，并查看此错误的确切原因错误。您有两个寻呼机这一事实不应该改变或使任何事情复杂化。它应该可以工作。这是因为
cache:false
AJAX参数添加了一个随机数，以确保浏览器不会缓存请求。您可以使用POST而不是GET，在这种情况下，您不再需要
cache:false
。但这应该是正确的这不是问题的原因。该链接已使用页面查询字符串参数指向正确的控制器操作。javascript所做的只是将该链接轴化。因此，请确保链接指向正确的操作。是否将网格放置在局部视图中
$(function() {
     $('.pager a').click(function() {
         $.ajax({
             url: this.href,
             type: 'GET',
             cache: false,
             success: function(products) {
                 $('#products').html(products);
             }
         });

         // prevent the default redirect
         return false;
     });
});