使用的jqGrid與Asp.Net Web窗體

Question

我在我的應用程序中使用Asp.Net/C#，我有我需要顯示在jqGrid .The數據的數據應該來自Users table.This是我第一次與jqGrid的要求，任何人都可以幫我開始jqGrid與Web Forms。任何例子或鏈接將不勝感激。 謝謝。

Answer 1

您可以在任何應用程序只包括尋呼機空表元素和空div在網格底部

<table id="grid" ></table> 
<div id="pager"></div> 

然後你包括

<script type="text/javascript"> 
$(function() { 
    $("#grid").jqGrid({ 
     url: 'someURLfromYourProject', // 'xxx.svc', 'xxx.asmx', 'xxx.ashx' ... 
     datatype: 'json', 
     pager: '#pager', 
     gridview: true, 
     height: 'auto', 
     //... other parameters 
    }); 
}); 
</script> 

這將在運行時的空表修改和網格中的div。網格中的數據將從url選項指定的URL中獲得。

重要的是要明白，您可以非常輕鬆地將WFC，ASMX Web服務或ASHX處理程序集成到您現有的應用程序的任意中。您只需添加新頁面（在ASP.NET項目的解決方案資源管理器中選擇「添加新項目」上下文菜單）到您的現有項目。通過這種方式，您將創建與主要用於ASP.NET應用程序的技術更獨立的代碼。如果您稍後決定將應用程序遷移到ASP.NET MVC，則甚至不能更改應用程序的WFC ASMX Web服務或ASHX處理程序部分。

在the answer你會發現一些帶演示項目的URL，你可以下載並播放一些內容。您可以將ASP.NET MVC示例中的大部分代碼（請參閱here和here）移動到您的WCF/ASMX/ASHX代碼。

Answer 2

請按照下面的鏈接。

http://blog.prabir.me/post/Using-jqGrid-with-ASPNET-Web-Forms-e28093-Part-I.aspx

http://forums.asp.net/t/1638413.aspx/1

http://wiki.asp.net/page.aspx/1774/jqgrid-and-aspnet-web-forms/

http://praveen1305.blogspot.co.uk/2009/05/jqgrid-with-asp-net-web-forms.html

Using jqGrid in ASP.NET WebForms

希望它可以幫助

Answer 3

jqGrid的例子： -

下載都來自鏈接http://www.trirand.com/blog/?page_id=6

需要Design.aspx 腳本文件，我已經在aspx頁面的主體部分定義的腳本。使用

蔭此網格只對搜索功能，所以我禁用了編輯和刪除功能

<script src="../JQGridReq/jquery-1.9.0.min.js"></script> 
    <script src="../JQGridReq/grid.locale-en.js"></script> 
    <link href="../JQGridReq/jquery-ui-1.9.2.custom.css" rel="stylesheet" /> 
    <script src="../JQGridReq/jquery.jqGrid.js"></script> 
    <link href="../JQGridReq/ui.jqgrid.css" rel="stylesheet" /> 
     <link href="../JQGridReq/themes/start/theme.css" rel="stylesheet" /> 

      <script type="text/javascript">   
     jQuery("#jQGridDemo").jqGrid({ 
      url: '../Handlers/JQGridHandler.ashx', 
      datatype: "json", 
      colNames: ['TableID', 'Region_ID', 'Region_Name', 'ActionDate', 'Field', 'OldValue', 'NewValue', 'TableName', 'Who','Comment'], 
      colModel: [ 
         { name: 'TableID', index: 'TableID', width: 50, stype: 'text' }, 
         { name: 'Region_ID', index: 'Region_ID', width: 50, stype: 'text', sortable: true, editable: false }, 
         { name: 'Region_Name', index: 'Region_Name', width: 100, editable: false }, 
         { name: 'ActionDate', index: 'ActionDate', width: 80, editable: false, formatter: "date" }, 
         { name: 'Field', index: 'Field', width: 100, align: "right", editable: false }, 
         { name: 'OldValue', index: 'OldValue', width: 100, align: "right", editable: false }, 
         { name: 'NewValue', index: 'NewValue', width: 100, align: "right", editable: false }, 
         { name: 'TableName', index: 'TableName', width: 100, sortable: true, editable: false }, 
         { name: 'Who', index: 'Who', width: 110, sortable: true, editable: false }, 
         { name: 'Comment', index: 'Comment', width: 110, sortable: true, editable: false } 
         ], 
      rowNum: 20, 
      mtype: 'GET', 
      loadonce: true, 
      rowList: [10, 20, 30,40,50], 
      pager: '#jQGridDemoPager', 
      sortname: 'TableID', 
      viewrecords: true, 
      sortorder: 'desc', 
      caption: "", 
      editurl: '../Handlers/JQGridHandler.ashx' 
     }); 

     $('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager', 
        { 
         //edit: true, 
         //add: true, 
         //del: true, 
         search: true, 
         searchtext: "Search" 
         //addtext: "Add", 
         //edittext: "Edit", 
         //deltext:"Delete" 
        }, 
        { //EDIT 
         //      height: 300, 
         //      width: 400, 
         //      top: 50, 
         //      left: 100, 
         //      dataheight: 280, 
         closeOnEscape: true,//Closes the popup on pressing escape key 
         reloadAfterSubmit: true, 
         drag: true, 
         afterSubmit: function (response, postdata) { 
          if (response.responseText == "") { 

           $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');//Reloads the grid after edit 
           return [true, ''] 
          } 
          else { 
           $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit 
           return [false, response.responseText]//Captures and displays the response text on th Edit window 
          } 
         }, 
         //editData: { 
         // EmpId: function() { 
         //  var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow'); 
         //  var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id'); 
         //  return value; 
         // } 
         //} 
        }, 
        { 
         closeAfterAdd: true,//Closes the add window after add 
         afterSubmit: function (response, postdata) { 
          if (response.responseText == "") { 

           $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add 
           return [true, ''] 
          } 
          else { 
           $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add 
           return [false, response.responseText] 
          } 
         } 
        }, 
        { //DELETE 
         closeOnEscape: true, 
         closeAfterDelete: true, 
         reloadAfterSubmit: true, 
         closeOnEscape: true, 
         drag: true, 
         afterSubmit: function (response, postdata) { 
          if (response.responseText == "") { 

           $("#jQGridDemo").trigger("reloadGrid", [{ current: true}]); 
           return [false, response.responseText] 
          } 
          else { 
           $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid') 
           return [true, response.responseText] 
          } 
         }, 
         //delData: { 
         // EmpId: function() { 
         //  var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow'); 
         //  var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id'); 
         //  return value; 
         // } 
         //} 
        }, 
        {//SEARCH 
         closeOnEscape: true 
        } 
      ); 


    </script> 

我創建通過右鍵通用處理器單擊該項目，並添加新項目作爲通用處理器，並將其命名作爲JQGridHandler.ashx，然後將其放在名爲Handlers的文件夾中以進行ajax調用。

JqGridHandler.ashx.cs： -

public class JQGridHandler : IHttpHandler 
    { 
     History myHistory = new History();  

     public void ProcessRequest(HttpContext context) 
     { 
      try {     
    List<HistoryDetails> myHistoryDetails = new List<HistoryDetails>(); 
      myHistoryDetails = myHistory.GetAllHistoryDetails(); 
      var jsonSerializer = new JavaScriptSerializer(); 
     context.Response.Write(jsonSerializer.Serialize(myHistoryDetails)); 
      } 
      catch(Exception ex) 
      { 

      } 
     } 

     public bool IsReusable 
     { 
      get 
      { 
       return false; 
      } 
     } 
    } 

History.aspx.cs： - 蔭創造了泛型類叫做HistoryDe​​tails擁有所有必需的屬性。蔭然後調用業務logic.GetallHistoryDe​​tails（），它會從數據庫中的記錄使用存儲過程

public List<HistoryDetails> GetAllHistoryDetails() 
     { 
      List<HistoryDetails> myHistoryDetails = new List<HistoryDetails>(); 
      try 
      { 
       myHistoryDetails = BusinessLogic.GetAllHistoryDetails(IdVal);     
      } 
      catch(Exception ex) 
      { 

      } 
      return myHistoryDetails; 
     } 

參考： - https://www.codeproject.com/Articles/609442/Using-JqGrid-in-ASP-NET