ASP 自定义日历控件在回发时消失答案

【问题标题】：ASP custom calendar control disappears on postbackASP 自定义日历控件在回发时消失
【发布时间】：2014-05-15 14:01:45
【问题描述】：

我创建了一个自定义日历控件，它在大多数情况下都能完美运行。我的问题是，无论何时发布，控件都会消失，即使用户仍在悬停。我希望他们能够更改月份、日期等，而divCalendarDropDown 不会消失。有什么建议吗？

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DateTimePickerObject.ascx.cs" Inherits="DateTimePicker.DateTimePickerObject" %>

<script type="text/javascript">
    var canHover = true;

    var calendarControl = $(".calendarControl"), flip = $(".divCalendarDropDown"),
    state = $.cookie("ToggleStatus");

    function setCalendarVisibility(className) {
        if (canHover) {
            var dropDown = document.getElementById("divCalendarDropDown");
            dropDown.className = className;
        }
    };
    function OnClick_Calendar() {
        var dropDown = document.getElementById("divCalendarDropDown");
        if (dropDown.style.height >= 1) {
            canHover = true;
            dropDown.className = 'divHidden';
        }
        else {
            canHover = false;
            dropDown.className = 'divNormal';
        };
    };
</script>
<style type="text/css">
    .textboxCalendar {
        position: relative;
        display: block;
        width: 215px;
    }
    .imgCalendar {
        position: absolute;
        left: 225px;
        top: 0px;
        margin: 0px 5px 0px 4px;
        height: 20px;
        width: auto;
    }
    .imgCalendar:hover {
        margin: 0px 7px 0px 4px;
        height: 21px;
    }
    div {
        float: left;
        width: 250px;
        top: 0px;
        margin-top: -2px;
        -webkit-transition:all ease-in-out 1s;
        -moz-transition:all ease-in-out 1s;
        -ms-transition:all ease-in-out 1s;
        -o-transition:all ease-in-out 1s;
        transition:all ease-in-out 1s;
        border-collapse: separate;
    }
        div:hover {
        }
    .divNormal {
        height: 0px;
        overflow: visible;
    }
    .divHidden {
        height: 0px;
        overflow: hidden;
    }
    .calendar {
        background-color: whitesmoke;
        position: relative;
        font-family: 'Segoe UI', Tahoma;
        opacity: 1;
    }
        .calendar a {
            font-weight: bolder;
        }
    .calendar th {
        font-weight: bold;
        color: #2C5A96;
    }
    .nextPrevStyle {
    }
    .dayHeaderStyle {
    }
    .dayStyle {
        background-color: #E3ECF7;
    }
    .otherMonthDayStyle {
        background-color:  #fbfbfb;
    }
    .selectedDayStyle {
    }
    .titleStyle {
        background-color: #E3ECF7;
    }
    .todayDayStyle {
        background-color: #fbdf93;
    }
    .weekendDayStyle {
        background-color:  #c5d6f1;
    }
    .calendarControl {
        position: relative;
        z-index: 1;
        height: auto;
        width: 252px;
    }
</style>
<div class="calendarControl">
    <asp:TextBox runat="server" ID="textboxCalendar" onMouseOver="setCalendarVisibility('divNormal');" onMouseOut="setCalendarVisibility('divHidden');" onBlur="textboxCalendar_OnBlur()" ReadOnly="True" CssClass="textboxCalendar"></asp:TextBox>
    <span id="spanCalendar" class="spanCalendar"><img id="imgCalendar" src="calendar.png" alt="Calendar" class="imgCalendar" onclick="OnClick_Calendar();"/></span>
    <div id="divCalendarDropDown" onMouseOver="setCalendarVisibility('divNormal');" onMouseOut="setCalendarVisibility('divHidden');">
        <asp:Calendar runat="server" ID="calendarMain" OnSelectionChanged="calendarMain_SelectionChanged" CssClass="calendar" NextPrevFormat="CustomText" NextMonthText=">>" PrevMonthText="<<" SelectionMode="Day" >
            <NextPrevStyle CssClass="nextPrevStyle" />
            <DayHeaderStyle CssClass="dayHeaderStyle" />
            <DayStyle CssClass="dayStyle" />
            <OtherMonthDayStyle CssClass="otherMonthDayStyle" />
            <SelectedDayStyle CssClass="selectedDayStyle" />
            <TitleStyle CssClass="titleStyle" />
            <TodayDayStyle CssClass="todayDayStyle" />
            <WeekendDayStyle CssClass="weekendDayStyle" />
        </asp:Calendar>
    </div>
</div>

【问题讨论】：

如果您无法避免回发，那么您可以添加一个<asp:HiddenField> 并编写一些 JavaScript，以便在每次日历可见性更改时设置其值。然后在页面加载时，用 JavaScript 读取隐藏字段的值，并根据该值设置初始日历可见性。

标签： c# javascript jquery css asp.net

【解决方案1】：

我会把它放在评论中，但我还不能； )

我认为您不能使用 asp:Calendar 控件禁用回发到服务器，因此请尝试将默认类添加到您的 DIV“divCalendarDropDown” - 例如

<div id="divCalendarDropDown" class="divNormal" onMouseOver="setCalendarVisibility('divNormal');" onMouseOut="setCalendarVisibility('divHidden');">

如果这不起作用，我会尝试向该 DIV 添加另一个操作，例如 onblur on onload - 例如

<div id="divCalendarDropDown" onload="setCalendarVisibility('divNormal');" onMouseOver="setCalendarVisibility('divNormal');" onMouseOut="setCalendarVisibility('divHidden');">

希望这会有所帮助！杰米

【讨论】：