我不太清楚如何使用ajax获取部分视图以呈现页面列表。
我最接近使用的)是来自在部分视图中使用分页的示例,asp.netmvc
我基本上是在尝试创建一个包含每个用户评论列表的页面,该页面可以按照与stackoverflow用户页面上的“答案”选项卡相同的方式进行更改。
分页在第一次单击时就可以正常工作,但是当我再次单击该分页器时,部分视图即已返回。
控制器:
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; } }
谁能告诉我我在做什么错?
我最终使用了来自pagedlist来源 [https://github.com/troygoode/PagedList][1]的简洁Ajax示例
部分视图:
@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(); } }