具有部分视图的AJAX页面列表 [英] AJAX pagedlist with partial view

问题描述

我不太清楚如何使用ajax获取部分视图以呈现页面列表.

I can't quite figure out how to get a partial view to render a paged list using ajax.

我最接近使用的是中的示例在部分视图中使用分页，asp.net mvc

我基本上是在尝试创建一个包含每个用户评论列表的页面，该页面可以按照与stackoverflow用户页面上的答案"选项卡相同的方式进行更改.

I'm basically trying to create a page with a list of comments per user where the page can be changed in the same way as the answers tab on the stackoverflow users page.

第一次单击时，分页就可以正常工作，但是一旦再次单击该分页器，就会返回部分视图.

The paging works fine the on the first pager click, but then the the partial view is all that is returned once I click on the pager again.

控制器:

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:

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:

_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; }
}

有人可以告诉我我在做什么错吗?

Can anyone show me what I'm doing wrong?

推荐答案

我最终使用了pagedlist来源[

I ended up using the unobtrusive ajax example from the pagedlist source [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();
        }
    }

这篇关于具有部分视图的AJAX页面列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！