ParamQuery

General Category => Help for ParamQuery Grid (free version) => Topic started by: Pwavel on January 15, 2014, 03:53:48 pm

Title: getting data from asp.net page's web method or web service
Post by: Pwavel on January 15, 2014, 03:53:48 pm
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?
Title: Re: getting data from asp.net page's web method or web service
Post by: paramvir on January 15, 2014, 04:09:20 pm
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"

Title: getting data from asp.net page's web method or web service
Post by: Pwavel on January 15, 2014, 04:59:24 pm
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...
Title: Re: getting data from asp.net page's web method or web service
Post by: paramvir on January 16, 2014, 09:55:12 am
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
Title: getting data from asp.net page's web method or web service
Post by: Pwavel on January 16, 2014, 11:35:00 am
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
Title: Re: getting data from asp.net page's web method or web service
Post by: paramvir on January 16, 2014, 06:58:57 pm
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.
Title: Re: getting data from asp.net page's web method or web service
Post by: paramvir on January 17, 2014, 12:53:49 am
I'm attaching a working paramquery Grid solution based on c# ASP.NET [WebMethod]

Please refer to this solution
Title: Re: getting data from asp.net page's web method or web service
Post by: qmaan on May 19, 2014, 09:05:50 pm
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
Title: Re: getting data from asp.net page's web method or web service
Post by: paramvir on May 20, 2014, 06:11:18 am
you may download it now.
Title: Re: getting data from asp.net page's web method or web service
Post by: qmaan on May 21, 2014, 11:55:36 pm
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
Title: Re: getting data from asp.net page's web method or web service
Post by: paramvir on May 22, 2014, 04:39:49 pm
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.
Title: Re: getting data from asp.net page's web method or web service
Post by: qmaan on May 22, 2014, 04:54:59 pm
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
Title: Re: getting data from asp.net page's web method or web service
Post by: paramvir on May 22, 2014, 05:19:54 pm
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.
Title: Re: getting data from asp.net page's web method or web service
Post by: qmaan on May 22, 2014, 09:04:30 pm
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..)
Title: Re: getting data from asp.net page's web method or web service
Post by: paramvir on May 23, 2014, 01:29:25 pm
There are few differences in API between base and PRO.

Please follow the prev post

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

http://paramquery.com/api#option-dataModel-getUrl
Title: Re: getting data from asp.net page's web method or web service
Post by: qmaan on May 23, 2014, 08:10:33 pm
Yes. It worked.. great thanks
Title: Re: getting data from asp.net page's web method or web service
Post by: stelco on August 08, 2014, 06:14:42 pm
Hi, I have been looking for a C# ASP.Net solution for pqgrid and Ive found the test download very useful so thanks for that.

What I need to do though is pull in the data from a locally hosted .json file.  For example, this data in the code behind would be populated via the locally hosted file.  Any help on this appreciated as im a front end developer and fairly new to C#.

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet=true)]       
        public static List<book> getData()
        {
            var list = new List<book>
                {
                new book{Model = "A1 HATCHBACK 1.2 TFSI S Line", Repayments = "209", CAPID = "1234"},
                new book{Model = "A1 HATCHBACK 1.2 TFSI Sport", Repayments = "189", CAPID = "5678" },
                new book{Model = "A1 HATCHBACK 1.4 TFSI 140 S Line", Repayments = "229", CAPID = "9101112" },
                new book{Model = "A3 HATCHBACK 1.2 TFSI 110 S Line", Repayments = "219", CAPID = "131415" },
                new book{Model = "A3 HATCHBACK 1.2 TFSI 110 S Line S Tronic", Repayments = "229", CAPID = "161718" }
                };
            return list;