在 VB 中使用 onClick 更改行颜色

Changing row colour with an onClick in VB

提问人:mark davies 提问时间:11/16/2023 更新时间:11/16/2023 访问量:62

问:

当我单击其中的某些文本时,如何更改该行的背景颜色?我只是想强调这一行。我添加了一个 onclick 事件,但不知道如何点亮该行。这是我所拥有的..

        <asp:GridView ID="gdvOrders" width="100%" runat="server" style="font-size:1.8em" ShowHeaderWhenEmpty="True" EmptyDataText="No orders" AllowPaging="True" AutoGenerateColumns="False" CssClass="mGrid" DataKeyNames="orderID" DataSourceID="DSOrders" PageSize="20" AllowSorting="True">
            <AlternatingRowStyle CssClass="alt" />
            <Columns>  

                <asp:TemplateField HeaderText="Order">
                    <ItemTemplate>
                        <asp:LinkButton ID="LnkBtn1" onclick="LnkBtn1_Click" runat="server" Text='<%# Eval("ordertext") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="price" HeaderText="Price" />
.........

VB型

Protected Sub LnkBtn1_Click(sender As Object, e As System.EventArgs)

     Dim LnkBtn1 As LinkButton = CType(sender, LinkButton)

End Sub
asp.net vb.net gridview

评论

0赞 David 11/16/2023
顺便说一句......如果你只想改变一个元素的颜色,那么在 JavaScript 中这样做会容易得多,而不是回发到服务器并重新渲染整个页面。
0赞 mark davies 11/16/2023
谢谢,是的,那肯定会好得多,但我只是在学习 VB/Asp.Net,不知道从哪里开始使用 Java。

答:

1赞 Nick Abbot 11/16/2023 #1

我在预渲染事件期间做这种事情。这是一个小片段。

Private Sub gdvOrders_PreRender(sender As Object, e As EventArgs) Handles gdvOrders.PreRender

    Dim GV As GridView = If(sender Is Nothing, gdvOrders, sender)

    '...

    For Each GvRow As GridViewRow In GV.Rows

        GvRow.Cells(0).Style.Add("text-align", "right")
        GvRow.Cells(1).Style.Add("text-align", "right")

        With GvRow.Cells(0).Style
            .Add("border-left-style", "solid")
            .Add("border-left-width", "2px")
            .Add("border-left-color", "Black")
        End With

        With GvRow.Cells(1).Style
            .Add("border-left-style", "solid")
            .Add("border-left-width", "2px")
            .Add("border-left-color", "Black")
        End With

        GvRow.Cells(0).BackColor = Drawing.Color.LightGray
        GvRow.Cells(1).BackColor = Drawing.Color.LightGray
        
    Next
    
End Sub         
1赞 Albert D. Kallal 11/16/2023 #2

好的,让我们编写一些代码来使用 vb 突出显示该行。正如所指出的,这是一种用“山”来砸小蚂蚁的问题。(做这个客户端要好得多)。

但是,让我们使用服务器端代码来执行此操作,因为从这个示例中可以学到很多东西。(例如,根据按钮单击在 GridView 中选取当前行)。

因此,虽然 100% 客户端 JavaScript 是个好主意,但它通常并不那么简单,因为现在突出显示的上一行必须取消突出显示!

所以,说这个简单的 GridView,行中有一个按钮。

        <asp:GridView ID="GVHotels" runat="server" AutoGenerateColumns="False"
            DataKeyNames="ID" CssClass="table table-hover"
            Width="50%">
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                <asp:BoundField DataField="LastName" HeaderText="LastName" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="HotelName" HeaderText="Hotel" />
                <asp:BoundField DataField="Description" HeaderText="Descriptioin" />
                <asp:TemplateField HeaderText="Edit"
                    ItemStyle-HorizontalAlign="Center" ItemStyle-Width="130px">
                    <ItemTemplate>
                        <asp:Button ID="cmdEdit" runat="server" Text="Select"
                            OnClick="cmdEdit_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
        LoadData()
    End If

End Sub

Sub LoadData()

    GVHotels.DataSource = MyRst("SELECT * FROM tblhotelsA ORDER BY HotelName")
    GVHotels.DataBind()

End Sub

还要注意的是,在上面,我们在 GridView 中有一个标准按钮

该按钮可以包含以下代码:

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

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

    gRow.BackColor = System.Drawing.Color.LightSkyBlue

    If ViewState("LastRow") IsNot Nothing Then
        ' we have to un-highligt the previous row
        Dim RowIX As Integer = ViewState("LastRow")
        Dim gRow2 As GridViewRow = GVHotels.Rows(RowIX)
        gRow2.BackColor = System.Drawing.Color.White
    End If

    ViewState("LastRow") = gRow.RowIndex

End Sub

因此,请注意,当我们突出显示一行时,我们还必须取消突出显示上一行。

效果现在如下所示:

enter image description here

但是,让光标“悬停”在行上可能更容易。请注意,上面的网格已经内置了一个 int 的“悬停”。

该代码空行悬停效果是通过 GridView 的以下设置完成的:

CssClass="table table-hover"

所以,事实上,table 和 table-hover 是引导类,假设你已经安装了引导程序(你很可能会安装,因为这是模板的默认设置),那么也许只需要一个光标悬停就足够了。

如前所述,请注意行按钮单击如何使用命名容器选取单击的 CURRENT 行。这适用于中继器、GridView、ListView 等。此方法还意味着您不必使用或关心特定的 GridView 事件,例如命令名称。事实上,对于此类行单击,我建议您为此类事件使用上述命名容器。

编辑:允许重新加载和重新绑定网格,保留行。

那么,即使重新加载,也要允许/保留突出显示的行?

然后我们需要 2 个新部分:

第一部分,保留数据库中的主键值列表。

第二部分,添加到重新绑定例程代码中,以突出显示行列表中的任何现有行。

因此,代码现在变成这样:

Dim MyIDList As New List(Of Integer)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadData()      ' first time grid load
        ViewState("IDList") = MyIDList
    Else
        MyIDList = ViewState("IDList")
    End If

End Sub

Sub LoadData()

    GVHotels.DataSource = MyRst("SELECT * FROM tblhotelsA ORDER BY HotelName")
    GVHotels.DataBind()

End Sub


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

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

    Dim PK As Integer = GVHotels.DataKeys(gRow.RowIndex)("ID")

    If MyIDList.Contains(PK) Then
        ' ROW WAS Highliged, remove from list and un-highlight
        MyIDList.Remove(PK)
        gRow.BackColor = System.Drawing.Color.White
    Else
        ' not in our list, add to light, and highlight row
        MyIDList.Add(PK)
        gRow.BackColor = System.Drawing.Color.LightSkyBlue
    End If

End Sub

Protected Sub GVHotels_RowDataBound(sender As Object, e As GridViewRowEventArgs)

    If e.Row.RowType = DataControlRowType.DataRow Then

        Dim PKID As Integer = GVHotels.DataKeys(e.Row.RowIndex)("ID")
        If MyIDList.Contains(PKID) Then
            e.Row.BackColor = System.Drawing.Color.LightSkyBlue
        End If

    End If


End Sub

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

    LoadData()

End Sub

因此,最后一个按钮是测试我们的代码,它会进行 100% 的重新加载。

结果是这样的:

enter image description here

评论

0赞 mark davies 11/16/2023
这非常有帮助,谢谢。我现在有足够的工作。我想突出显示多行,所以我删除了 Un-Highlight 代码,它很有效。然后,我添加了一个 IF 语句来检查所选行是否已突出显示,如果已突出显示,则在选中时取消突出显示。我现在唯一的问题是这个网页每 60 秒刷新一次,因此它可以更新实时订单。但是,当它刷新并重置为未突出显示的所有内容时,它会忘记突出显示的内容。有没有一种简单的方法可以让它保持状态?
0赞 Albert D. Kallal 11/16/2023
好吧,正如现有示例所示,网格的亮点确实在回发后幸存下来。(这就是为什么我们有代码来取消突出显示上一行!!)。因此,行突出显示的持久性确实有效,并且 100% 没问题。但是,如果您重新加载并重新绑定 GridView,情况就不好了。在这种情况下,所有的赌注都是关闭的,因为 GV 的重新加载是 100% 的重新创建和重新绑定(因此任何格式都会丢失)。解决方案THEN意味着我们需要保留/坚持/维护先前选择的“id”值列表。因此,状态会被保存,直到您爆裂并重新加载 gv
0赞 mark davies 11/16/2023
啊,是的,它需要重新加载 GV,所以我将尝试让它将突出显示的状态保存在数据库中,并在刷新时重新加载。你肯定帮助了我很多,我正在挣扎,所以我把这个问题标记为回答。再次感谢您的帮助。
0赞 Albert D. Kallal 11/16/2023
好的,看看我的第二次编辑。我展示了如何管理您的问题,并且仍然允许 100% 重新加载,但保持行高......