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

Question

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.

stackoverflow.com/questions/25304099/…

Subhra Sankha Saha
– Subhra Sankha Saha

2014-11-05 10:16:12 +00:00
Commented Nov 5, 2014 at 10:16 — Subhra Sankha Saha
– Subhra Sankha Saha, Commented Nov 5, 2014 at 10:16

Rakesh Jena · Accepted Answer · 2014-02-28 07:20:11Z

2

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");
             }
         });
     }

edited Feb 28, 2014 at 7:20

answered Feb 28, 2014 at 7:14

Rakesh Jena

1591 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

GaneshM Over a year ago

Thanks Rakesh I will try this and let you know.But What's the reason my code is not working?

GaneshM Over a year ago

Yes I am getting or I can alert that data through ajax call.

GaneshM Over a year ago

:But is it not possible to call that [WebMethod] through jqgrid url attribute.

Rakesh Jena Over a year ago

Calling [WebMethod] through jqgrid is possible. This is a best practice to use ajax call to populate jqgrid, because there is no chance of data lose and you can inspect what data is coming from backend.

GaneshM Over a year ago

ok thanks Rakesh, I will trace code further.Thanks for giving your valuable time.

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related