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

时间:2014-08-07 07:12:35

标签: c# jquery asp.net gridview

我用json Data动态填充网格视图..按钮列开始只出现在第一行..但不在下面的行..

我尝试使用Tried Code在服务器端代码和Mark Up中添加列。我也搜索但无法找到任何相关内容

这是我的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>

这是背后的代码:

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

这也不起作用

任何消化都会有所帮助

1 个答案:

答案 0 :(得分:1)

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

修改

enter image description here