0

What i want to do is, i have a web service which returns number of products (from sample Northwind database) in json format and i want to bind returned row to my jqGrid. I tried JQGrid - Cannot call ASP.NET WebMethod but can with Ajax but it didn't work for me with web service.

Then just for a trial I wrote [Web Method] in same aspx page on which i am creating jqGrid then it did work for mtype:"POST". Below is my code.

Working Code Without Web Service

Code in ASPX:

<script language="javascript" type="text/javascript">
        $(function () {
            jQuery("#jqGridXML").jqGrid({
                url: "jqGridXML.aspx/GetProducts",
                mtype: "POST",
                ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
                datatype: "json",
                serializeGridData: function (postData) {
                    return JSON.stringify(postData);
                },
                jsonReader: {
                root: function (obj) { return obj.d;},
                page:function (obj) {return 1;},
                total: function (obj) {return 1;},
                records:function (obj) { return obj.d.length;},
                id:"0",
                cell:"",
                repeatitems:false
            },
            datatype:"json",
            height:250,
            colName:['ProductId','ProductName','UnitsInStock'],
            colModel:[{name:'ProductId',index:'ProductId',width:100},
            {name:'ProductName',width:100},
            {name:'UnitsInStock',width:100}],
            caption:"Products"
        });
    });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table id="jqGridXML"></table>
    <div id="pagerXML"></div>
    </form>
</body>

Code in .cs file

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<Products> GetProducts()
{
    Products product = new Products();
    return product.GetProducts();
}

This is working but if i do not want to write web method in the form. I have added web reference to my application and want to use data from web service. I tried below in jqGrid but did not help me.

$(function () {
    jQuery("#jqGridXML").jqGrid({
        url: "http://localhost:49493/jqGrid_HttpHandlers/WebService.asmx/GetProducts",
        mtype: "POST",

Rest part is same.

Code in Web Service

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using System.Collections.Generic;
using System.Collections.ObjectModel;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
// [System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{

    public WebService()
    {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
    [ScriptMethod(ResponseFormat=ResponseFormat.Json)]
    public static List<Products> GetProducts()
    {
        Products product =  new Products();
        return product.GetProducts();
    }


}

Could you please help me to understand things. I just started working on jqGrid.

Your help is really appreciated.

EDIT 

Yes you are correct Dave. I only uncommented below statement and removed static and ran the project without any modification and it did work perfectly. 

[System.Web.Script.Services.ScriptService]  
public class WebService : System.Web.Services.WebService

Thanks, but my next doubt, how can i use jqGrids navigator functionality, like Paging, Sorting those things with the same code.  I have used this,   

jsonReader: { 
                root: function (obj) { return obj.d;}, 
                page:function (obj) {return 1;}, 
                total: function (obj) {return 1;}, 
                records:function (obj) { return obj.d.length;}, 
                id:"0", 

  but I really do not have idea where exactly this need to be used in my code. Could you please redirect me to correct solution. 

Community
  • 1
  • 1
Parag
  • 1
  • 1
  • What is the output at http://localhost:49493/jqGrid_HttpHandlers/WebService.asmx/GetProducts ? – Mark Eirich Jun 30 '12 at 19:42
  • Try to search for your solution in given below link. http://stackoverflow.com/questions/3161302/jqgrid-page-1-of-x-pager/3161542#3161542 –  Jul 02 '12 at 07:11
  • Parag, refer the following link http://stackoverflow.com/questions/3161302/jqgrid-page-1-of-x-pager/3161542#3161542 It has given solution for paging. –  Jul 02 '12 at 08:31
  • Refer the folliowing link http://stackoverflow.com/questions/3161302/jqgrid-page-1-of-x-pager/3161542#3161542 –  Jul 02 '12 at 09:09

1 Answers1

0

You need to uncomment the [ScriptService] attribute (and most of the other decorations are unnecessary). Also, the method cannot be static. That's only necessary when you declare the methods in ASPX code behind.

So, something like this:

[WebService]
[ScriptService]
public class WebService : System.Web.Services.WebService
{
  [WebMethod]
  public List<Products> GetProducts()
  {
    Products product =  new Products();
    return product.GetProducts();
  }
}
Dave Ward
  • 59,815
  • 13
  • 117
  • 134
  • Yes you are correct Dave. I only uncommented [System.Web.Script.Services.ScriptService] statement and ran the project without any modification and it did work perfectly. how can i use jqGrids navigator functionality, like Paging, Sorting those things with the same code. I have used this, jsonReader: { root: function (obj) { return obj.d;}, page:function (obj) {return 1;}, total: function (obj) {return 1;},records:function (obj) { return obj.d.length;}, id:"0". But i really do not have idea where exactly this need to be used in my code. Could you please redirect me to correct solution. – Parag Jun 30 '12 at 21:18
  • I'm not sure. I don't use jqGrid myself. That would probably make more sense as a separate question now that you have the service working (I'd guess that's probably been asked here before, if you search). – Dave Ward Jun 30 '12 at 21:25
  • @Parag, I added your edit to your question, which you're able to edit. You can always leave a comment to an answerer, as I am here, to say that you've updated your question. – Ben Jun 30 '12 at 21:46