ASP.NET MVC-如何分页ajax搜索结果? [英] ASP.NET MVC - How to page ajax search results?
问题描述
我正在努力掌握asp.net MVC应用程序中的特定表单设置. 目前,我有一个页面,显示大量数据.在此页面上,有一个简单的表单,该表单调用一个action方法,该方法在发布时(通过ajax-jform)返回一个局部视图. 直到我尝试为搜索结果添加分页支持之前,一切都很好.
I am struggling to get to grips with a particular form setup in my asp.net MVC application. Currently I have a page which displays a chunk of data. On this page is a simple form that calls into an action method that returns a partialview when posted (through ajax - jform). This is all very well until I try and add paging support to the search results.
我有一堆代码可以对IQueryable进行分页,但是我不确定如何在当前设置中实现此功能.
I have a chunk of code that that will paginate an IQueryable, but Im not sure how to implement this in my current setup.
这里有一些代码:
[Authorize]
public ActionResult AssetSearch(string RoomID, string type, string keyword, string risks)
{
//check values passed in
Guid? r = null;
if (RoomID != "Any" && RoomID != null)
r = new Guid(RoomID);
string t = type == "Any" ? null : type;
string risk = risks == "Any" ? null : risks;
var assets = surveyRepository.GetAssetsSearch(r, t, keyword, risk);
if (Request.IsAjaxRequest())
{
return PartialView("AssetListControl", assets);
}
else
{
return View("AssetListControl", assets);
}
}
此操作方法返回一个局部视图,该局部视图通过以下jquery在div中呈现.
This action method returns a partial view which gets rendered out in a div through the following jquery.
$(document).ready(function() {
$("#searchForm").submit(function() {
$("#searchForm").ajaxSubmit({ target: '#results', beforeSubmit: PreSub, success: Success });
return false;
});
});
function Success(responseText, statusText) {
$("#loadingMessage").html("done");
$('#resultsTable').tablesorter();
$("#results").slideDown("slow");
}
function PreSub(formData, jqForm, options) {
$("#loadingMessage").html("loading...").fadeIn();
$("#results").slideUp("fast");
return true;
}
我的表单如下:
<form id="searchForm" action="<%=Url.Action("AssetSearch") %>" method="post">
<fieldset>
<label for="RoomID">
Room Name</label>
<%= Html.DropDownList("RoomID") %>
<label for="Type">
Asset Type</label>
<%= Html.DropDownList("Type") %>
<label for="Risks">
Risk Level</label>
<%= Html.DropDownList("Risks") %>
<label for="Keyword">
Keyword</label>
<%= Html.TextBox("Keyword") %>
<input type="submit" name="sumbit" id="searchBtn" value="Search" />
</fieldset>
</form>
对不起,代码过载:-)
Sorry for the code overload :-)
我觉得我已经配置好了控制器并以一种不容易实现分页的方式查看.欢迎所有建议!
I have a feeling that I have configured my controller and view in such a way that paging won't be easy to implement. All advice welcome!
提前谢谢!
推荐答案
好,所以我设法以一种不太吸引人的方式使其与AJAX和POST一起使用.
Ok, so I managed to get it working with AJAX and POST in a not so attractive way.
首先,我在分页的结果部分视图中放置了两个锚标记,如果存在上一页或下一页,则将其显示.这些链接触发javascript函数并传递页面值.导航如下所示:
Firstly, I dropped a couple of anchor tags in my paged results partial view that, if there are previous or next pages, show up. These links fire off a javascript function and pass a page value. The navigation looks as follows:
<% if (Model.HasPreviousPage)
{ %>
<a href="#" onclick="PageResults( <%=Model.PageIndex - 1 %>)">Back</a>
<%} %>
<% if (Model.HasNextPage)
{ %>
<a href="#" onclick="PageResults( <%=Model.PageIndex + 1 %>)">Forward</a>
<%} %>
该函数如下所示:
function PageResults(page) {
var form = document.forms["searchForm"];
form.elements["page"].value = page;
$("#searchForm").ajaxSubmit({ target: '#results', beforeSubmit: PreSub, success: Success });
return false;
}
我还调整了控制器以接受页面参数,该参数用于检索正确的结果集:
I have also tweaked my controller to accept a page parameter, which is used to retrieve the correct set of results:
var paginated = new PaginatedList<Asset>(assets, Page ?? 0, 10);
这似乎可以解决问题,尽管效果不佳:)
This seems to do the trick, although its not great :)
这篇关于ASP.NET MVC-如何分页ajax搜索结果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!