将jqGrid与Asp.Net Web窗体一起使用

Question

I am using Asp.Net/C# in my application ,I have a requirement where I need to show data in a jqGrid .The data should come from a Users table.This is my first time with jqGrid , can anybody help me out to start with jqGrid with Web Forms .Any examples or links would be much appreciated . Thanks.

Answer 1

Please follow the links below.

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

Hope it helps

Answer 2

You can include in any application just an empty table element and empty div for the pager at the bottom of the grid

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

Then you includes

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

which will modify at the runtime the empty table and div in the grid. The data fir the grid will be get from the URL specified by url option.

It's important to understand that you can very easy integrate WFC, ASMX web service or ASHX handler in any your existing application. You need just add new page (choose "Add new Item" context menu in the Solution Explorer of your ASP.NET project) to your existing project. In the way you will create the code which are more independent from the technology used mainly in your ASP.NET application. If you decide later to migrate the application to ASP.NET MVC you can even not change the WFC ASMX web service or ASHX handler part of the application.

In the answer you will find some URLs with demo projects which you can download and play a little. You can move the most code from the ASP.NET MVC example (see here and here ) to your WCF/ASMX/ASHX code.

Answer 3

JQGRID example:-

Download all the script files needed from the link http://www.trirand.com/blog/?page_id=6

Design.aspx i have defined the script in the body section of the aspx page.

Iam using this grid only for search functionality, So i have disabled the edit and delete functionality

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

I have created a generic handler by right clicking the project and add new item as Generic Handler and named it as JQGridHandler.ashx and then placed it in a folder named Handlers for making the ajax calls.

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:- Iam creating a generic class called HistoryDetails which has all the required properties . Iam then calling the business logic.GetallHistoryDetails() which gets the records from the database using stored procedure

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

            }
            return myHistoryDetails;
        } 

References:- https://www.codeproject.com/Articles/609442/Using-JqGrid-in-ASP-NET