Clever Geek Handbook

JqGrid binding issue in ASP.NET

I am new to using jqGrid and jquery. I am unable to bind my json data which I am retrieving from the web method on jqGrid.

I also used firebug for cross validation and I am getting data from it. Some help on this would be great. I would also like to know if other links need to be added.

Below is the code I followed.

PAGE METHOD

[WebMethod]
public static string GetData()
{
    Customer Cone = new Customer();
    Customer Ctwo = new Customer();
    Cone.CustomerID = "100";
    Cone.CustomerName = "abc";
    Ctwo.CustomerID = "101";
    Ctwo.CustomerName = "xyz";
    List<Customer> lstCustomer = new List<Customer>();
    lstCustomer.Add(Ctwo);
    lstCustomer.Add(Cone);
    JavaScriptSerializer jsonSerz = new JavaScriptSerializer();
    string serializedData = jsonSerz.Serialize(lstCustomer);
    return serializedData; 
}

client coding

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.jqGrid.min.js"></script>
<script type="text/javascript">
    function GetData() {
        alert('Inside GetData');
        var data = PageMethods.GetData(OnSuccess, OnFailed);
    }
    function OnFailed(error) {
        alert('Failed');
        alert(error.get_message());
    }
    function OnSuccess(data) {
            alert(data);
    }
    $(document).ready(function() {
        $('#submit').click(function() {
            alert('Button Clicked');
            $('#list').jqGrid({
                url: 'http://localhost:1405/WebSite1/Default.aspx/GetData',
                data: '{}',  // For empty input data use "{}",
                dataType: 'local',
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                colNames: ['CustomerID', 'CustomerName'],
                colModel: [
                    { name: 'CustomerID', index: 'CustomerID', width: 80,
                      align: 'left', editable: false },
                    { name: 'CustomerName', index: 'CustomerName', width: 120,
                      align: 'left', editable: true}],
                pager: $('#pager'),
                rowNum: 5,
                rowList: [10],
                sortname: 'CustomerID',
                sortorder: 'desc',
                viewrecords: true,
                width: 300
            });
        });
    });
</script>

And the HTML code

<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">
</asp:ScriptManager>
<input type="button" id="submit" value="Fetch" title="Fetch"
       onclick="javascript:GetData()" />
<table id="list">
</table>
<div id="pager">   
</div>
0


source to share


2 answers


First of all, I recommend you play around a bit with the other working code that you can download here (see more information here ). You can find additional links to other examples here .

I am trying to describe some of the problems in your current code.



  • You are using ' http: // localhost: 1405 / WebSite1 / Default.aspx / GetData ' as url. You are better off using only patches like "/WebSite1/Default.aspx/GetData" or "WebSite1 / Default.aspx / GetData", or you can easily get the same policy origin .
  • You should be using the ASMX service instead of putting the code inside the ASPX page (Default.aspx / GetData). You should simply add a new item to your ASP.NET solution and select the WebSeries template. The appropriate code template will be added for you and the web.config will be modified. Similarly, you can host a WCF service inside your ASP.NET project. This step is independent of the technology you are using (WebForms, ASP.NET MVC, etc.).
  • Instead of manually serializing JSON on the relation, JavaScriptSerializer

    you should define an [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

    attriute for your method and return an object from the web method ( List<Customer>

    in your case , for example ). JSON serialization will be done automatically for you.
  • You are using dataType: 'local'

    which is the wrong parameter for jqGrid. The correct parameter would be datatype:'json'

    ( datatype

    instead of datatype

    and 'json' to make a request to the server).
  • type: 'POST'

    You should use mtype: 'POST' instead .
  • Instead, contentType: "application/json; charset=utf-8"

    you should use ajaxGridOptions: { contentType: "application/json" }

    .
  • The usage is data: '{}'

    also incorrect. You are probably trying to use data

    jQuery.ajax as parameter datatype

    . In jqGrid, you should use pastData

    instead data

    and the parameter data

    should be an array and have a different value. I recommend you look at the example code (see the link at the beginning of my answer).
  • Cannot be placed $('#list').jqGrid({...});

    inside a descriptor click

    . The problem is the code is doing some jqgrid initialization and then filling the grid. What you want is to create the mesh only once and then update it with other probaby inputs (I'm not sure if this is the case). Therefore you have to move $('#list').jqGrid({...});

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

    . You can use $('#list').trigger("reloadGrid")

    events inside the handle if needed click

    . Alternatively, you can use GridUnload to destroy the existing grid before creating it.

I can go on, but my main recommendation is to look at other examples and use the ASMX or WCF service that provides data for the jqGrid.

+4


source


The integer grid binding event is called before your page method. You put it in document.Ready file. Try to call it from the button click event.

I'm not sure, but there must be some way to bind the json data to the client side Jquery grid without using a url.



try matching "data:" with some Json value.

0


source






More articles:


All Articles