JqGrid in ASP.NET MVC Client-Ansicht mit jQuery und LINQ-zu-Entitäten sortieren

Question

Ich bin ein jQuery-Noob, also bin ich sicher, dass ich hier etwas Einfaches vermisse.

Ich habe das jqGrid mit einer Aktion arbeiten, die JSON-Daten von einem LINQ-to-Entities-Vorgang erstellt. Aber wenn ich im Browser auf die Spaltenüberschriften klicke, werden die Zeilen nicht sortiert. Der aufsteigende/absteigende Indikator erscheint, aber nichts anderes passiert.

Die notwendige JavaScript und CSS-Links sind in dem Master-Seitenkopf:

 
<script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> 
<!-- CSS and JavaScript files for jqGrid to display on Details pages --> 
<link rel="stylesheet" type="text/css" href="/scripts/jQuery/jqGrid-3.4.4/themes/green/grid.css" title="green" media="screen" /> 
<script src="/Scripts/jQuery/jqGrid-3.4.4/jquery.jqGrid.js" type="text/javascript"></script> 
<script src="/Scripts/jQuery/jqGrid-3.4.4/js/jqModal.js" type="text/javascript"></script> 
<script src="/Scripts/jQuery/jqGrid-3.4.4/js/jqDnR.js" type="text/javascript"></script> 

Hier ist mein Code für die Initialisierung:

 
// jqGrid setup. 
$("#gridlist").jqGrid({ 
    url: '/Contact/GridData', 
    datatype: 'json', 
    mtype: 'GET', 
    colNames: ['ID', 'First Name', 'Last Name', 'Organization'], 
    colModel: [ 
     { name: 'id', index: 'id', width: 40, align: 'left', resizable: true }, 
     { name: 'first_name', index: 'first_name', width: 200, align: 'left', resizable: true, sortable: true, sorttype: "text" }, 
     { name: 'last_name', index: 'last_name', width: 200, align: 'left', resizable: true, sortable: true, sorttype: "text" }, 
     { name: 'organization', index: 'organization', width: 300, align: 'left', resizable: true, sortable: true, sorttype: "text"}], 
    pager: jQuery('#pager'), 
    rowNum: 5, 
    rowList: [5, 10, 20, 50], 
    repeatitems: false, 
    viewrecords: true, 
    imgpath: '/scripts/jQuery/jqGrid-3.4.4/themes/green/images', 
    caption: 'Contacts' 
});     

Und hier ist der HTML:

 
    <h3>My Grid Data</h3> 
    <table id="gridlist" class="scroll" cellpadding="0" cellspacing="0"> 
    </table> 
    <div id="pager" class="scroll" style="text-align:center;"> 
    </div> 

Und, nur zur Vollständigkeit, die Aktionsmethode:

 
public ActionResult GridData() 
{ 
    var page = new { page = 1 }; 

    IEnumerable contacts = _db.ContactSet; 
    int i = 0; 
    var rows = new object[contacts.Count()]; 

    foreach (Contact contact in contacts) 
    { 
     rows[i] = new { id = contact.ID, cell = new[] { contact.ID.ToString(), contact.First_Name, contact.Last_Name, contact.Organization } }; 
     i++; 
    } 

    var result = new JsonResult(); 
    result.Data = new { page = 1, records = 2, rows, total = 1 }; 

    return result; 
} 

Irgendwelche Ideen, welche offensichtliche Einstellung ich hier vermisse?

Answer 1

Es gibt zwei grundlegende Möglichkeiten, dies zu umgehen. Das Raster kann die Daten selbst sortieren. Ich kann mich nicht erinnern, wie ich das einschalten soll, weil ich diese Option nie benutze. Im Allgemeinen arbeite ich mit Datensätzen, die zu groß sind, um zu der Seite zurückzukehren, also verwende ich die Auslagerungsfunktionen des Gitters. Dies erfordert diese Sortierung auf dem Server, da das Raster nicht das gesamte Dataset anzeigen kann.

Fügen Sie für die Aktion auf dem Server ein Sidx- und ein Sord-Argument (beide Zeichenfolgen) hinzu. Sidx wird der Name der Spalte sein, nach der sortiert werden soll. sord wird die Richtung sein, asc oder desc.

Ich habe a demo project, die zeigt, wie dies zu tun ist (mit LINQ to Objects). Die Verwendung von LINQ to Entities ist jedoch fast identisch. Ich verwende LINQ zu Entitäten in meinem Produktions-/Nicht-Demo-Code. Laden Sie die Demo-Lösung herunter und schauen Sie selbst.

Answer 2

I think below example should do it. 2 important points make sure your sort column has "it" keyword as prefix. (thats for linq to know). second you load only the number of objects array element as the rows the query can read. 

    var context = new HaackOverflowDataContext(); 

    int pageIndex = Convert.ToInt32(page) - 1; 
    int pageSize = rows; 
    int totalRecords = context.Question.Count(); 
    int totalPages = (int)Math.Ceiling((float)totalRecords/(float)pageSize); 

    var questions = context.Question.OrderBy("it."+ sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize); 

    int i = 0; 
    var rowsObj = new object[pageSize>totalRecords ? totalRecords : pageSize]; 

    foreach (Question q in questions) 
    { 
     rowsObj[i] = new { id = q.Id, cell = new object[] { q.Id, q.Votes, q.Title } }; 
     i++; 
    } 

    var result = new JsonResult(); 
    result.Data = new 
    { 
     total = totalPages, 
     page = page, 
     records = totalRecords, 
     rows = rowsObj 
    }; 

    return result; 

Dank Anuj Pandey www.anuj.co.in

er er ... bedeutet das ich weiß, Programmierung :)

Answer 3

OK, ich dies geschrieben haben sollte, als ich dachte, es raus, aber ich endete in anderen Aufgaben gefangen. Hier ist, was ich getan habe, das mit LINQ to Entities gearbeitet hat, implementiert für eine Berichtsentität. Zunächst wird der Code die jqGrid mit einer Standard-Suche war einfach zu laden (sobald ich herausgefunden, was ich verpasst hatte):

$(document).ready(function() { 

    // Set up jqGrid for the report search results table. 
    // This is displayed in a tab in the bottom section of the master page. 
    $("#searchResultList").jqGrid({ 
     url: '/Report/GetResultsL2E/', 
     datatype: 'json', 
     mtype: 'GET', 
     colNames: ['', 'ID', 'Title', 'Post_Date', 'Start_Date', 'End_Date', 'Summary'], 
     colModel: [ 
      { name: 'act', index: 'act', width: 75, sortable: false }, 
      { name: 'ID', index: 'ID', width: 40, align: 'left', hidden: true }, 
      { name: 'Title', index: 'Title', width: 150, align: 'left' }, 
      { name: 'Post_Date', index: 'Post_Date', width: 80, align: 'left', formatter: 'date' }, 
      { name: 'Start_Date', index: 'Start_Date', width: 80, align: 'left', formatter: 'date' }, 
      { name: 'End_Date', index: 'End_Date', width: 80, align: 'left', formatter: 'date' }, 
      { name: 'Summary', index: 'Summary', width: 240, align: 'left' } 
     ], 
     pager: jQuery('#searchResultPager'), 
     rowNum: 10, 
     rowList: [5, 10, 20, 50], 
     sortname: 'Title', 
     sortorder: "asc", 
     viewrecords: true, 
     imgpath: '/Scripts/jqGrid/themes/green/images', 
     caption: 'Report Search Results', 
     editurl: "/Report/Edit", 
     scroll: true, 
     height: 'auto', 
     recordtext: ' Reports', 
     pgtext: ' of ', 
     multiselect: true, 
     multiboxonly: true, //adds check box column 
     altRows: true, 
     loadComplete: function() { 
      var ids = jQuery("#searchResultList").getDataIDs(); 
      for (var i = 0; i "; 
       se = ""; 
       ce = ""; 
       jQuery("#searchResultList").setRowData(ids[i], { act: be + se + ce }) 
      } 
     } 
    }).navGrid('#searchResultPager', 
    { edit: false, add: false, del: false, search: false }, //options 
    {height: 280, reloadAfterSubmit: false }, // edit options 
    {height: 280, reloadAfterSubmit: false }, // add options 
    {reloadAfterSubmit: false }, // del options 
    {} // search options 
    ); 
}); 

Die Methode, um die Standard-Suchsatz zu laden, um die erste Seite der Gesamtmenge zurückgibt von verfügbaren Berichte:

 
/// 
/// Query the ReportSet to return a paged, sorted set of Report entity properties in response to a call from a view. 
/// 
/// The name of the column to use for sorting. 
/// The order of the sort (ascending or descending). 
/// The number of the page to return to the calling process. 
/// The number of rows to return for the page. 
/// This ActionResult returns a JSON result to be used by a jqGrid using the jQuery library. 
/// jQuery requires a script tag linking the jQuery.js script. 
/// jqGrid requires stylesheet links to the following scripts and stylesheets: 
/// 
/// jQuery/themes/base/ui.all.css 
/// jqGrid/themes/green/grid.css (or other theme CSS file) 
/// jqGrid/jquery.jqGrid.js 
/// jqGrid/grid.base.js 
/// jqGrid/js/jqModal.js 
/// jqGrid/js/jqDnR.js 
/// 
public ActionResult GetResultsL2E(string sidx, string sord, int page, int rows) 
{ 
    int pageIndex = Convert.ToInt32(page) - 1; 
    int pageSize = rows; 
    int totalRecords = _db.ReportSet.Count(); 
    int totalPages = (int)Math.Ceiling((float)totalRecords/(float)pageSize); 
    int startRecord = pageIndex * pageSize; 

    List rowStrings = new List(); 
    // Get all of the reports in the model in a fixed order (for comparison). 
    //var reports = from item in _db.ReportSet 
    //    orderby item.Start_Date, item.Title 
    //    select new { item.ID, item.Title, item.Post_Date, 
    //    item.Start_Date, item.End_Date, item.Summary }; 
    // Get all of the reports in the model in a dynamic order passed from jqGrid. 
    string orderBytext = ""; 
    orderBytext = string.Format("it.{0} {1}", sidx, sord); 
    var reports = _db.ReportSet 
        .OrderBy(orderBytext); 

    List stringList = new List(); 

    int counter = reports.Count(); 
    foreach (var report in reports) 
    { 
     var rowString = new 
     { 
      id = report.ID, 
      cell = new[] { 
        "", 
        report.ID.ToString(), 
        report.Title, 
        report.Post_Date.ToShortDateString(), 
        report.Start_Date.ToShortDateString(), 
        report.End_Date.ToString(), 
        report.Summary.ToString()} 
     }; 
     stringList.Add(rowString); 
    } 

    var rowsOut = new object[counter]; 
    for (int i = 0; i

ich habe später eine andere Methode für den Benutzer Spalten Auswahl zu reagieren, um die PredicateBuilder aus dem auf Dynamically Composing Expression Predicates Buch C# in a Nutshell der Abschnitt Albaharis diskutiert zu sortieren, zu verwenden. Ich habe meine Lösung dazu in einer Frage diskutiert, die ich auf MSDN unter PredicateBuilder fails on nested predicates with LINQ to Entities

Answer 4

Ich hatte das gleiche Problem, wo der JqGrid-Frame angezeigt wurde, aber die Zeilen nicht waren. Meine Lösung bestand darin, den folgenden Code hinzuzufügen.

**jsonData.JsonRequestBehavior = JsonRequestBehavior.AllowGet;** 
     return jsonData;