Returning Gridview from AJAX WebMethod

Question

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

Answer 1

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