予具有可以被搜索,并在网页具有分页项目的列表。当一个搜索查询中输入的局部视图获取正确加载(AJAX)。但是,当您使用分页,它触发一个非Ajax请求(整个页面被装载,并没有XmlHtt prequest旗头)。
I have a list of items which can be searched and the page has pagination. When a search query is entered the partial view gets loaded correctly (AJAX). However, when you use the pagination, it fires a non-ajax request (entire page gets reloaded and no XmlHttpRequest flag in the header).
是什么原因造成的?
$(function () {
// Adds Ajax to pagination of search results
var getPage = function () {
var $a = $(this);
var options = {
url: $a.attr("href"),
type: "get",
data: $("form").serialize()
};
$.ajax(options).done(function (data) {
var $target = $a.parents("div.pagedlist").attr("data-nn-target");
var $newHtml = $(data);
$target.html($newHtml);
$newHtml.effect("highlight");
});
// Prevent default action
return false;
};
$(".main-content").on("click", ".pagedlist a", getPage);
});
<form method="GET" action='@Url.Action("Index", "Show")' data-nn-ajax="true" data-nn-target="#contentlist" class="form-search">
<div class="input-append mysearch">
<input type="search" class="span5 search-query" name="query" data-nn-autocomplete="@Url.Action("AutoComplete")" />
<input type="submit" class="btn" value="Search" />
</div>
</form>
<div id="contentlist">
<table></table> // content
<div class="pagedlist" data-nn-target="#contentlist">
@Html.PagedListPager(Model, page => Url.Action("Index", new { page }), PagedListRenderOptions.MinimalWithItemCountText)
</div>
</div>
据本教程中,这条线code应该已经解决了,你不能使用分页的一个结果的问题。
According to the tutorial, this line of code should've solved the issue where you can't use the pagination for a resultset.
数据:$(形式)序列化()
public ActionResult Index(string query = "", int page = 1) {
IPagedList<ShowViewModel> model;
if (Request.IsAjaxRequest()) {
model = ViewModelFactory.Instance.CreateShowViewModels(_showRepository.GetShows()
.Where(
x =>
x.Title.ToLower()
.Contains(
query.ToLower())))
.OrderByDescending(x => x.LatestRelease).ToList().ToPagedList(page, 15);
ViewBag.Search = query;
return PartialView("_Shows", model);
}
model = ViewModelFactory.Instance.CreateShowViewModels(_showRepository.GetShows()).OrderByDescending(x => x.LatestRelease).ToList().ToPagedList(page, 15);
ViewBag.Search = null;
return View(model);
}
当我把一个断点,同时在查看
和 PartialView
通话,它击中了查看
每当我用分页(从而导致所有数据在每个时间显示)。为什么不是我的请求被视为AJAX的呢?
When I put a breakpoint at both the View
and the PartialView
call, it hits the View
whenever I use pagination (and thus causing all data to be displayed each time). Why aren't my requests seen as AJAX ones?
确认。主要内容
是分页链接的真正始祖;否则,该事件delgation $(主要内容)。在(点击,.pagedlist一个,GETPAGE)
将无法正常工作。
Make sure that .main-content
is a true ancestor of your pagination links; otherwise, the event delgation $(".main-content").on("click", ".pagedlist a", getPage)
won't work.
更新
后续问题。这样的:
var $target = $a.parents("div.pagedlist").attr("data-nn-target");
...应该是这样:
...should be this instead:
var $target = $($a.parents("div.pagedlist").attr("data-nn-target"));
这是因为 ATTR(数据-NN-目标)
只会给你的选择的,而不是一个jQuery对象使用该选择
This is because attr("data-nn-target")
will just give you the selector, not a jQuery object using that selector.