使用的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