1

ホーム > index.cshtml にページングを使用するオブジェクトのリストがあります。ユーザーがオブジェクトの各ページをクリックすると、ページのその部分だけを更新したいだけで、それ以外は何も更新しません。どうすればこれを達成できますか?

理想的には、非同期メソッドとコントローラーアクションを使用したい...

コントローラー > 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>

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());
}
}
}
4

1 に答える 1

3

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>

そしてもちろん、対応する_Products.cshtmlパーシャルがあります：

@model IEnumerable<SportsStore.WebUI.Models.ProductViewModel>
@foreach (var p in Model.Products) {
    <div class="item">
        <h3>@p.Name</h3>
        @p.Description
        <h4>@p.Price.ToString("c")</h4>
    </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);
}

あとは、ページネーション アンカーを AJAX 化するだけです。.click()jQueryを使用してそれらのイベントをサブスクライブし、デフォルトのアクションをAJAXリクエストに置き換えることができる別の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;
     });
});
于 2012-06-27T06:20:35.627 に答える