Question

我无法在Webgrid中跨页面保留过滤器（搜索）。在单击下一页时，搜索条件将丢失。任何想法??

部分视图：

@model IEnumerable<NorthwindMVC_2.Models.GetOrdersResult>
@using NorthwindMVC_2.Models;

<input type="hidden" id="page" />

@{
ViewBag.Title = "_Grid";
Layout = null;
}

@using (Html.BeginForm(FormMethod.Get)) 
{  
<input type="search" name="SearchString" style="width:650px; margin-right:10px" placeholder="ID,  Ship Name, Ship Address, Required Date, Postal Code" id="txtSearch" />
<input type="submit" value="Search"/>
<input type="button" value="Clear" id="btnClear"/>

<script>


$("#btnClear").live("click", refreshGrid);

function refreshGrid() {

    var pageNumber = '@ViewBag.page';
 //$("#txtSearch").val("");

 $.ajax(
 {
     type: "GET",
     url: '@Url.Action("OrdersList", "Orders")',
 data: {
     searchText: $("#txtSearch").val(),
     page: pageNumber
 },
 dataType: "html",
 success: function (data) {
     $("#agrid").html(data);
 }
 })
 }

 </script>

<script type="text/javascript">

var PageNumber = '@ViewBag.page';
    $(document).ready(function page() {
        //alert(PageNumber);
    });


    //var page = '@ViewBag.page';



</script>

<style type="text/css">
    .webGrid { margin: 4px; border-collapse: collapse; width: auto; }
    .header { background-color: #d3dce0; font-weight: bold; color: whitesmoke; }
    .webGrid th, .webGrid td {border: 1px solid #C0C0C0; padding: 5px; }
    .alt { background-color: lightgrey; color: #000; }
    .footer { padding:10px; background-color:#d3dce0; color:black;}
    .birthdate { width:200px;}
    .id { width:50px;}
    .general { width: 120px;}
</style>


   var grid = new WebGrid(null,
            defaultSort: "",
            rowsPerPage: 10,
            canPage:true,
            ajaxUpdateContainerId:"grid",
            selectionFieldName: "SearchString",
            sortFieldName:"SortColumn",
            sortDirectionFieldName:"SortOrder");

<div style="display:none">
@grid.Bind(Model, autoSortAndPage: false, rowCount: ViewBag.tr);
</div>


 if (Model.Count() > 0)
 { 

 <div id="grid">

        @grid.GetHtml(
            tableStyle: "webGrid",
            headerStyle: "header",
            alternatingRowStyle: "alt",
            footerStyle: "footer",
            mode: WebGridPagerModes.All,
            numericLinksCount: 9,
            firstText: "First",
            lastText: "Last",
            previousText: "<",
            nextText: ">",
            columns: grid.Columns(
            grid.Column("OrderID", header:"ID", style:"id"),
            grid.Column("ShipName", "Name", style:"birthdate" ,  format: @<text>@Html.ActionLink((string)item.ShipName, "Edit", "Orders", new {  RowID = item.RowID, orderId = item.OrderID, page= (int) @ViewBag.page }, null)</text>),
            grid.Column("ShipAddress", header:"Address", style:"birthdate"),
            grid.Column("RequiredDate", header:"Required Date", style:"birthdate"),
            grid.Column("ShipPostalCode", header:"Postal Code", style:"general"),

              @*grid.Column("Action", format: @<text>
                <button class="edit-user display-mode" >Edit</button>
                <button class="save-user edit-mode"  >Save</button>
                <button class="cancel-user edit-mode" >Cancel</button>
                </text>,  style: "" , canSort: false)*@

            //grid.Column("Edit", format: (item) => Html.ActionLink("Edit", "Edit", "Orders", new { RowID = item.RowID, orderId = item.OrderID, page= (int) @ViewBag.page },  new  {  style = "color:#000" })),
            grid.Column("Delete", format: (item) => Html.ActionLink("Delete", "Delete", new { orderId = (int)item.OrderID }, new { onclick = "return confirm('Do you want to Delete this Order?')", style = "color:#000" })
        )
    )
)

</div>
  }
 else
 { 
<p>
No records found.</p>
}}      
<script type="text/javascript">

   var searchText = $("#txtSearch").val();
   $(function () {

       $('tfoot a').click(function () {
           var pageNumber = '@ViewBag.page';

          // $("#txtSearch").val("");
            $.ajax(
            { searchText : $("#txtSearch").val(),
                type: "GET",
                url: '@Url.Action("OrdersList", "Orders")',
                 data: {
                     searchText: $("#txtSearch").val(),
                     page: pageNumber
                 },
                 dataType: "html",
                 success: function (data) {
                     $("#agrid").html(data);
                 }
             })




       //    // when the user clicks on any of the pager links
       //    // try to extract the page number from the link and
       //    // set the value of the hidden field
       //    var SearchString = $("#txtSearch")
       //    var page = this.href.match(/page=([0-9])+/)[1];
       //    $('#page').val(page);

       //    alert(page);
       //    // submit the form so that the POST action is invoked
       //    // passing along the search criteria (Name and Year) along
       //    // with the page hidden field value to the Index action
       //    $('form').submit();

       //    // cancel the default action of the link which is to simply redirect
       //    // to the Index action using a GET verb.
       //    return false;
       });
   });

</script>

Answer 1

在你的$（＆＃39; tfoot a＆＃39;）中。点击（function（）...它会向行动方法发送＆＃34; GET＆＃34;请求（/？page = 1）您的ajax请求。您必须在此代码中处理您的寻呼机链接点击事件。

你可以做这样的事情

$('tfoot a').click(function () {

        var form = $('#yourformid');
        form.attr("action", this.href);
        $(this).attr("href", "#");
        form.submit();

    });

然后只保留搜索条件模型

请查看此approach

使用WebGrid分页MVC 4保留搜索过滤器

1 个答案: