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

问题描述

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

问题：：仅当刷新页面时（或者在原始页面加载时数据库中的值已经为假），它才会更改颜色

我尝试过的事情：

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

这是否可能完全在C＃/ asp.net中而不进行页面刷新？如果我需要使用javascript，该如何从下拉列表到标签？

HTML：

def update_stats(self,**stats):
    self._write_logs(stats,self.step)

def _write_logs(self,logs,index):
    with self.writer.as_default():
        for name,value in logs.items():
            tf.summary.scalar(name,value,step=index)
            self.step += 1
            self.writer.flush()

CSS：

<div>
    <asp:ScriptManager runat="server"></asp:ScriptManager>
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <asp:Image ID="img1" runat="server" height="20" width="20" 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>

C＃：

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

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

解决方法

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完成，您将需要在函数中进行验证，可以使用{ {1}}。

您的代码存在一些问题。

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

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

ListItem没有ID属性。

看看下面的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>

VDWWD's answer对您的代码提出了一些重要的考虑。您还应该在标签上使用AssociatedControlId属性，以将label元素与下拉列表正确关联。这会将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" height="20" width="20" 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，则也可以选择使用jQuery。

asp.net c#c#javascript