使用Ajax填充Gridview

时间:2013-12-09 07:11:57

标签: javascript jquery asp.net .net ajax

我有两个gridview。点击一行一个网格我必须填充另一个gridview。所以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!');
            }
        });
}

2 个答案:

答案 0 :(得分:4)

您需要将数据附加到gridview的成功部分,如此

如果您的网格视图为ID“gridview2”

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

答案 1 :(得分:1)

Scott Guthrei博客“Tip / Trick:用于非AJPa方案的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替换该部分。