How to hit JQGrid url in asp.net web form?

Question

I am new in asp.net web form and i am unable to hit the url. Jqgrid is showing but the url to get data is not hitting. This is my aspx content named as emplosyee_list.aspx.

<%@ Page Title="" Language="C#" MasterPageFile="~/main.Master" AutoEventWireup="true" CodeBehind="employee_list.aspx.cs" Inherits="CollegeManagementSystem.employee_list" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Content" runat="server">
      <div id="page-wrapper">
           <a href="employee_details.aspx" class="btn btn-default">Back</a>

            <div class="container-fluid">
               <div class="col-lg-5">

                       <div>
                           <span class="headerFont">Employee List</span>
                           <hr class="lining"/>
                       </div>


               </div>

            </div>

     </div>

    <div >
        <table id="grid">

        </table>
    </div>
    <link href="../Content/Site.css" rel="stylesheet" />
    <link href="../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
    <link href="../Content/StyleSheet1.css" rel="stylesheet" />
    <script src="../Scripts/jquery-1.9.1.js"></script>
    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <script src="../Scripts/jquery.jqGrid.js"></script>
    <script src="../Scripts/jquery.jqGrid.min.js"></script>
    <script src="../Scripts/employeeJquery.js"></script>

</asp:Content>

This is my employee_list.aspx.cs

{
    public partial class employee_list : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public string GetList()
        {

            var list = GetDataFromDB();
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            return serializer.Serialize(list);

        }


        public static List<Dictionary<string, object>> GetDataFromDB()
        {
            DataTable dt = new DataTable();
            using (SqlConnection con = new SqlConnection(@"Data Source=.;Initial Catalog='College Management System';Integrated Security=True"))
            {
                using (SqlCommand cmd = new SqlCommand("SELECT username, name, DOB, date, gender,address,mobile,phone,email FROM employee_details ORDER BY username", con))
                {
                    con.Open();
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(dt);

                    JavaScriptSerializer serializer = new JavaScriptSerializer();
                    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
                    Dictionary<string, object> row;
                    foreach (DataRow dr in dt.Rows)
                    {
                        row = new Dictionary<string, object>();
                        foreach (DataColumn col in dt.Columns)
                        {
                            row.Add(col.ColumnName, dr[col]);
                        }
                        rows.Add(row);
                    }
                    return rows;
                }

            }
        }
    }
}

And this is my Jqgrid code

 $("#grid").jqGrid({
                url: '/Admin/employee_list.aspx/GetList',
                datatype: "json",
                colNames: ['User', 'Name', 'DOB', 'Date',
                        'Gender', 'Address', "Mobile", 'Phone', 'Email', ],
                colModel: [
                { name: 'User', index: 'User', width: 50, stype: 'text' },
                { name: 'Name', index: 'Name', width: 150 },
                   { name: 'DOB', index: 'DOB', width: 100 },
                { name: 'Date', index: 'Date', width: 80, align: "right" },
                { name: 'Gender', index: 'Gender', width: 80, align: "right" },
                { name: 'Address', index: 'Address', width: 80, align: "right" },
                { name: 'Mobile', index: 'Mobile', width: 150, sortable: false },
                { name: 'Phone', index: 'Phone', width: 100, sortable: false },
                { name: 'Email', index: 'Email', width: 150, sortable: false }

                ],
                pager: { enable: true, limit: 5, sizes: [2, 5, 10, 20] },
                rowNum: 10,
                rowList: [10, 20, 30],
                sortname: 'id',
                viewrecords: true,
                pager :'#gridpager',
                sortorder: "desc",
                edit: true,
                add: true,
                del: true,
                search: true,
                searchtext: "Search",
                addtext: "Add",
                edittext: "Edit",
                deltext: "Delete",
                caption: "List Employee Details"
            });

The url is not hiting and there is no error on consoleWhat is the problem

Answer 1

I see the following errors in your code:

• you should include jQuery UI CSS on the HTML page. You can use for example <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" />
• you can't include both minimized and non-minimized versions on the same page. So you should remove, for example, the references to non-minimized files jquery-1.9.1.js and jquery.jqGrid.js.
• you should include the reference to i18n/grid.locale-en.js (or other locale file) before jquery.jqGrid.min.js.
• You should remove from GetList() the line JavaScriptSerializer serializer = new JavaScriptSerializer(); and the call of serializer.Serialize. Instead of that the WebMethod should return object. The dot net framework will serialize the object to JSON or XML based on the contentType of HTTP request. The code of GetList method could look like

[WebMethod]
public object GetList()
{
    return GetDataFromDB();
}

• you should include in the option of jqGrid the following:

mtype: 'POST',
ajaxGridOptions: { contentType: "application/json" },
loadonce: true,
jsonReader: {
    root: function (obj) {
        // after the fix of WebMethod the next line
        // can be reduced to
        //     return obj.d;
        return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d;
    },
    repeatitems: false
},
serializeGridData: function(postData) {
    return JSON.stringify(postData);
},
height: "auto",
gridview: true

Moreover the value of pager parameter seems be wrong. You don't wrote which version of jqGrid you use and which fork (). I don't know specific options of Guriddo jqGrid JS, but in case of usage free jqGrid or old jqGrid in version <= 4.7, the pager parameter have wrong value.

I recommend you to remove all index properties from colModel.