使用Jquery在Asp.net GridView中动态添加按钮列

Question

I have populated Grid View Dynamically with json Data ..Button Column started to appears only in First Row ..But not in below rows .. 我已经用json数据动态填充了Grid View ..Button列开始仅出现在第一行..而不出现在下面的行..

I have Tried Code to add column in server side code as well as in Mark Up ..I also search but could not able to find any thing relevant 我已尝试将代码添加到服务器端代码以及“标记”中的列中。我也进行搜索，但找不到任何相关内容

this is my MarkUp : 这是我的标记：

  <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "List.aspx/GetData",
                data: "{}",
                dataType: "json",
                success: function (data) {
                    for (var i = 0; i < data.d.length; i++) {
                        $("#gvDetails").append("<tr><td>" + data.d[i].c1 + "</td><td>" + data.d[i].c2 + "</td><td>" + "</td></tr>");
                    }
                },
                error: function (result) {
                    alert(result.status + ' ' + result.statusText);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="gvDetails" runat="server" ShowHeaderWhenEmpty="True">
            <Columns>
                <asp:ButtonField Text="Button" />
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>

this is code behind : 这是背后的代码：

 protected void Page_Load(object sender, EventArgs e)
        {
            BindColumnToGridview();
        }

        private void BindColumnToGridview()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("c1");
            dt.Columns.Add("c2");

            dt.Rows.Add();
            gvDetails.DataSource = dt;

            gvDetails.DataBind();

        }


        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static tbl1[] GetData()
        {

            try
            {
                using (var context = new TestDBContext())
                {
                    List<tbl1> lsTbl1 = new List<tbl1>();

                    lsTbl1 = (from c in context.tbl1 select c).ToList();
                    return lsTbl1.ToArray();

                }
            }
            catch (Exception)
            {

                throw;
            }

        }

I also tried to add column from code behind 我也试图从后面的代码中添加列

gvDetails.Columns.Add(new ButtonField() { Text = "Button"  });

this is not working too 这也不起作用

any sugestion will be helpful 任何建议都将有所帮助

Answer 1

Since gvDetails is a server side control you should use <%= gvDetails.ClientID %> in your JS snippet. 由于gvDetails是服务器端控件，因此应在JS代码段中使用<%= gvDetails.ClientID %> 。

<script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "List.aspx/GetData",
                data: "{}",
                dataType: "json",
                success: function (data) {
                    for (var i = 0; i < data.d.length; i++) {
                        $("#<%= gvDetails.ClientID %>").append("<tr><td>" + data.d[i].c1 + "</td><td>" + data.d[i].c2 + "</td><td>" + "</td></tr>");
                    }
                },
                error: function (result) {
                    alert(result.status + ' ' + result.statusText);
                }
            });
        });
    </script>

EDIT: 编辑：

在此处输入图片说明

使用Jquery在Asp.net GridView中动态添加按钮列

问题描述

1 个解决方案

解决方案1
1 2014-08-07 09:33:00

使用Jquery在Asp.net GridView中动态添加按钮列

问题描述

1 个解决方案

解决方案1 1 2014-08-07 09:33:00

解决方案1
1 2014-08-07 09:33:00