getting data from asp.net page's web method or web service

[Pwavel]

i want to use the following

  var dataModel = {
                    location: "remote",
                    sorting: "remote",
                    paging: "remote",
                    dataType: "JSON",
                    method: "GET",
                    curPage: 1,
                    rPP: 20,
                    sortIndx: 0,
                    sortDir: "up",
                    getUrl: function () {
                        var sortDir = (this.sortDir == "up") ? "asc" : "desc";
                        var sort = ['ACVRNO', 'ACSLNO', 'CODEDR', 'CODECR', 'AMOUNT', 'VRDATE'];
                        return {
                            url: "jquerygrid.aspx/GetCustomers", data: "cur_page=" + this.curPage + "&records_per_page=" +
                                this.rPP + "&sortBy=" + sort[this.sortIndx] + "&dir=" + sortDir
                        };
                    },
                    getData: function (dataJSON) {
                        return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data };
                    }
                }

 var grid1 = $("#grid_parts").pqGrid({
                    width: 900, height: 350,
                    dataModel: dataJSON,
                    colModel: colM,
                    resizable: true,
                    columnBorders: true,
                    freezeCols: 2
                });

i m not able to get data from the page jquerygrid.aspx which has GetCustomers webmethod which returns data that i want to display in grid.How to call this method and get the data that i want?

[paramvir]

Please also share your colModel. Your code has one error. dataModel should be assigned to dataModel key.

Code: [Select]

var grid1 = $("#grid_parts").pqGrid({
                    width: 900, height: 350,
                    dataModel: dataJSON, // it should be dataModel instead of dataJSON
                    colModel: colM,
                    resizable: true,
                    columnBorders: true,
                    freezeCols: 2
                });


1) WebMethod should be static.

2) you need to set content-type of request to "application/json; charset=utf-8"

[Pwavel]

my colM is
var colM = [{ title: "ACVRNO", width: 190, dataType: "string", dataIndx: "ACVRNO" },
                { title: "ACSLNO", width: 160, dataType: "string", dataIndx: "ACSLNO" },
                { title: "CODEDR", width: 160, dataType: "string", dataIndx: "CODEDR" },
                { title: "CODECR", width: 160, dataType: "string", dataIndx: "CODECR" },
                { title: "AMOUNT", width: 160, dataType: "float", dataIndx: "AMOUNT" },
                { title: "VRDATE", width: 160, dataIndx: "VRDATE" }];
I have changed from datajson to datamodel but its still not able to get data from function .Help Me...

[paramvir]

Client Side corrections:
===================
Since dataIndx are strings in your colModel, you have to keep it consistent.

1) dataModel.sortIndx should be string.

2) Instead of sort[this.sortIndx], it should be this.sortIndx inside getUrl callback.

Server side:
======================
1) WebMethod should be static.

2) you need to set content-type of request to "application/json; charset=utf-8"

Take help from this post to set content-type
http://paramquery.com/forum/index.php?topic=326

[Pwavel]

i tried
dataModel = {
 location: "remote",
 method: "POST",           
 getUrl: function () {
             
                var getObj = {
                    url: "jquerygrid.aspx/GetCustomers",
                    data: data
                };
                return getObj;
            },
            getData: function (dataJSON) {                               
                return { curPage: dataJSON.SelectedPage, totalRecords: dataJSON.TotalRecord, data: dataJSON.data };
            }
        };
and also this
 dataModel: {
                        beforeSend: function (jqXHR, settings) {
                            jqXHR.setRequestHeader("Content-Type", "application/json");
                        }
                    }
my web method is as follows
        [System.Web.Services.WebMethod]
        [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
         public static string GetCustomers()
        {
            string query = "SELECT * FROM tr";
            SqlCommand cmd = new SqlCommand(query);

           
            DataSet data = GetData(cmd);
            string strjson = GetJson(data.Tables[0]);
            return strjson;
      }
the only difference here is instead of method:"Post" i have method:"Get".Thats it..
Is anything wrong i m doing or missing something.Why am i still not able to call my webmethod

[paramvir]

You should do some debugging to find out what exactly is not working.

Put an alert in first line of getData callback.

Put breakpoint in your server side method as well as page_load function.

Please share your findings.

[paramvir]

I'm attaching a working paramquery Grid solution based on c# ASP.NET [WebMethod]

Please refer to this solution

[qmaan]

I am new to Paramquery and want to integrate Remote Crud in MVC ....Can you please upload the sample again so that i can go with it

[paramvir]

you may download it now.

[qmaan]

Thanks. I have downloaded it .. and trying to start with this. I compared it with other solutions like datatable, jqgrid....

Funcationality wise it is awesome but not getting its much help.. better if you made some samples for server side usage...So that it can be more popular. Is there any test.zip sample for MVC pattern too

[paramvir]

Thanks for your suggestion.

Currently there is no sample file for mvc. I would try to provide mvc and php sample files for base version as soon as feasible.

[qmaan]

Ok thanks. Still struggling with it....It is not necessary to make full sample .. you can just write view section javascript with posting data with POST or Get and just return string from controller .....If you donot have much time

[paramvir]

you may have a look at this basic example of fetching data from server for pqgrid PRO. MVC code is under ASP.NET tab.

http://paramquery.com/pro/demos/paging_local

for base version you have to replace url property with getUrl method.

I hope it helps.

[qmaan]

Thanks for this... I have simple MVC 5 app created with VS2013

Seems issue is bit different that my controller function is not called, so firstly i check with simple jquery ajax call

 $(function () {
            $.ajax({
                type: "GET",
                url: "/Home/TestAjaxcall",
                success: function (result) {
                    $('#paramqrytest').html(result);
                },
                error: function (req, status, error) {
                    alert("Coudn't load partial view");
                }
            })
        });

and here is my controler function

 public ActionResult TestAjaxcall()
        {

            int test;
            test = 56;
            return Content("This is poorly formatted text.", "text/text");
        }

i have inserted the break point that on test =56; for testing that weather function executes or not.. and it is fine and displaying the string on web page.


But when i change the script as

 <script>
            $(function () {
           var colM = [
           { title: "Order ID", width: 100, dataIndx: "OrderID" },
           { title: "Customer Name", width: 130, dataIndx: "CustomerName" },
           { title: "Product Name", width: 190, dataIndx: "ProductName" },
           { title: "Unit Price", width: 100, dataIndx: "UnitPrice", align: "right" },
           { title: "Quantity", width: 100, dataIndx: "Quantity", align: "right" },
           { title: "Order Date", width: 100, dataIndx: "OrderDate" },
           { title: "Required Date", width: 100, dataIndx: "RequiredDate" },
           { title: "Shipped Date", width: 100, dataIndx: "ShippedDate" },
           { title: "ShipCountry", width: 100, dataIndx: "ShipCountry" },
           { title: "Freight", width: 100, align: "right", dataIndx: "Freight" },
           { title: "Shipping Name", width: 120, dataIndx: "ShipName" },
           { title: "Shipping Address", width: 180, dataIndx: "ShipAddress" },
           { title: "Shipping City", width: 100, dataIndx: "ShipCity" },
           { title: "Shipping Region", width: 110, dataIndx: "ShipRegion" },
           { title: "Shipping Postal Code", width: 130, dataIndx: "ShipPostalCode" }
                ];
                var dataModel = {
                    location: "remote",
                    dataType: "JSON",
                    method: "GET",
                    url: "/Home/TestAjaxcall",
                    getData: function (dataJSON) {
                        return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data };
                    }
                }

                $("#paramqrytest").pqGrid({
                    width: 900, height: 400,
                    dataModel: dataModel,
                    colModel: colM,
                    freezeCols: 2,
                    pageModel: { type: "remote", rPP: 20, strRpp: "{0}" },
                    sortable: false,
                    wrap: false, hwrap: false,
                    numberCell: { resizable: true, width: 30, title: "#" },
                    title: "Shipping Orders",
                    resizable: true
                });
            });


        </script>

application not stopping on break point but runs and show just column names (as i am not displaying anything in data..)

[paramvir]

There are few differences in API between base and PRO.

Please follow the prev post

  for base version you have to replace url property with getUrl method.

http://paramquery.com/api#option-dataModel-getUrl