具有部分視圖的AJAX頁面列表

Question

我無法弄清楚如何使用ajax獲取部分視圖來呈現分頁列表。

我最接近它的工作是在部分視圖中使用分頁的例子，asp.net mvc

我基本上試圖創建一個頁面，其中包含每個用戶的注釋列表，其中頁面可以像stackoverflow用戶頁面上的answers選項卡一樣進行更改。

在第一次尋呼機點擊時，分頁工作正常，但是一旦我再次點擊尋呼機，部分視圖就會返回。

控制器：

public class ProductController : Controller
{
    public IQueryable<Product> products = new List<Product> { 
    new Product{ProductId = 1, Name = "p1"},
     new Product{ProductId = 2, Name = "p2"},
      new Product{ProductId = 3, Name = "p3"},
       new Product{ProductId = 4, Name = "p4"},
        new Product{ProductId = 5, Name = "p5"}
    }.AsQueryable();

    public object Index()
    {         
        return View();
    }

    public object Products(int? page)
    {
        var pageNumber = page ?? 1; // if no page was specified in the querystring, default to the first page (1)
        var onePageOfProducts = products.ToPagedList(pageNumber, 3); // will only contain 25 products max because of the pageSize

        ViewBag.OnePageOfProducts = onePageOfProducts;
        return PartialView("_Products");
    }
}

瀏覽次數：

Index.cshtml：

<link href="/Content/PagedList.css" rel="stylesheet" type="text/css" />

<h2>List of Products</h2>

<div id="products">    
    @Html.Action("Products", "Product")
</div>


@section scripts{

    <script type="text/javascript">
    $(function() {
    $('#myPager').on('click', 'a', function() {
        $.ajax({
            url: this.href,
            type: 'GET',
            cache: false,
            success: function(result) {
                $('#products').html(result);
            }
        });
        return false;
    });
    });
    </script>
    }

_Products.cshtml：

@using PagedList.Mvc;
@using PagedList;


<ul>
    @foreach(var product in ViewBag.OnePageOfProducts){
        <li>@product.Name</li>
    }
</ul>

<!-- output a paging control that lets the user navigation to the previous page, next page, etc -->
<div id="myPager">
    @Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Products", new { page }))
</div>

模型

public class Product
{
    public int ProductId { get; set; }
    public string Name { get; set; }
}

任何人都可以告訴我我做錯了什么嗎？

Answer 1

我最終使用了pagedlist源代碼中不引人注目的ajax示例[ https://github.com/troygoode/PagedList][1]

局部視圖：

@using PagedList;
@using PagedList.Mvc;    

<ul id="names" start="@ViewBag.Names.FirstItemOnPage">
    @foreach(var i in ViewBag.Names){
        <li>@i</li>
    }
</ul>

@Html.PagedListPager((IPagedList)ViewBag.Names, page => Url.Action("Index", new { page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing( new AjaxOptions(){  HttpMethod = "GET", UpdateTargetId = "unobtrusive"}))

指數：

@{
    ViewBag.Title = "Unobtrusive Ajax";
}
@using PagedList;
@using PagedList.Mvc;

@Styles.Render("~/Content/PagedList.css")

<h2>Unobtrusive Ajax</h2>

<p>Example of paging a list:</p>
<div id="unobtrusive">
    @Html.Partial("UnobtrusiveAjax_Partial")
</div>

控制器：

  public class UnobtrusiveAjaxController : BaseController
    {
        // Unobtrusive Ajax
        public ActionResult Index(int? page)
        {
            var listPaged = GetPagedNames(page); // GetPagedNames is found in BaseController
            if (listPaged == null)
                return HttpNotFound();

            ViewBag.Names = listPaged;
            return Request.IsAjaxRequest()
                ? (ActionResult)PartialView("UnobtrusiveAjax_Partial")
                : View();
        }
    }

Answer 2

以防萬一，因為原來的問題沒有得到回答。 我想問題是，點擊處理程序沒有重新連接到AJAX請求生成的新尋呼機元素。 在這種情況下，我也不喜歡不引人注目的AJAX解決方案，因為在嵌套視圖中對尋呼機ID進行硬編碼，而以其他方式傳遞它可能過於繁瑣。

<script type="text/javascript">
   // better not to clutter global scope of course, just for brevity sake
   var attachHandlers = function() {
       $('#myPager a').click(function() {
           $('#myPager').load(this.href, function() {
               attachHandlers();
           });
           return false;
       });
   };

   $(document).ready(function () {
       attachHandlers();
   });
</script>