更改 DropdownList 值后更改 ASP 标签文本颜色？

Posted 2023-04-01

【中文标题】更改 DropdownList 值后更改 ASP 标签文本颜色？

【英文标题】：Change ASP Label text color after DropdownList value is changed?

【发布时间】：2021-01-14 04:18:39

【问题描述】：

目标：在选择 ASP 下拉列表项时改变 ASP 标签文本颜色。如果 ListItem 的值为 false，则 Label 的文本应为红色。否则保持黑色。

问题：只有在页面刷新时才会改变颜色（或者如果在原始页面加载时数据库中的值已经是 false）

我的尝试：

我尝试过使用 .Text 和 .SelectedValue 我尝试在 DropdownList 的 OnSelectedIndexChanged 期间运行此操作 查看了其他文章，但他们提到了用于 SAME 控件的 javascript，而不是在 DIFFERENT 控件上更改颜色而不是选择的控件（例如 ASP.NET Change link button color when clicked without post-back or update panel）

这是否可能纯粹在 C#/asp.net 中而无需刷新页面？ 如果我需要做javascript，如何从下拉列表到标签？

HTML：

<div>
    <asp:ScriptManager runat="server"></asp:ScriptManager>
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <asp:Image ID="img1" runat="server"   CssClass="providericon"/><sup><asp:Label ID="myLabel" runat="server" Font-Size="20px" CssClass="oval"/></sup> 
                <asp:Label ID="myLabelMid" runat="server" CssClass="professorname"/>
                <asp:DropdownList runat="server" id="ddlAvailability1" AutoPostBack="true" OnSelectedIndexChanged="ddlAvailability_OnSelectedIndexChanged" CssClass="dropdowns">
                    <asp:ListItem ID="LT1"></asp:ListItem>
                    <asp:ListItem ID="RT1"></asp:ListItem>
                </asp:DropdownList>
            </ContentTemplate>
        </asp:UpdatePanel>          
</div>
        
<asp:Panel ID="row2" runat="server" Visible="false">
    <%--<asp:ScriptManager runat="server"></asp:ScriptManager>--%>
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <asp:Image ID="img2" runat="server" CssClass="professoricon"/><sup><asp:Label ID="L2" runat="server" Font-Size="20px" CssClass="oval"/></sup> <asp:Label ID="M2" runat="server" CssClass="professorname"/> 
            <asp:DropdownList runat="server" id="ddlAvailability2" AutoPostBack="true" OnSelectedIndexChanged="ddlAvailability_OnSelectedIndexChanged" CssClass="dropdowns">
                <asp:ListItem ID="LT2"></asp:ListItem>
                <asp:ListItem ID="RT2"></asp:ListItem>
            </asp:DropdownList>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>    

CSS：

.professorname 
    margin-left: 15px;
    position: absolute;
    left: 55px;


.redtext 
    color: red;
    margin-left: 15px;
    position: absolute;
    left: 55px;

C#：

Page_Load()
    myLabelMid.CssClass = (ddlAvailability1.SelectedValue == "False") ? "redtext" : "professorname";
    M2.CssClass = (ddlAvailability2.SelectedValue == "False") ? "redtext" : "professorname";
    M3.CssClass = (ddlAvailability3.SelectedValue == "False") ? "redtext" : "professorname";

    
protected void ddlAvailability_OnSelectedIndexChanged(object sender, EventArgs e)

        DropDownList ddlSender = (DropDownList)sender;
        int professorIndex = getProviderIndex(ddlSender.ClientID);
        


public int getProfessorIndex(string ddlSenderClientID)

            int professorIndex = 0;
            switch (ddlSenderClientID)
            
                case "ddlAvailability1":
                    professorIndex = 0;
                    myLabelMid.CssClass = (ddlAvailability1.SelectedValue == "False") ? "redtext" : "professorname ";
                    break;
                case "ddlAvailability2":
                    professorIndex = 1;
                    M2.CssClass = (ddlAvailability2.SelectedValue == "False") ? "redtext" : "professorname ";
                    break;
            
            return professorIndex;

【问题讨论】：

此链接可能会有所帮助。 ***.com/questions/36926663/… 有很多方法可以使用原始 JavaScript 或 jQuery MS Ajax 来满足您的要求。另一种方法是使用 ClientScriptmanager docs.microsoft.com/en-us/dotnet/api/… 在第一个响应/请求中将 JS 交付给客户端，多种方式可以满足您的要求。

【参考方案1】：

DropdownList 是一个 ASP.NET 控件，它需要 AutoPostback 来触发 SelectedIndexChanged 事件，我刚刚调整了您的问题和最简单的解决方案是使用一个覆盖DropdownList和Label的更新面板：

ASPX 代码：

<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:Label ID="myLabelMid" runat="server" CssClass="professorname" Text="test"/> 
        <asp:DropdownList runat="server" ID="ddlAvailability1" AutoPostBack="true" OnSelectedIndexChanged="ddlAvailability1_SelectedIndexChanged" CssClass="dropdowns">
            <asp:ListItem ID="LT1" Text="yes"></asp:ListItem>
            <asp:ListItem ID="RT1" Text="no"></asp:ListItem>
        </asp:DropdownList>
    </ContentTemplate>
</asp:UpdatePanel>

C# 代码：

protected void ddlAvailability1_SelectedIndexChanged(object sender, EventArgs e)

    if (ddlAvailability1.SelectedValue == "no")  myLabelMid.CssClass = "redtext"; 
    else  myLabelMid.CssClass = "professorname";

我认为通过 JavScript 实现相同的行为是可能的，但它是使用 ASP.NET 控件的更复杂的解决方案，因为一旦 PostBack 完成，您将需要在函数中进行验证，这可以使用 @ 来完成987654323@.

【讨论】：

谢谢，它适用于 1 个下拉菜单，但如果我在页面上有多个，它开始表现得很奇怪。我有 3 个与 ddlAvailability_OnSelectedIndexChanged 方法关联的下拉菜单，该方法有一个开关盒来确定使用了哪个下拉菜单。 UpdatePanel 和/或 ContentPanel 是否应该出现在所有 3 个下拉菜单中？

是的，在同一个UpdatePanel中包含另一个Dropdownlist和你的Label，你应该没有问题

好的，我进行了更改以将它们全部包含在更新面板中。我注意到它们单独工作正常（即它在使用 Dropdown1 时更新颜色，或者在使用 Dropdown2 时更新颜色。）但是如果我使用 Dropdown 1，那么如果不刷新使用 Dropdown2 它就不起作用。如果我将 Dropdown1 从 True 更改为 False，然后将 Dropdown2 从 True 更改为 False，那么 Dropdown1 会以某种方式返回 True。试图弄清楚，因为在我添加 ScriptManager/UpdatePanel/ContentTemplate 之前没有发生这种行为

很奇怪，你说的我不太明白：“然后不刷新就使用Dropdown2”，你的意思是不点击？

对不起，让我澄清一下：这些控件位于 Site.Master 上，因此它们出现在所有页面上。刷新我的意思是刷新页面，或单击另一个页面。基本上：使用 Dropdown1，然后立即使用 Dropdown2。我首先使用的下拉菜单似乎采用了我使用的第二个下拉菜单的当前值（未选择）（以及颜色）。

【参考方案2】：

您的代码存在一些问题。

如果您使用OnSelectedIndexChanged，DDL 将触发 PostBack，并且使用 jQuery 对 DOM 所做的所有更改都将丢失。你似乎知道这一点，但我提到它只是为了确保。因此，如果您使用它，请确保在 IsPostBack 检查中绑定数据。

您的代码 sn-p 中没有 False。 ListItem 是否被选中，但您使用的是Value，而不是选择是/否的状态。

ListItem 没有ID 属性。

查看下面的 sn-p 以获取 jQuery 文本颜色更改演示。使用其中一个，而不是同时使用两个。

<asp:DropDownList runat="server" ID="ddlAvailability1" CssClass="dropdowns">
    <asp:ListItem Value="">Select a Professor</asp:ListItem>
    <asp:ListItem Value="LT1">Professor LT1</asp:ListItem>
    <asp:ListItem Value="LT2">Professor LT2</asp:ListItem>
    <asp:ListItem Value="LT3">Professor LT4</asp:ListItem>
</asp:DropDownList>

<script>
    //this changes the color to red as soon as something changes in the dll
    $('.dropdowns').bind('change', function () 
        $(this).addClass('redtext');
    );

    //this changes the color to red when anything other than the first item is selected,
    //else it becomes black again
    $('.dropdowns').bind('change', function () 
        if ($(this).prop('selectedIndex') !== 0) 
            $(this).addClass('redtext');
         else 
            $(this).removeClass('redtext');
        
    );
</script>

<style>
    .dropdowns 
        color: black;
    

    .redtext 
        color: red;
    
</style>

【参考方案3】：

VDWWD's answer 对您的代码提出了一些重要问题。您还应该使用标签上的AssociatedControlId 属性来正确地将标签元素与您的下拉列表相关联。这会将for 属性添加到您的标签中。然后我们可以在 javascript 中利用它。

类似于以下内容。

<!-- Note the added AssociatedControlId attribute and the
     removal of OnSelectedIndexChange and AutoPostback -->
<div>
    <asp:ScriptManager runat="server"></asp:ScriptManager>
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <asp:Image ID="img1" runat="server"   CssClass="providericon"/><sup><asp:Label ID="myLabel" runat="server" Font-Size="20px" CssClass="oval" /></sup> 
                <asp:Label ID="myLabelMid" runat="server" CssClass="professorname" AssociatedControlId="ddlAvailability1" />
                <asp:DropdownList runat="server" id="ddlAvailability1" CssClass="dropdowns">
                    <asp:ListItem value="true">Yes</asp:ListItem>
                    <asp:ListItem value="false">No</asp:ListItem>
                </asp:DropdownList>
            </ContentTemplate>
        </asp:UpdatePanel>          
</div>
        
<asp:Panel ID="row2" runat="server" Visible="false">
    <%--<asp:ScriptManager runat="server"></asp:ScriptManager>--%>
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <asp:Image ID="img2" runat="server" CssClass="professoricon"/><sup><asp:Label ID="L2" runat="server" Font-Size="20px" CssClass="oval"/></sup> <asp:Label ID="M2" runat="server" CssClass="professorname" AssociatedControlId="ddlAvailability1"/> 
            <asp:DropdownList runat="server" id="ddlAvailability2" CssClass="dropdowns">
                    <asp:ListItem value="true">Yes</asp:ListItem>
                    <asp:ListItem value="false">No</asp:ListItem>
            </asp:DropdownList>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>   

Javascript

let dropdowns = document.querySelectorAll(".dropdowns");
//Add Event Listeners
for(var i = 0; i < dropdowns.length; i++) 
   dropdowns[i].addEventListener("change", function() 
      //Find labels associated with control
      let labels = document.querySelectorAll("[for=" + this.id +"]");
      //toggle the redtext class on labels based on the selected value
      for(var j = 0; j < labels.length; j++) 
         labels[0].classList.toggle("redtext", this.value === "true");
      
      //NOTE: if you know each dropdown only has one label
      //      use document.querySelectorAll and skip the loop
      //      document.querySelector("[for=" + this.id +"]").classList.toggle("redtext", this.value === "false");
   )

注意所有代码都未经测试，可能需要进行一些调试，但这应该会让您朝着正确的方向前进。另请注意，如果您已经在使用 jQuery，这里也是一个选项。

【讨论】：

JonP - 谢谢。我试过这个，但在删除 OnSelectedIndexChange 和 AutoPostback 后，它不再更新数据库中的值。