使用Ajax填充Gridview

Question

我有两个网格视图。在单击一个网格的一行时，我必须填充另一个网格视图。所以onClientclick的javascript函数我调用了ajax，它返回用于填充另一个网格的datatable。现在我遇到了如何使用javascript绑定网格视图的问题。

以下是代码

<asp:gridview id="gridview1"> .....</asp:gridview>
<asp:gridview id="gridview2"> .....</asp:gridview>

代码隐藏

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
             LinkButton db = (LinkButton)e.Row.Cells[0].Controls[0];

        db.OnClientClick = "FunPopulateSecondGrid(" + CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Label).text + ");"
            }
}

javascript

function FunPopulateSecondGrid(productid)
{
   $.ajax({
            url : '...',
            data : { getExEmpList: true, SelectedShop : selectedShop, ajaxCall : true },
            method : 'GET',
            dataType : 'json',
            contentType: "application/json; charset=utf-8",
            success : function(data) {
// i am stuck here how to bind it
//gridview2.datasource= data
//gridview2.databind()              
            },
            error : function(xhr, status) {
                alert('Sorry, there was a problem while placing your ajax request. Contact Admin!');
            }
        });
}

Answer 1

您需要将数据追加到success部分的gridview中，如下所示

如果你有Id为"gridview2“的gridview

function FunPopulateSecondGrid(productid)
    {
       $.ajax({
                url : '...',
                data : { getExEmpList: true, SelectedShop : selectedShop, ajaxCall : true },
                method : 'GET',
                dataType : 'json',
                contentType: "application/json; charset=utf-8",
                 success: function (data) { //you need to append the data to gridview
             for (var i = 0; i < data.d.length; i++) {
                    $("#gridview2").append("<tr><td>" + data.d[i].ProductName + 
                                                "</td><td>" + data.d[i].Price + "</td></tr>");
                 },
                error : function(xhr, status) {
                    alert('Sorry, there was a problem while placing your ajax request. Contact Admin!');
                }
            });
    }

请在此处找到完整的解决方案:Bind GridView with Jquery

Answer 2

在这里Scott Guthrei博客“提示/技巧:用于非ASP.NET AJAX场景的酷UI模板技术”，这正是你正在寻找的示例。

http://weblogs.asp.net/scottgu/archive/2006/10/22/Tip_2F00_Trick_3A00_-Cool-UI-Templating-Technique-to-use-with-ASP.NET-AJAX-for-non_2D00_UpdatePanel-scenarios.aspx

注意：在这里他使用了带有脚本管理器的asp.net ajax，但是你可以用jQuery ajax代替这部分。