带有时间选择器的脚本管理器

本文关键字：脚本 管理器 选择器 时间 | 更新日期: 2023-09-27 18:20:20

我想在用户单击日历组件后显示这个div。在这里，调用了一个javascript函数来显示这一点，但div内容不会出现在日历上

如果没有这个脚本管理器标记和时间选择器标记，它将正确显示。

请帮忙吗？

    <div class="event" id="eventWindow" style="display: none; width: 400px; height: 250px">
        <asp:Label ID="Label4" runat="server" Text="Event Time" style="z-index: 1; left: 38px; top: 13px; position: absolute; height: 18px; width: 116px;"></asp:Label>
        <br />
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
         <cc1:TimeSelector ID="TimeSelector1" runat="server" style="z-index: 1; left: 37px; top: 31px; position: absolute; height: 40px; width: 124px" DisplaySeconds="False">
        </cc1:TimeSelector>
        <br />
        <br />
        <asp:Label ID="Label2" runat="server" Text="Enter Event"></asp:Label>
        <br />

Java脚本调用。。。。。。。

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        string day = Convert.ToString(Calendar1.SelectedDate);
        string  [] date = day.Split(' ');
        var events = from cal in db.CalenderEvents
                     where cal.eventDate == date[0]
                     select cal.eventDescription;

        if (events.Count() == 0)
        {
            string js = @"document.getElementById('eventWindow').style.display = 'block'";
            ScriptManager.RegisterStartupScript(Calendar1,this.GetType(), "myalert", js, true);          

        }
}

带有时间选择器的脚本管理器

好吧，我想我明白你在这里想做什么了。如果当天没有活动，您只需要为从日历中选择的每一天添加一个活动。如果我是对的，你所做的就是错的。您只是注册了一段JS代码，但从未将其附加到像onClick或onLoad这样的事件。因此，我的建议如下。

  1. 通过添加runat="server" 使DIV（eventWindow）成为服务器端控件

  2. 不要注册JS代码，而是使用DIV的Visible属性使其可见（从该DIV的样式属性中删除display: none;）

这是的工作样品

Marckup代码

<asp:Calendar ID="Calendar1" runat="server" onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
    <div class="event" id="eventWindow" style="width: 400px; height: 250px" runat="server"> 
        <asp:Label ID="Label4" runat="server" Text="Event Time" style="z-index: 1; left: 38px; top: 13px; height: 18px; width: 116px;"></asp:Label>
        <br />       
         <cc1:TimeSelector ID="TimeSelector1" runat="server" style="z-index: 1; left: 37px; top: 31px; height: 40px; width: 124px" DisplaySeconds="False">
        </cc1:TimeSelector>
        <br />
        <br />
        <asp:Label ID="Label2" runat="server" Text="Enter Event"></asp:Label>
        <br />
    </div>

注意：由于控件显示在Calendar控件的顶部，我已经从样式属性中删除了位置属性。

代码隐藏

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        string day = Convert.ToString(Calendar1.SelectedDate);
        string[] date = day.Split(' ');
        var events = from cal in db.CalenderEvents
                     where cal.eventDate == date[0]
                     select cal.eventDescription;

        if (events.Count() == 0)
        {
            //string js = @"document.getElementById('eventWindow').style.display = 'block'";
            //ScriptManager.RegisterStartupScript(Calendar1, this.GetType(), "myalert", js, true);
            eventWindow.Visible = true;
        }
    }
相关文章：