Der Filter geht verloren in WebGrid + Paging + Sortierung + Filterung in .NET 4.0

Question

Ich habe ein WebGrid implementiert. Sortieren, Paging und Filter funktionieren nicht zusammen. Sie arbeiten, wenn Sie sie alleine benutzen. Wenn Sie die drei gleichzeitig kombinieren, funktioniert das Filtern nicht.

Das Symptom:
Die Ergebnismenge filtern, dann sortieren.

oder

Filter die resultset, dann gehen Sie auf der nächsten Seite.

In beiden Fällen ist der Filter verloren. Aber es tut Seite und sortieren.

Im folgenden Code: Wenn die Aktionsmethode über eine Sortierung oder Paginierung aufgerufen wird, werden Nullen für jeden der Filterparameter angezeigt.

Wenn die Aktionsmethode über den Filter aufgerufen wird, werden die Filterparameter durchlaufen.

Das sagt mir, dass wenn Sie eine Sortierung oder eine Seitenumbruch initiieren, dass es das Formular nicht übermittelt.

public ActionResult MyPage(int? page, int? rowsPerPage, 
       string sort, string sortdir, 
       string orderNumber, string person, string product) 

Ich habe mich auf SO und anderswo umgesehen. Es gibt viele Beispiele und Leute fragen, wie man das eine oder andere oder alle drei macht. Aber ich habe nur one with my issue gesehen, also poste ich es hier. (Sein war ungelöst auch)

Ich habe meine Seite wie folgt umgesetzt:

@using (Ajax.BeginForm("MyPage", null, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }, new { id = "filter" })) 
{ 
    <div class="right"> 
     <select id="rowsPerPage" name="rowsPerPage"> 
      <option>15</option> 
      <option>25</option> 
      <option>50</option> 
      <option>75</option> 
      <option>100</option> 
     </select> 
    </div> 

    <div class="table"> 
     <div class="tableRow"> 
      <div class="tableCell"> 
       Order Number 
      </div> 
      <div class="tableCell"> 
       Person 
      </div> 
      <div class="tableCell"> 
       Product 
      </div> 
     </div> 
     <div class="tableRow"> 
      <div class="tableCell"> 
       <input type="text" id="orderNumber" name="orderNumber" /> 
      </div> 
      <div class="tableCell"> 
       <input type="text" id="person" name="person" /> 
      </div> 
      <div class="tableCell"> 
       <input type="text" id="product" name="product" /> 
      </div>   
      <div class="tableCell"> 
       <input type="submit" class="button" value="Search" /> 
      </div> 
     </div> 
    </div> 

<br/> 

<div id="myGrid"> 
    @Html.Partial("_MyPage", Model) 
</div> 

} 

Das Gitter wird als Teilansicht wie folgt umgesetzt:

<script type="text/javascript"> 
    $(document).ready(function() { 
     resetUI(); 
    }); 
</script> 

@{ 
    var grid = new WebGrid(canPage: true, rowsPerPage: Model.rowsPerPage, canSort: true, ajaxUpdateContainerId: "grid", ajaxUpdateCallback: "resetUI"); 
    grid.Bind(Model.rows, rowCount: Model.TotalRecords, autoSortAndPage: false); 
    @grid.GetHtml(
     tableStyle: "fancyTable", 
     headerStyle: "header", 
     footerStyle: "footer", 
     rowStyle: "row", 
     alternatingRowStyle: "alt", 
     mode: WebGridPagerModes.Numeric | WebGridPagerModes.NextPrevious, 
     nextText: "Next", 
     previousText: "Previous", 
     htmlAttributes: new { id = "grid" }, 
     columns: grid.Columns(
      grid.Column("OrderDate", "Order Date", format: @<text>@((item.OrderDate != null) && (item.OrderDate.ToString("MM/dd/yyyy") != "01/01/0001") ? item.OrderDate.ToString("MM/dd/yyyy") : "")</text>), 
      grid.Column("OrderNumber", "Order Number"), 
      grid.Column("Field1, "Field 1"), 
      grid.Column("Field2", "Field 2"), 
      grid.Column("Person", "Person"), 
      grid.Column("Product", "Product"), 
      grid.Column(format: (item) => Html.ActionLink("View", "Details", new { id = item.orderNumber })) 
      ) 
     ); 
} 

Answer 1

Wenn die Paginierung Aufbau und sortieren Links berücksichtigt der WebGrid-Helfer alle in der aktuellen URL vorhandenen Abfragezeichenfolgenparameter. Es ignoriert POSTed und Routenwerte. Und da Ihre Suchformular-POSTs die Werte, die vom Benutzer in diesem Formular eingegeben wurden, nicht in der Abfragezeichenfolge enthalten, sind sie nicht Teil der Seitenumbruch- und Sortierlinks und wenn Sie auf einen dieser Links klicken, sind die Werte hat verloren. Das ist Absicht.

So ein Weg, dies zu beheben, ist Ihren AjaxForm zu ersetzen:

@using (Ajax.BeginForm("MyPage", null, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }, new { id = "filter" })) 

mit einem Standard-HTML-Formular mit dem GET Verb:

@using (Html.BeginForm("MyPage", null, FormMethod.Get)) 

oder eine AJAX Form des GET Verb verwenden:

@using (Ajax.BeginForm("MyPage", null, new AjaxOptions { HttpMethod = "Get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }, new { id = "filter" })) 

Jetzt, wenn der Benutzer etwas filtern möchte und die Schaltfläche "Senden" drückt, werden die Werte eingegeben ed in der Suchmaske endet in der Query-Zeichenfolge und beim Rendern erzeugt der WebGrid-Helfer diese, um seine Sort- und Page-Links zu generieren. Wenn Sie auf diese Links klicken, werden die Werte natürlich an den Server gesendet.

Wenn Sie mehr Kontrolle darüber möchten, können Sie erweiterte Rastersteuerungen wie MvcContrib.Grid oder Telerik Grid for ASP.NET MVC in Erwägung ziehen.

Answer 2

Senden Sie das Formular an die URL, die die Paging-Link verweist auf:

<script type="text/javascript"> 
    $(function() { 
     $('th a, tfoot a').click(function() { 
      $('form').attr('action', $(this).attr('href')).submit(); 
      return false; 
     }); 
    }); 
</script> 

Das bin ich doesnot helfen, aber könnten Sie

Answer 3

einfach ein GET für Ihre Aktion-Methode erstellen, wann immer eine Art oder Paging helfen Brennt aus dem Grid und trifft die GET - Methode zusammen mit einer Menge von Parametern (Sie können sehen, indem Sie auf die Paging - Nummer oder Sortierkopf des Rasters mit Web - Entwickler - Tools Ihres Browsers zeigen), dort können Sie Ihre Datenmenge filtern und dann übergeben Modell zur Ansicht:

[HttpGet] 
public ActionResult MyPage() 

Jedes Mal, wenn Sie Sort or Paging verwenden, wird diese Methode getroffen, und Sie können Ihre Filterung durchführen, indem Sie statische Flags hinzufügen, die je nachdem, was gefiltert werden soll, zugewiesen werden können.