根據行值更改整行的顏色

Question

如果 object 已簽出/簽入，則嘗試使整個行變為紅色。這是我當前的代碼，我知道這可能很簡單，但我是菜鳥。

<ItemTemplate>
    <tr id="trId" runat="server">
        <td style="text-align: left;">
            <%#Eval("Name")%>
        </td>
        <td style="text-align: left;">
            <asp:Label ID="lblDescription" runat="server" Text='<%#Eval("Description")%>'></asp:Label>
        </td>
        <td style="text-align: left; display: none;">
            <asp:CheckBox ID="chkStatus" runat="server" Checked='<%#Eval("CheckedOut")%>' />
        </td>
        <td style="text-align: left;">
            <asp:Label ID="lblStatus" runat="server" Text='<%#Eval("Status")%>'></asp:Label>
        </td>
        <td style="text-align: left;">
            <asp:Label ID="lblLocation" runat="server" Text='<%#Eval("Location")%>'></asp:Label>
        </td>
        <td style="text-align: left;">
            <asp:Button ID="btnChangeStatus" Postback="false" runat="server" Width="150"
                        CommandArgument='<%#Eval("CatId") & "^" & Eval("CheckedOut")%>' OnClick="ChangeStatus" CssClass="btn btn-default" Font-Bold="True" />
        </td>
        <td style="text-align: left;">
            <asp:Button ID="btnEdit" PostBack="false" runat="server" Text="Edit" CssClass="btn btn-default" Width="150"
                        CommandArgument='<%#Eval("CatId")%>' OnClick="Edit" />
        </td>
    </tr>
</ItemTemplate>

Protected Sub CheckPermissions(sender As Object, e As RepeaterItemEventArgs) Handles rep_Data.ItemDataBound

    If (e.Item.ItemType = ListItemType.Item) Or (e.Item.ItemType = ListItemType.AlternatingItem) Then
        Dim chkStatus As CheckBox = CType(e.Item.FindControl("chkStatus"), CheckBox)
        Dim btnChangeStatus As Button = CType(e.Item.FindControl("btnChangeStatus"), Button)
        Dim lblStatus As Label = CType(e.Item.FindControl("lblStatus"), Label)
        If chkStatus.Checked = False Then
            btnChangeStatus.Text = "Check Out"
        Else
            btnChangeStatus.Text = "Check In"
            lblStatus.ForeColor = Drawing.Color.Red

        End If

Answer 1

好的，如果您注意到這是 GridView 還是 ListView，那就太好了。

但是，查看標記 - 看起來像 ListView - 它們是一個很好的控件 - 我最喜歡。 雖然 GridView 通常標記較少，但當您真的想要布局更復雜的網格時，ListView 開始獲勝（總的來說，整體標記通常更少 - 並且存在更多格式/樣式選項。

作為一般規則，給定列的行格式（甚至單個控件）最合適的選擇是什么？ 使用行數據綁定事件。

您也沒有分享您擁有的示例代碼在何處/何時/如何運行？

但是，目前，我們將假設您要為該列表視圖提供一些數據。

你也有兩個按鈕 - 但是你為按鈕設置了 postback = false ？ （為什么？？）。 事實上，無論如何按鈕都沒有 PostBack="False" 。 所以，刪除它。

我們可以稍微連接一下按鈕 - 但第一步是獲取我們的條件格式，並且“簽入”和“簽出”的“文本”首先適用於現有數據。 然后，我們可以處理兩次按鈕點擊。

所以，我們使用行數據綁定事件。 這有幾個原因，但是在那個“事件”期間，您不僅可以獲得整個列表視圖行，而且還可以在行綁定事件期間獲得不在列表視圖中的列。，..所以我可能想強調一下某些值或標志甚至不在 ListView 顯示中 - 但它是數據源的一部分。 這意味着您通常不必包含一些隱藏的列值 - 所以請記住這些重要提示。

所以，假設我們有這個列表視圖：

    <div style="width:50%">
        <asp:ListView ID="ListView1" runat="server" DataKeyNames="ID">
            <ItemTemplate>
                <tr style="">
                    <td>
                        <asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' />
                    </td>
                    <td>
                        <asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' />
                    </td>
                    <td>
                        <asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>' />
                    </td>
                    <td>
                        <asp:Label ID="Desciption" runat="server" Text='<%# Eval("Description") %>' />
                    </td>
                    <td>
                        <asp:CheckBox ID="ActiveCheckBox" runat="server" Checked='<%# Eval("Active") %>' />
                    </td>
                    <td>
                        <asp:label ID="ActiveText" runat="server"  />
                    </td>
                </tr>
            </ItemTemplate>
            <LayoutTemplate>
                <table id="itemPlaceholderContainer" runat="server" border="0" class="table">
                    <tr runat="server" style="">
                        <th runat="server">FirstName</th>
                        <th runat="server">LastName</th>
                        <th runat="server">City</th>
                        <th runat="server">Descripiton</th>
                        <th runat="server">Active</th>
                        <th runat="server">Active Text</th>
                    </tr>
                    <tr id="itemPlaceholder" runat="server">
                    </tr>
                </table>
            </LayoutTemplate>
        </asp:ListView>
    </div>

沒有太多的標記。 然后我們可以使用以下代碼填充 LV：

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

    Using conn As New SqlConnection(My.Settings.TEST4)

        Dim strSQL As String = "SELECT TOP 10 * from tblHotels WHERE Description is not null ORDER BY HotelName"

        Using cmdSQL = New SqlCommand(strSQL, conn)

            conn.Open()
            Dim rstData = New DataTable()
            rstData.Load(cmdSQL.ExecuteReader)
            ListView1.DataSource = rstData
            ListView1.DataBind()

        End Using

    End Using

End Sub

而我們的 output 現在是這樣的：

現在，讓我們格式化上面所說的非活動行是紅色背景。

我們還將設置活動文本

(if active = true), then You can book!
(if active = false), the text = "don't use"

因此，如前所述，我們使用行數據綁定事件。

但是我們需要像這樣在行標記中添加一個“id”：

           <ItemTemplate>
                <tr id="onerow" runat="server">
                    <td>
                        <asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' />
                    </td>
          

所以，我們稱之為一排。

現在，在我們的數據項綁定事件中，我們有以下代碼：

Protected Sub ListView1_ItemDataBound(sender As Object, e As ListViewItemEventArgs) Handles ListView1.ItemDataBound

    If e.Item.ItemType = ListViewItemType.DataItem Then

        Dim ckBox As CheckBox = e.Item.FindControl("ActiveCheckBox")
        Dim txtActive As Label = e.Item.FindControl("ActiveText")
        Dim onerow As HtmlTableRow = e.Item.FindControl("onerow")

        If ckBox.Checked = False Then
            txtActive.Text = "Dont use"
            ' set whole row to red (light red
            onerow.BgColor = "LightCoral"
        Else
            txtActive.Text = "Use Me"
            ' set whole row to red (light red
            onerow.BgColor = "Lightskyblue"

        End If

    End If


End Sub

現在我們有了這個：

現在下一部分是這兩個按鈕單擊事件。 我們可以並且想要這兩個按鈕的一些代碼。

所以這是第一個：

   <td style="text-align: left;">
        <asp:Button ID="btnChangeStatus" runat="server" Width="150"
                    CommandArgument='<%#Eval("CatId") & "^" & Eval("CheckedOut")%>' OnClick="ChangeStatus" CssClass="btn btn-default" Font-Bold="True" />

好的，我刪除了您的 PostBack=False。

及以上 - 更改狀態事件？ 這看起來不對。

我們不能簡單地雙擊列表視圖的“內部”按鈕來連接點擊事件 - 但您可以並且應該從這樣的標記中執行此操作：

在標記中鍵入 OnClick=

當你點擊=時，你會得到這個：

選擇創建新事件。 好像什么都沒發生。

標記將更改為：

  <asp:Button ID="btnChangeStatus" runat="server" Text="Button"
     OnClick="btnChangeStatus_Click"
  />

所以，現在我們可以 go 來編碼，我們有我們的點擊事件。

您可以單擊該行並以任何您想要的方式使用該行：

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

    Dim btn As Button = sender

    Dim lvRow As ListViewItem = btn.NamingContainer

    ' now our code is anything we want, say simular to item data bound event.
    Dim ckBox As CheckBox = lvRow.FindControl("ActiveCheckBox")
    Dim txtActive As Label = lvRow.FindControl("ActiveText")
    Dim onerow As HtmlTableRow = lvRow.FindControl("onerow")

    If ckBox.Checked = False Then
        txtActive.Text = "Dont use"
        ' set whole row to red (light red
        onerow.BgColor = "LightCoral"
    Else
        txtActive.Text = "Use Me"
        ' set whole row to red (light red
        onerow.BgColor = "Lightskyblue"
    End If

    ' -------- or get command arugments????

    Dim str = btn.CommandArgument

End Sub

或者，您的代碼在上述事件中會這樣說：

    ' -------- or get command arugments????
    Dim btnChangeStatus As Button = sender
    Dim lvRow As ListViewItem = btn.NamingContainer

    Dim chkStatus As CheckBox = lvRow.FindControl("chkStatus")
    Dim lblStatus As Label = lvRow.FindControl("lblStatus")
    If chkStatus.Checked = False Then
        btnChangeStatus.Text = "Check Out"
    Else
        btnChangeStatus.Text = "Check In"
        lblStatus.ForeColor = Drawing.Color.Red
    End If

因此，我們獲取按鈕，獲取容器（列表視圖行），然后按照上面的代碼進行編碼。