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',
        postData: {
            ddlproductstatus: function() {
                return  $("#<%=ddlProductStatus.ClientID%>").val();
            },
            ddlproducttype: function() {
                return  $("#<%=ddlProductType.ClientID%>").val();
            }, 
            txtkeywordsearch: function() {
                return  $("#<%=txtKeywordSearch.ClientID%>").val();
            },
            hdnMerchantId: function() {
                return  $("#<%=hdnmerchantId.ClientID%>").val();
            }
        },
        mtype: 'POST',
        serializeEditData: function (postData) {
            return JSON.stringify(postData);
        } ,
        colNames: ['Code', 'Title', 'Price', 'Product Group', 'Edit', 'Status'],
        colModel: [
            { name: 'Code', index: 'Code', width: 15, align: 'center' },
            { name: 'Title', index: 'Title', width: 40, align: 'center' },
            { name: 'Price', index: 'Price', width: 55 },
            { name: 'Product Group', index: 'Product Group', width: 55 },
            { name: 'Edit', index: 'Edit', width: 40 },
            { name: 'Status', index: 'Status', width: 40}],
        pager: '#prod_pager',
        rowList: [10, 20, 30],
        sortname: 'Code',
        sortorder: 'desc',
        rowNum: 10,
        loadtext: "Loading....",
        shrinkToFit: true,
        multiselect: true,
        emptyrecords: "No records to view",
        width: x - 40,
        height: 230,
        rownumbers: true,
        subGrid: true,
        caption: 'Products'
        // editurl: 'Departments.aspx' 
    });
    jQuery("#prodgrid").jqGrid('navGrid', '#prod_pager',
        { edit: false, add: false, del: true, excel: true, search: false });
});

as you can see im trying to pass data from here to web method with parameters like this

[WebMethod]
public static string ProdDetails(string ddlproductstatus,
                                 string ddlproducttype,
                                 string txtkeywordsearch,
                                 string hdnMerchantId)
{
    StringBuilder sbReturnJson = new StringBuilder();
    string strReturnJson = string.Empty;
    StringBuilder sbCell = new StringBuilder();

    try
    {
        string sort = HttpContext.Current.Request.Form["sidx"].ToString();
        string strSortDerection = HttpContext.Current.Request.Form["sord"].ToString();
        int iPage = Convert.ToInt32(HttpContext.Current.Request.Form["page"]);//get the requested page
        string strLimit = HttpContext.Current.Request.Form["rows"].ToString(); // get how many rows we want to have into the grid
        string strStart = Convert.ToString(int.Parse(strLimit) * (iPage - 1));
        string strEnd = Convert.ToString(int.Parse(strStart) + int.Parse(strLimit));

        string pageNo = string.Empty;
        ProductDal oProductDal = new ProductDal();

        // bind data to gridview

        System.Data.DataTable oDataTable;

        if (txtkeywordsearch.Trim().Length == 0)
        {
            oDataTable = oProductDal.GetAllProductDtToDisplayTest(Convert.ToInt32(hdnMerchantId), ddlproducttype,
                ddlproductstatus, iPage, Convert.ToInt32(strLimit));
        }
        else
        {
            oDataTable = oProductDal.GetAllProductDtToDisplayBySearchStringTest(Convert.ToInt32(hdnMerchantId), ddlproducttype,
              ddlproductstatus, txtkeywordsearch.Trim(), iPage, Convert.ToInt32(strLimit));
        }

        // keep values in session to use in product detail page to retrieve records.
        //Session["ProductType"] = ddlproducttype;
      //  Session["ProductStatus"] = ddlproductstatus;

        if (txtkeywordsearch.Trim().Length != 0)
        {
           // Session["SearchKeyword"] = txtkeywordsearch;
        }


        //  hlnkExportToExcel.Visible = false;

        // calculate the total number of records.
        int totalRows = 0;

        if (txtkeywordsearch.Trim().Length == 0)
        {
            totalRows = oProductDal.CountAllProductDtToDisplay(Convert.ToInt32(hdnMerchantId), ddlproducttype,
                    ddlproductstatus);
        }

        else
        {
            totalRows = oProductDal.CountAllProductDtToDisplayBySearchString(Convert.ToInt32(hdnMerchantId), ddlproducttype,
                    ddlproductstatus, txtkeywordsearch.Trim());
        }

        //if (!IsPostBack)
        //{
        //    gvProductBrow.PageIndex = _currentPageNumber;
        //}


        var count = oDataTable.Rows.Count;

        sbReturnJson.Append("{\"page\":\"" + iPage + "\",\"records\":\"" + count + "\",\"rows\":[");
        foreach (DataRow row in oDataTable.Rows)
        {
            // int depid = Convert.ToInt32(row[1].ToString());
            // var Editbutton = "<img Class='GridEdit' onclick='showjQueryDialog(" + depid + ");' src='Images/edit.jpeg'></img>";
            //<a href='#' Class='GridEdit' onclick='showjQueryDialog(" + depid + ");'>Edit</a>
            string code = (row[1].ToString());
            string title = (row[4].ToString());
            string price = (row[7].ToString());
            string product_group = (row[5].ToString());
            string edit = (row[0].ToString());
            string status = (row[2].ToString());

            sbCell.Append("{\"cell\":[\"" + code + "\",\"" + title + "\",\"" + price + "\",\"" + product_group + "\",\"" + edit + "\",\"" + status + "\"]}");
            sbCell.Append(",");
        }

       // lblNoOfRows.Text = totalRows + " record(s) found";

        sbReturnJson.Append(sbCell.ToString().TrimEnd(','));
        double dCount = Math.Ceiling(Convert.ToDouble(count / int.Parse(strLimit)));
        int iCount = int.Parse(dCount.ToString()) + 1;
        sbReturnJson.Append("],\"total\":\"" + iCount + "\"}");

        //lblTopPageNo.Text = (gvProductBrow.PageIndex + 1) + "/" + CalculateTotalPages(totalRows);
        //lblBottomPageNo.Text = (gvProductBrow.PageIndex + 1) + "/" + CalculateTotalPages(totalRows);
        //ViewState["NoOfPages"] = CalculateTotalPages(totalRows);

    }
    catch (Exception ex)
    {
        ExceptionLogger.LogException(ex);
        //lblErrorMessage.Text += Resources.Resource.Product_errMsgLoadProduct;
        return "Error";
    }
    return sbReturnJson.ToString();  
}

my web method is expecting 4 parameters which i am trying to pass using postData but since i am a newbi i dont know how to post data to tht web method from my jqGrid. Need help got stuck with this for around 5 hrs

can you also help with sending the page,sidx,sort from jqgrid to web method

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.