CODEWITHSUNDEEP
jqueryasp.netajaxwebmethod
Pit Digger
Pit Digger

Reputation: 9800

Returning Gridview from AJAX WebMethod

Over the period of time I realized that by using AJAX Control Toolkit you can end up doing much more than using jquery . So I started using jquery ajax instead of updatepanels etc controls and it looks a lot faster and less complicated.

One questions I have is ,I had a gridview with paging inside updatepanel and there was a refersh button which was taking rows from DB and binding gridview again.Now I want to use webmethod .

Is there any way to return this from webmethod ? There can be many other cases where lets say I had a .ascx control inside updatepanel.Is there any way to return such controls as well?Any sample links appreciated

Thanks

Upvotes: 0

Views: 3019

Answers (3)

Icarus
Icarus

Reputation: 63962

You shouldn't return GridViews from WebMethods. You should return the data and bind it on the client side using jQuery.

If you are looking to completely replace the GridView, I recommend that you use some sort of jQuery plugin for displaying data in a tabular manner. You could look into jQGrid or datatables (my favorite). Your web method can return just the data in Json format. Something like: 

[WebMethod]
public List<CustomObject> GetData(string param1, string param2)
{
    //return data here
}

In the specific case of datatables, there's an interface that you must adhere to. It would look something like this on my C# version:

public class ResponseData 
{
    #region properties
    public int iTotalRecords { get; set; } //used by datatables to build the pager
    public int iTotalDisplayRecords { get; set; } //used by datatables to build the pager
    public string sEcho { get; set; }
    public string sColumns { get;set; } //optional
    public List<CustomObject> aaData { get; set; } //your actual business objects
    #endregion        
}

So your web method, if you choose to use datatables, should return ResponseData 

[WebMethod]
public ResponseData GetData(string param1, string param2)
{
    //return ResponseData
}

You would bind the data on the client side doing something like this:

 $(document).ready(function() {
            var oTableSummary = $("#tbl").dataTable({
                "bJQueryUI": true,
                "bPaginate": false,
                "sPaginationType": "full_numbers",
                "bServerSide": true,
                "bProcessing": true,
                "iDisplayLength": 50,
                "bFilter": false,
                "bSortClasses": false,
                "bDeferRender": false,
                "oLanguage": { "sSearch": "Search all columns:" },
                "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                "sAjaxSource": "WebService.asmx/GetData",
                "fnServerData": function(sSource, aoData, fnCallback) {
                    $.ajax({
                        "type": "POST",
                        "dataType": 'json',
                        "contentType": "application/json; charset=utf-8",
                        "url": sSource,
                        "data": "{'param1': 'param1" , 'param2': 'param2' }",
                        "success": function(result) {
                            fnCallback(result); // draw the table
                        }
                    });
                }
            });
        });

PS: You will need to spend quite a bit learning this stuff but if you master it, you will not want to go back to using server controls. :D

Upvotes: 5

James Johnson
James Johnson

Reputation: 46067

I wouldn't attempt to return server controls from the web method(s). It might appear to reduce the amount of code at first, but in the long run I think it will create more code and more headaches. For example, how do you plan to access the controls, the data bound to them, or their events in code-behind? Reducing the amount of markup is great, but not at the expense of the code-behind.

Sometimes as developers, we tend to go a little overboard new technologies when we're learning how to use them, and I think this is one of those cases.

Upvotes: 1

Sly
Sly

Reputation: 15227

You can have Web Method that returns a string. This string will contain all the html rendered by your control with the help of this or this approach. And on client side you can just replace holder of the table with new content (that's what basically update panel does).

But the better way is to transfer only data, not all html. Maybe some jquery grid plugins will help a bit.

Upvotes: 1

Related Questions