在 VB.NET 中获取 HTML 表格行

Question

我正在试验 ASP.NET WebForms 和数据。我可以使用在 ASPX 中剪断的小代码将数据发布到页面，但我无法使用删除、编辑和查看单个记录的按钮。我相信这是因为我在代码 sn-p 中创建表格行时无法添加runat="server"。

<table id="TBL_Albums" class="table table-striped table-bordered table-responsive">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Image</th>
            <th>Release Date</th>
            <th>Price</th>
            <th>Genre</th>
            <th>Artist</th>
            <th># of Tracks</th>
            <th colspan="3">&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <% For Each album In GetAlbums()
        %>
            <tr>
                <td><%=album.AlbumID%></td>
                <td>
                    <span class="text-primary font-weight-bold"><%=album.AlbumName %></span>
                </td>
                <td>
                    <img alt='<%=album.AlbumName %>' title='<%=album.AlbumName %>' style="width: 96px;" class="img-fluid" src="../Content/Images/DB/<%=album.ImagePath %>" />
                    <!-- Path broken for now. Will get fixed when I rearrange pages? -->
                </td>
                <td><%=album.ReleaseDate.ToString("MMMM yyyy") %></td>
                <td><%=album.UnitPrice.ToString("c") %></td>
                <td><%=album.Genre.GenreName %></td>
                <td><%=album.Band.BandName %></td>
                <td><%=album.TotalTracks %></td>
                <td>
                    <asp:Button ID="BTN_Details" runat="server" CssClass="btn btn-block btn-lg btn-info" Text="Details" OnClick="BTN_Details_Click" />
                </td>
                <td>
                    <asp:Button ID="BTN_Edit" runat="server" CssClass="btn btn-block btn-lg btn-warning" Text="Edit" OnClick="BTN_Edit_Click" data-toggle="modal" data-target="#EditAlbum" />
                </td>
                <td>
                    <asp:Button ID="BTN_Delete" runat="server" CssClass="btn btn-block btn-lg btn-danger" Text="Delete" OnClick="BTN_Delete_Click" />
                </td>
            </tr>
        <%
            Next %>
    </tbody>
</table>

当我运行项目并单击其中一个按钮时，我得到了这个异常：

System.InvalidCastException
  HResult=0x80004002
  Message=Unable to cast object of type 'System.Web.UI.WebControls.ContentPlaceHolder' to type 'System.Web.UI.HtmlControls.HtmlTableRow'.
  Source=<Cannot evaluate the exception source>
  StackTrace:
<Cannot evaluate the exception stack trace>

我的编辑按钮代码如下所示：

Protected Sub BTN_Edit_Click(sender As Object, e As EventArgs)
    Dim context As New MusicContext
    ClientScript.RegisterStartupScript(Page.GetType(), "EditAlbum", "$('#EditAlbum').modal();", True)
    Dim buttonDetails As Button = TryCast(sender, Button)
    Dim row As HtmlTableRow = DirectCast(buttonDetails.NamingContainer, HtmlTableRow)

    Dim img As HtmlImage = TryCast(row.Cells(2).Controls(0), HtmlImage)

    LBL_AlbumToUpdate.Text = row.Cells(1).InnerText
    HF_AlbumIDEdit.Value = row.Cells(0).InnerText
    TB_EditAlbumName.Text = row.Cells(1).InnerText
    IMG_AlbumImage.ImageUrl = img.Src
    TB_EditAlbumReleaseDate.Text = CDate(row.Cells(3).InnerText).ToString("yyyy-MM")
    TB_EditAlbumPrice.Text = CDec(row.Cells(4).InnerText)
    row.Cells(5).InnerText = DDL_EditAlbumGenre.SelectedItem.Text
    row.Cells(6).InnerText = DDL_EditAlbumBand.SelectedItem.Text
End Sub

Answer 1

你是对的，这是因为 NamingContainer 是 PlaceHolder 而不是 HTMLTableRow。您可以尝试改用<asp:Table>, <asp:TableRow>, <asp:TableColumn> 控件，但我认为您这样做是错误的。

尝试使用 <asp:Repeater> 或 <asp:DataList> 控件，而不是使用 for each 进行迭代。比如：

    <tbody>
        <asp:Repeater id="repAlbums" runat="server">
            <ItemTemplate>
                <tr>
                     <td>
                         <asp:Image id="imgAlbumName" ImageUrl="../Content/Images/DB/<%# Eval("ImagePath") %> runat="server" />
                     </td>
                     <td>
                         <asp:Label id="lblReleaseDate" runat="server" Text="<%#Eval("ReleaseDate.ToString("MMMM yyyy")") %>" />
                     </td>
                     <td>
                         <asp:Button ID="BTN_Edit" runat="server" CssClass="btn btn-block btn-lg btn-warning" Text="Edit" data-toggle="modal" data-target="#EditAlbum" CommandName="Edit" />
                     </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
    </tbody>

在加载事件中绑定Repeater：

Me.repAlbums.DataSource = GetAlbums()
Me.repAlbums.DataBind()

然后你会在Repeater的ItemCommand事件中处理click事件：

    Private Sub repAlbums_ItemCommand(source As Object, e As RepeaterCommandEventArgs) Handles repAlbums.ItemCommand
        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then

            Select Case e.CommandName
                Case "Edit"
                    Dim imgAlbumName As Image = DirectCast(e.Item.FindControl("imgAlbumName"), Image)
                    Dim lblReleaseDate as Label = DirectCast(e.item.FindControl("lblReleaseDate"), Label)

                    TB_EditAlbumReleaseDate.Text = CDate(lblReleaseDate.Text).ToString("yyyy-MM")
            End Select

        End If
End Sub

将您的 td 单元格数据放在标签或文字控件中，以便能够通过后面的代码访问它们。