ASP.NET MVC - 如何分页 ajax 搜索结果？答案

【问题标题】：ASP.NET MVC - How to page ajax search results?ASP.NET MVC - 如何分页 ajax 搜索结果？
【发布时间】：2009-10-05 14:17:18
【问题描述】：

我正在努力掌握我的 asp.net MVC 应用程序中的特定表单设置。目前我有一个显示大量数据的页面。在这个页面上是一个简单的表单，它调用一个操作方法，该方法在发布时返回一个部分视图（通过 ajax - jform）。在我尝试向搜索结果添加分页支持之前，这一切都很好。

我有一大段代码可以对 IQueryable 进行分页，但我不确定如何在我当前的设置中实现这一点。

这里有一些代码：

[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 中呈现。

$(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>

抱歉代码超载:-)

我感觉我已经配置了控制器和视图，使得分页不容易实现。欢迎所有建议！

提前致谢！

【问题讨论】：

标签： asp.net jquery ajax paging

【解决方案1】：

好的，所以我设法让它以一种不太吸引人的方式与 AJAX 和 POST 一起使用。

首先，我在分页结果部分视图中放置了几个锚标记，如果有上一页或下一页，就会显示出来。这些链接触发一个 javascript 函数并传递一个页面值。导航如下：

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

我还调整了我的控制器以接受一个页面参数，该参数用于检索正确的结果集：

var paginated = new PaginatedList<Asset>(assets, Page ?? 0, 10);

这似乎可以解决问题，虽然它不是很好:)

【讨论】：