通过asp.net中的数据表在asp gridview中添加按钮列

Posted 2023-02-15

【中文标题】通过asp.net中的数据表在asp gridview中添加按钮列

【英文标题】：Add column of button in asp gridview by datatable in asp.net

【发布时间】：2021-11-29 02:58:38

【问题描述】：

我想通过asp.net中的数据表在asp gridview中添加按钮

这是我的 gridview 代码，

  <asp:GridView ID="gv_productdetail" runat="server" AutoGenerateColumns="false" CssClass="table table-bordered table-condensed">
    <columns>                        
        <asp:BoundField DataField="MortageID" HeaderText="Id"  />
        <asp:BoundField DataField="Type" HeaderText="Type" />           
    </columns>
</asp:GridView>

现在，这个 gridview 是通过 ajax 方法绑定的。这是代码，

//Fill Product Grid
function FillProductGrid()             

    //Display Product
    var AcNo = document.getElementById('<%= txt_acno.ClientID%>').value;    
    var Data = JSON.stringify( mortgageNo: MortgageNo, acNo: AcNo );            
    $.ajax(
        url: "CustomerMortgage.aspx/GetProductList",
        async: true,
        type: "POST",
        dataType: "json",
        data: Data,
        contentType: "application/json; charset=utf-8",
        success: OnSuccess,
        failure: function (response) 
            alert(response.d);
        ,
        error: function (response) 
            alert(response.d);
        
    );


function OnSuccess(response)             
    $('#<%=gv_productdetail.ClientID%>').DataTable(
    
        paging: false,
        destroy: true,
        bLengthChange: true,
        lengthMenu: [[5, 10, -1], [5, 10, "All"]],
        bFilter: true,
        bSort: true,
        bPaginate: true,
        data: response.d,
        columns: [ 'data': 'ProductId' ,
             'data': 'ProductType' 
    );
;

整个数据被完美绑定。但是现在我想在每一列中添加按钮，我尝试了 asp:TemplateField 但它不起作用。

【参考方案1】：

你应该可以只放一个按钮。

您的标记将如下所示：

    <asp:GridView ID="gv_productdetail" runat="server" AutoGenerateColumns="false" CssClass="table table-bordered table-condensed">
       <columns>                        
          <asp:BoundField DataField="MortageID" HeaderText="Id"  />
          <asp:BoundField DataField="Type" HeaderText="Type" />
           
          <asp:TemplateField HeaderText="View">
              <ItemTemplate>
                  <asp:Button ID="cmdRowSel" runat="server" Text="Row Sel" />
              </ItemTemplate>
          </asp:TemplateField>

       </columns>
   </asp:GridView>

但是，作为一般规则，我不会在结果网格中公开数据库 PK“id”。

对于使用 ajax 调用填充此网格而不是隐藏代码的好处，我们完全不清楚。您仍然必须编写 web 方法，但目的是什么？所有这些额外的工作值得吗？您不会获得更好的性能。

但是，通过从客户端代码中提取数据，您将如何防止数据库 PK id 被隐藏？您真的不希望客户端在浏览器中看到或永远拥有这些 PK 数据库行 ID 值。

gv 具有针对上述问题的内置功能。

（数据键）。这意味着 PK 行数据库 ID 可以保持隐藏状态，并且永远不会暴露给客户端浏览器。

假设我有一个这样的酒店列表：

    <asp:GridView ID="gvHotels" runat="server" AutoGenerateColumns="false" 
        CssClass="table table-bordered "
        DataKeyNames="ID" >
       <columns>                        
          <asp:BoundField DataField="HotelName" HeaderText="Hotel"  />
          <asp:BoundField DataField="City" HeaderText="City"  />
          <asp:BoundField DataField="Province" HeaderText="Province"  />
          <asp:BoundField DataField="Description" HeaderText="Description" />
           
          <asp:TemplateField HeaderText="View">
              <ItemTemplate>
                  <asp:Button ID="cmdRowSel" runat="server" Text="Row Sel" CssClass="btn"
                      OnClick="cmdRowSel_Click"/>
              </ItemTemplate>
          </asp:TemplateField>

       </columns>
   </asp:GridView>

好的，代码要填写，但更重要的是按钮点击事件。

所以我们要填写以下代码：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        LoadGrid
    End If
End Sub

Sub LoadGrid()
    Dim strSQL As String =
       "SELECT ID, HotelName, City, Province, Description FROM tblHotels ORDER BY HotelName"

    Using con As New SqlConnection(My.Settings.TEST3)
        Using cmdSQL As New SqlCommand(strSQL, con)

            con.Open()
            gvHotels.DataSource = cmdSQL.ExecuteReader
            gvHotels.DataBind()

        End Using
    End Using
End Sub

我们现在有了这个；

看看那是多么少的代码 - 超级简单。

到目前为止还没有什么可看的，但是那个按钮点击事件？我现在可以获得行点击，更重要的是获得数据库 PK 行 ID，但从未在客户端公开它。我们后面的行点击按钮代码是这样的：

Protected Sub cmdRowSel_Click(sender As Object, e As EventArgs)

    Dim btn As Button = sender
    Dim gRow As GridViewRow = btn.Parent.Parent

    Debug.Print("Row click index = " & gRow.RowIndex)
    Dim PkID As Integer = gvHotels.DataKeys(gRow.RowIndex).Item("ID")

    Debug.Print("Row click PK ID  = " & PkID)

End Sub

输出：

Row click index = 5
Row click PK ID  = 72

现在上面是非常有效的，因为通过使用 DataKeys 设置，PK 行 id 永远不需要也不会暴露客户端。

无论如何，我只是认为您最好使用服务器端代码来填充该网格。您获得零性能优势，但您失去了通过服务器端事件获取行数据的能力，但更重要的是使用 PK 数据库行值，而不必显示它，甚至允许或拥有数据库PK 行 id 暴露或发送给客户端。

无论如何，只需按照上面的方法在模板设置中添加按钮就可以用于您的设置，但是除非您拥有客户端代码的那部分，否则在后面的代码中单击生成的按钮将不会使用数据库 PK id ，这意味着现在正在将数据库 ID 发送到客户端，更糟糕的是，您的按钮代码服务器端无法为由 ajax 填充的网格获取它们（除非您将 PK 数据库 ID 拉到该网格中）。

【讨论】：

根据我所描述的问题，只有 asp:TemplateField 不能在其中工作。还有为什么我们希望看到 web 方法，因为我告诉整个数据显示完美，这意味着 web 方法是完美的，只是我想在每一列中添加一个按钮，这只是设计部分。

如前所述，将 asp.net 按钮简单地拖放到表中即可，但要这样做，您需要使用服务器端代码填充网格，因为它是服务器端 gridview/listview最终生成标准的 html 表格输出。因此，我想您可以编写填充该表的客户端代码并添加按钮。但是，当不需要时，这是很多工作。我没有解决方案，因为我不建议这样做，而且我无法为花费这种钱做一个有效的用例。所以删除 asp.net 服务器控件，并使用一些 js + 客户端网格设置