Jqgrid with asp.net [WebMethod] inside aspx page Issue

GaneshM Published at Dev

GaneshM

Method resides inside Aspx page:

$("#list").jqGrid({
            url: 'DirStructure.aspx/getData',            //Not able get any data from here saw in firebug reponse is page itself instead of JSON data.            
            datatype: 'json',
            mtype: 'POST',
            colNames: ['pkLanguageID', 'Language'],
            colModel: [
            { name: 'pkLanguageID', index: 'pkLanguageID', width: 30, align: 'left', stype: 'text', editable: false },
            { name: 'Language', index: 'Language', width: 80, align: 'left', stype: 'text', editable: true}],
            rowNum: 5,
            rowList: [10, 20, 30],
            pager: '#pager',
            sortname: 'pkLanguageID',
            sortorder: 'desc',
            caption: "Test Grid",                        
            viewrecords: true,
            async: false,
            loadonce: true,
            gridview: true,
            width: 500,
            loadComplete: function (result) {
                alert(jQuery("#list").jqGrid('getGridParam', 'records'));                
            },
            loadError: function (xhr) {
                alert("The Status code:" + xhr.status + " Message:" + xhr.statusText);
            }
        });

Method resides inside DirStructure.aspx(Written WebMethod):

 [WebMethod]
            [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
            public static string getData()
            {
                System.Web.Script.Serialization.JavaScriptSerializer serializer = new

                System.Web.Script.Serialization.JavaScriptSerializer();

                DataSet dsLang = new DataSet();
                dsLang = CommonCode.CommonCode.GetIndividualLanguageList(7, 350027);
                System.Diagnostics.Debug.Write(dsLang.GetXml());// Dataset for languages.
                DataTable dt = dsLang.Tables[0];

                System.Diagnostics.Debug.Write(GetJson(dt));
                return GetJson(dt);            
            }

            public static string GetJson(DataTable dt)
            {
                System.Web.Script.Serialization.JavaScriptSerializer serializer = new

                System.Web.Script.Serialization.JavaScriptSerializer();
                List<Dictionary<string, object>> rows =
                  new List<Dictionary<string, object>>();
                Dictionary<string, object> row = null;

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

I degugged this I am able to get JSON data here inside method but not able to view in jqgrid. Please help me out.

Rakesh Jena

Try getting data through AJAX call then populate to the grid.

Try this :-

In Code Behind For dummy data :-

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string getData()
{
    string data = GetJson();
    return data;
}

public static string GetJson()
{
    List<LanguageData> dataList = new List<LanguageData>();

    LanguageData data1 = new LanguageData();
    data1.pkLanguageID = 1;
    data1.Language = "Language1";
    dataList.Add(data1);

    LanguageData data2 = new LanguageData();
    data2.pkLanguageID = 2;
    data2.Language = "Language2";
    dataList.Add(data2);

    System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();

    return js.Serialize(dataList);
}

public class LanguageData
    {
        public int pkLanguageID { get; set; }

        public string Language { get; set; }
    }

In aspx page :-

$(document).ready(function () {
         GetData();
     });

     function GetData() {
         $.ajax({
             type: "POST",
             url: "../DirStructure.aspx/getData",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             //async: false,
             success: function (response) {
                 var item = $.parseJSON(response.d);
                 if (item != null && item != "" && typeof (item) != 'undefined') {

                     $("#list").jqGrid({
                         url: '../Contact.aspx/getData',
                         data: item,
                         datatype: 'local',
                         colNames: ['pkLanguageID', 'Language'],
                         colModel: [
                         { name: 'pkLanguageID', index: 'pkLanguageID', width: 30, align: 'left', stype: 'text', editable: false },
                         { name: 'Language', index: 'Language', width: 80, align: 'left', stype: 'text', editable: true }],
                         rowNum: 5,
                         rowList: [10, 20, 30],
                         pager: '#pager',
                         sortname: 'pkLanguageID',
                         sortorder: 'desc',
                         caption: "Test Grid",
                         viewrecords: true,
                         async: false,
                         loadonce: true,
                         gridview: true,
                         width: 500,
                         loadComplete: function (result) {
                             alert(jQuery("#list").jqGrid('getGridParam', 'records'));
                         },
                         loadError: function (xhr) {
                             alert("The Status code:" + xhr.status + " Message:" + xhr.statusText);//Getting reponse 200 ok
                         }
                     });


                 }
                 else {
                     var result = '<tr align="left"><td>' + "No Record" + '</td></tr>';
                     $('#list').empty().append(result);
                 }
             },
             error: function (XMLHttpRequest, textStatus, errorThrown) {
                 alert("error");
             }
         });
     }

Collected from the Internet

Please contact [email protected] to delete if infringement.