passing data from jqGrid to webmethod

Question

This is my jqGrid calling web method

$(document).ready(function () {
    jQuery(\"#prodgrid\").jqGrid({
        url: \'product_brow.aspx/ProdGrid\',
                 


        

Answer 1

I recommend you to use ASMX or WCF web service. In the case many things like JSON serialization and deserialization will be made automatically for you. You should just return an object from the web method.

In general WCF RESTfull service has advantages in comparing with ASMX web service, but if you are a beginner you can more easy add ASMX web service to your existing project so that all changes of web.config will made Visual Studio for you.

To add ASMX web service to your existing ASP.NET project you should do following steps. You select your current project in the Solution Explorer (typically on the right side in the Visual Studio) and type Ctrl+Shift+A (or click right mouse button and choose "Add" and the "New Item…") you should choose "Web" template on the left side and then "Web Service". You can change the filename on the bottom from default WebService1.asmx to any what you want. For example ProdData.asmx. In the ProdData.asmx.cs file you should uncomment the line with [ScriptService] attribute. You can additionally insert using System.Web.Script.Services; at the beginning of the file. Now you can change the code of "Hello world" web method to what you need. For example to

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

namespace TestWebApplicationWithjqGrid
{
    public class GridRow {
        public string id { get; set; }
        public List<string> cell { get; set; }
    }
    public class GridData {
        public int page { get; set; }
        public int total { get; set; }
        public int records { get; set; }
        public List<GridRow> rows { get; set; }
    }
    [WebService (Namespace = "http://tempuri.org/")]
    [WebServiceBinding (ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem (false)]
    [ScriptService]
    public class ProdData: WebService
    {
        [WebMethod]
        public GridData ProdDetails(string sidx, string sord, int page, int rows,
                                    string ddlproductstatus, string ddlproducttype, string txtkeywordsearch, int hdnMerchantId) {
            return new GridData {page = 1, total = 1, records = 2, rows = new List<GridRow> {
                new GridRow {id = "i1", cell = new List<string> {"Code1", "Title1", "Price1", "Group1", "Edit1", "Status1"}},
                new GridRow {id = "i2", cell = new List<string> {"Code2", "Title2", "Price2", "Group2", "Edit2", "Status2"}}
            }};
        }
    }
}

You should of course has more complex implementation of the ProdDetails web method. The answer gives you examples. See additionally this answer for more links with code examples.

To call the web method from the JavaScript you should modify you jqGrid a little. You should include the following additional parameters

datatype: 'json',
ajaxGridOptions: { contentType: "application/json"},
serializeGridData: function (postData) {
    var propertyName, propertyValue, dataToSend = {};
    for (propertyName in postData) {
        if (postData.hasOwnProperty(propertyName)) {
            propertyValue = postData[propertyName];
            if ($.isFunction(propertyValue)) {
                dataToSend[propertyName] = propertyValue();
            } else {
                dataToSend[propertyName] = propertyValue
            }
        }
    }
    return JSON.stringify(dataToSend);
},
jsonReader: {
    root: "d.rows",
    page: "d.page",
    total: "d.total",
    records: "d.records"
}

The code of serializeGridData I get from my previous answer. It is more complex as just

serializeGridData: function (postData) { return JSON.stringify(postData); }

used in the most cases because you use functions inside of postData.

Here you can download VS2010 .NET 3.5 working project with the corresponding code.