使用 Ajax 填充 Gridview

Question

我有两个网格视图。单击一个网格的一行时，我必须填充另一个网格视图。所以 onClientclick javascript 函数我调用了 ajax，它返回用于填充另一个网格的数据表。现在我被困在如何使用 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

您需要像这样在成功部分将数据附加到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 博客“提示/技巧：用于非 UpdatePanel 场景的 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 替换该部分。