下拉列表用户单击事件处理程序未触发

时间:2017-06-17 01:05:11

标签: c# asp.net

我是新手,我正在开展一个简单的项目,但发现自己陷入困境。

我有一个文本字段,只显示时间和一些下拉列表,我想分别改变那个时间的颜色,背景和字体大小。我的代码配置如下,但选择时似乎没有任何内容。

知道我的活动没有被处理的原因吗?

这是背后的cs代码:

public partial class WebTime : System.Web.UI.Page
{
    protected void Page_Init(object sender, EventArgs e)
    {

        timeLabel.Text = DateTime.Now.ToString("hh:mm:ss");
    } 


    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        timeLabel.BackColor = Color.FromName(DropDownList1.SelectedValue);
    }

    protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
    {
        timeLabel.ForeColor = Color.FromName(DropDownList2.SelectedValue);
    }

    protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)
    {
        timeLabel.Font.Size = Convert.ToInt32(DropDownList3.DataValueField);
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            timeLabel.BackColor = Color.FromName(DropDownList1.SelectedValue);
            timeLabel.ForeColor = Color.FromName(DropDownList2.SelectedValue);
            timeLabel.Font.Size = Convert.ToInt32(DropDownList3.DataValueField);
        }
    }
} 

这是前端的asp:

   <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebTime.aspx.cs" Inherits="WebTime" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>&nbsp;Simple Web Form Example</title>
        <style type="text/css">
            .timeStyle {
                color: #FFFF00;
                font-size: xx-large;
                background-color: #000000;
            }
            .listOption{
                margin: 10px 30px 10px 30px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>

            <h1>Current time on the Web server:</h1>
            <p>
                <asp:Label ID="timeLabel" runat="server" CssClass="timeStyle"></asp:Label>
            </p>

        </div>
            <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" CssClass="listOption">
                   <asp:ListItem Text="Black" Value="black" Selected="True" />
                   <asp:ListItem Text="Red" Value="red" />
                   <asp:ListItem Text="Blue" Value="blue" />
                   <asp:ListItem Text="Green" Value="green" />
            </asp:DropDownList>
            <asp:DropDownList ID="DropDownList2" runat="server" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged" CssClass ="listOption">
               <asp:ListItem Text="Yellow" Value="#FFFF00" Selected="True" />
               <asp:ListItem Text="Red" Value="#FF0000" />
               <asp:ListItem Text="Blue" Value="#0000FF" />
               <asp:ListItem Text="Green" Value="#008000" />
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList3" runat="server" OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged" CssClass="listOption">
               <asp:ListItem Text="24" Value="24px" Selected="True" />
               <asp:ListItem Text="32" Value="32px" />
               <asp:ListItem Text="64" Value="64px" />
               <asp:ListItem Text="128" Value="128px" />
        </asp:DropDownList>
    </form>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

我找到了自己的答案。需要为每个下拉列表设置简短版本 var mobileIndexShown = false; var timerSet; function showhide() { if (timerSet) { clearTimeout(timerSet); } if (!mobileIndexShown) { timerSet = setTimeout(toggleMobileIndex, 1000); } else { toggleMobileIndex(); } } function toggleMobileIndex() { var mobileIndex = document.getElementById('mobile_index'); timerSet = false; if (mobileIndex.className === 'DisplayBlock') { mobileIndex.className = 'DisplayNone'; mobileIndexShown = false; } else { mobileIndex.className = 'DisplayBlock'; mobileIndexShown = true; } }

这里更好的解释更详细,因为这个问题应该是重复的

C# dropdownlist change event