在VB.NET中獲取HTML表行

Question

我正在試驗ASP.NET WebForms和數據。 我能夠使用ASPX中的一小段代碼將數據發布到頁面上，但是我無法使用刪除，編輯和查看單個記錄的按鈕來工作。 我相信這是因為在代碼片段中創建表行時無法添加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>控件。 就像是：

    <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單元格數據放入標簽或文字控件中，以便能夠通過后面的代碼訪問它們。