Question

我使用此代码进行分页

        <script type="text/javascript">
            function goToPage(pageIndex) {

                $("#currentPage").val(pageIndex);
                $("#gridAction").val("CurrentPageChanged");

                submitForm();
            }

            function onPageSizeChange(pageIndex) {

                $("#gridAction").val("PageSizeChanged");
                submitForm();
            }

            function submitForm() {
                var form = $("#grid").parents("form:first");
                form.submit();
            }            
        </script>       

        <style type="text/css">

                div {
                        /* border: solid 1px black; */
                }       

                #grid {
                        width: 100%;    /* use this field to set width of the whole grid */
                        display: table;
                }

                #grid table {
                        width: 100%;
                }


                #grid #pager {
                        white-space: nowrap;
                        font-size: 9pt;
                        margin-bottom : 5px;
                }


                #grid #pager .section {
                        width: 33.3%;
                        vertical-align: middle;
                }       


                #grid #pager #navButtons table {
                        width: 165px;
                        margin-left: auto;  /* center */
                        margin-right: auto;
                }

                #grid #pager #navButtons table td {
                        text-align: center;
                }

                #grid #pager #navButtons .disabled {
                        color: #C0C0C0;
                        text-align: center;
                }

                #grid #pager #navButtons a {
                        text-decoration: none;
                }

                #grid #pager #navButtons a {
                        text-decoration: none;
                }

                #grid #pager #rowsPerPage {
                        text-align: right;
                }

                #grid #data table {
                  border: solid 1px #e8eef4;
                  border-collapse: collapse;
                }

                #grid #data table td {
                  padding: 5px;   
                  border: solid 1px #e8eef4;
                }

                #grid #data table th {
                  padding: 6px 5px;
                  text-align: left;
                  background-color: #e8eef4; 
                  border: solid 1px #e8eef4;   
                  white-space: nowrap;
                }


        </style>



   <p>
        <%= Html.ActionLink("Add New", "Add") %>
    </p>


    <% using (Html .BeginForm()) { %>

    <div id="grid">
                <% if (Model.Count() == 0) { %>
                        <div id="emptyMessage">
                                There are no customers that match specified criteria.
                        </div>
                <% } else { %>


                <div id="header">
                        <div id="pager">
                                <table>
                                        <tr>
                                                <td id="stats" class="section">
                                                        <%=ViewData["pagerStats"] %>
                                                </td>

                                                <td id="navButtons" class="section">                    
                                                        <% if ((bool)ViewData["isPagerVisible"]) { %>
                                                                <table>
                                                                        <tr>
                                                                                <td>
                                                                                        <% if ((bool)ViewData["isFirstPage"]) { %>
                                                                                                <span class="disabled">&lt;&lt;</span>
                                                                                        <% } else { %>
                                                                                                <a href="#" onclick="goToPage(1)">&lt;&lt;</a>  
                                                                                        <% } %>
                                                                                </td>

                                                                                <td>
                                                                                        <% if ((bool)ViewData["isFirstPage"]) { %>
                                                                                                <span class="disabled">&lt;</span>
                                                                                        <% } else { %>
                                                                                                <a href="#" onclick="goToPage(<%= ViewData["previousPage"] %>)">&lt;</a>  
                                                                                        <% } %>
                                                                                        </td>

                                                                                <td>
                                                                                        <%//=Html.TextBox("currentPage", ViewData["currentPage"], new {style = "width:25px", maxlength = 5}) %> 
                                                                                        <%= Html.Hidden("currentPage") %>
                                                                                        Page <%= ViewData["currentPage"] %> of <%= ViewData["totalPages"] %>
                                                                                </td>

                                                                                <td>
                                                                                        <% if ((bool)ViewData["isLastPage"]) { %>
                                                                                                <span class="disabled">&gt;</span>
                                                                                        <% } else { %>
                                                                                                <a href="#" onclick="goToPage(<%= ViewData["nextPage"] %>)">&gt;</a> 
                                                                                        <% } %>
                                                                                </td>

                                                                                <td>
                                                                                        <% if ((bool)ViewData["isLastPage"]) { %>
                                                                                                <span class="disabled">&gt;&gt;</span>
                                                                                        <% } else { %>
                                                                                                <a href="#" onclick="goToPage(<%= ViewData["lastPage"] %>)">&gt;&gt;</a> 
                                                                                        <% } %>
                                                                                </td>

                                                                        </tr>
                                                                </table>
                                                        <% } else { %>
                                                                <%= Html.Hidden("currentPage") %>
                                                        <% } %>
                                                        </td>                                           

                                                        <td id="rowsPerPage" class="section">
                                                                <%= Html.DropDownList("pageSize", CustomerController.PageSizeSelectList(), new { onchange = "onPageSizeChange()" })%> rows per page                   
                                                        </td>
                                                </tr>
                                        </table>                                                                                
                                </div>  <!-- pager -->
                        </div> <!-- header -->

                        <%= Html.Hidden("gridAction") %>

                        <div id="data">
                                <table>
                                        <tr>
                                                <th></th>
                                                <th>
                                                        ID
                                                </th>
                                                <th>
                                                        First Name
                                                </th>

                                                <th>
                                                        Last Name
                                                </th>

                                                <th>
                                                        Phone
                                                </th>


                                        </tr>

                                        <% foreach (var item in Model) { %>

                                                <tr>
                                                        <td>
                                                                <%= Html.ActionLink("Edit", "Edit", new { id=item.CustomerID_FK}) %> |
                                                                <%= Html.ActionLink("Delete", "Delete", new { id = item.CustomerID_FK })%>
                                                        </td>

                                                        <td>
                                                                <%= Html.Encode(item.CustomerID_FK) %>
                                                        </td>

                                                        <td>
                                                                <%= Html.Encode(item.CustomerName) %>
                                                        </td>

                                                        <td>
                                                                <%= Html.Encode(item.CustomerFullName) %>
                                                        </td>

                                                        <td>
                                                                <%= Html.Encode(item.CustomerTypeID) %>
                                                        </td>


                                                </tr>

                                        <% } %>

                                </table>
                        </div> <!-- data -->

                <% } %>
        </div>  <!-- grid -->   
        <% } %>

但在更改页面索引时，页面会刷新。但我不想要刷新页面，我想使用jquery或ajax。我怎么能让这个工作？

Answer 1

你提交的是表格：

form.submit();

执行完整回发到服务器并刷新页面。如果您想使用AJAX，您应该使用AJAX请求提交此表单，如下所示：

function submitForm() {
    var form = $("#grid").parents("form:first");
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: form.serialize(),
        success: function(result) {
            // Update only the portion of the DOM that contains the grid:
            $('#grid').html(result);
        }
    });
}

显然，为了实现这一点，您必须将此网格放入局部视图中：

<% using (Html.BeginForm("Paginate", null)) { %>
    <div id="grid">
        <%= Html.Partial("_Grid", Model) %>
    </div>
<% } %>

然后让你的Paginate控制器操作只返回这个部分视图，因为它将使用AJAX调用：

[HttpPost]
public ActionResult Paginate(int currentPage)
{
    // ... paginate your dataset here
    return PartialView("_Grid", model);
}

据说我建议您使用MvcContrib.Grid或Telerik ASP.NET MVC Grid这样的真实网格，而不是编写那么难维护的代码。

我如何使用ajax分页或jquery分页？

1 个答案: