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

【问题标题】：dynamically add button column in Asp.net GridView using Jquery使用 Jquery 在 Asp.net GridView 中动态添加按钮列
【发布时间】：2014-08-07 07:12:35
【问题描述】：

我已经使用 json 数据动态填充了网格视图 ..Button 列开始仅出现在第一行 ..但不在下面的行中 ..

我已经尝试在服务器端代码和标记中添加列的代码..我也搜索但找不到任何相关的东西

这是我的标记：

  <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>

这是后面的代码：

 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;
            }

        }

我也尝试从后面的代码中添加列

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

这也行不通

任何建议都会有所帮助

【问题讨论】：

标签： c# jquery asp.net gridview

【解决方案1】：

由于gvDetails 是一个服务器端控件，你应该在你的JS sn-p 中使用<%= 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>

编辑：

【讨论】：

我做到了..但按钮列仍然不可见
@neeraj 它对我有用。请尝试在控制台中记录 data.d。
不不..我也得到了..我希望第一列的每一行都有按钮..这就是问题