jQueryとASP.NET MVCクライアントビューをjQueryとLINQ-to-Entitiesで並べ替え

Question

私はjQueryのnoobですので、ここでは簡単なものがありません。

LINQとエンティティの操作からJSONデータを作成するアクションで動作するjqGridがあります。しかし、ブラウザの列ヘッダーをクリックすると、行はソートされません。昇順/降順のインジケーターが表示されますが、それ以外のことは起こりません。

必要なJavaScriptとCSSのリンクは、マスターページのヘッダーにあります。

 
// 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' 
});     

そして、ここではHTMLです：：

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

ここに私の初期化コードです

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

そして、完全性のために、アクションメソッド：

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

どのようなアイデアがここにないのですか？

Answer 1

これを処理する基本的な方法は2つあります。グリッドは、データ自体をソートすることができます。私はこのオプションを使用しないので、これを有効にする方法を覚えていません。一般に、ページに戻るには大きすぎるデータセットを扱うので、グリッドのページング機能を使用します。グリッドにはデータセット全体が表示されないため、サーバーでこのソートを行う必要があります。

サーバー上でページングを実行するには、アクションにsidxとsord（両方の文字列）引数を追加します。 sidxは並べ替える列の名前になります。 sordはasc、descの方向になります。

私はこれを行う方法を示すa demo projectです（LINQ to Objectsを使用しています）。しかし、LINQ to Entitiesはほとんど同じです。私はLINQ to Entitiesをプロダクション/非デモコードで使用しています。デモソリューションをダウンロードして自分自身を探しましょう。

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; 

おかげ Anujパンディ

www.anuj.co.in彼私は考え出したときに彼が...私はプログラミング:)

Answer 3

OK知っているこの平均値は、私はこれを掲載している必要がありますんしかし、私は他の仕事に巻き込まれてしまった。ここでは、LINQ to Entitiesで動作し、レポートエンティティ用に実装されたことがあります。 まず、（私が見逃していたものを考え出したら）、デフォルトの検索でjqGridをロードするためのコードは簡単だった：デフォルトの検索セットをロードする

$(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 
    ); 
}); 

方法の全体集合の最初のページを返します。利用可能なレポートは：

 
/// 
/// 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

は、私は後でDynamically Composing Expression Predicatesに一言のセクションでAlbaharis'ブックのC＃から議論PredicateBuilderを使用して、ソートする列を選択するユーザーに対応するために、別の方法を追加しました。私は私の解決策について、MSDNで始めた質問で答えました。PredicateBuilder fails on nested predicates with LINQ to Entities

Answer 4

jqGridフレームが表示されていたのと同じ問題がありましたが、行がありませんでした。 私のソリューションは、次のコードを追加することでした。

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