从AJAX WebMethod返回Gridview

Question

在一段时间内,我意识到通过使用AJAX Control Toolkit,您最终可以做的不仅仅是使用jquery.所以我开始使用jquery ajax而不是updatepanels等控件,它看起来更快,更简单.

我有一个问题是,我在updatepanel内部有一个gridview with paging,并且有一个referh按钮,它从DB中取出行并再次绑定gridview.现在我想使用webmethod.

有没有办法从webmethod返回这个？还有很多其他情况可以说我在updatepanel里面有一个.ascx控件.有什么方法可以返回这样的控件吗？任何示例链接都赞赏

谢谢

Answer 1

您不应该从WebMethods返回GridViews.您应该使用jQuery返回数据并在客户端绑定它.

如果您希望完全替换GridView,我建议您使用某种jQuery插件以表格方式显示数据.你可以看看jqGrid的或数据表(我的最爱).您的Web方法只能返回Json格式的数据.就像是:

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

在数据表的特定情况下,您必须遵守一个接口.在我的C#版本上看起来像这样:

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        
}

因此,如果您选择使用数据表,您的Web方法应该返回 ResponseData

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

你会绑定在客户端做一些数据就像这样:

 $(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:你需要花很多时间学习这些东西但是如果你掌握它,你就不会想回到使用服务器控件.:d