Ajax日历首次在.net中无法正确显示？

Question

我在visual studio中使用AJAXToolKit日历。我无法找到风格。请看图像，当页面加载时，当我点击日历图标时，扩展器没有任何样式。

选择了某个日期后，样式正常运行。

所以，基本上风格如果有价值就会起作用。

没有价值：

有价值：

aspx代码：

<tr>
  <td>
    <asp:Label ID="IncidentDate_edit_lbl" runat="server" Text="Date: " CssClass="labelstyle"></asp:Label>
  </td>

  <td>
    <asp:TextBox ID="IncidentDate_edit_tbx" AutoPostBack="true" runat="server" CssClass="blueLabelStyle" Text='<%#Bind("Incident_Date")%>'></asp:TextBox>
    <asp:ImageButton ID="IncidentDate_edit_ibtn" runat="server" ImageUrl="~/Images/Calendar-icon.png" Height="20px" Width="20px" />
    <cc1:CalendarExtender ID="incidentdate_edit_calendarextend" runat="server" TargetControlID="IncidentDate_edit_tbx" EnabledOnClient="true" Format="dd-MM-yyyy" 
                                            PopupButtonID="IncidentDate_edit_ibtn">
    </cc1:CalendarExtender>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Invalid Date" ValidationGroup="Incident"
                                            ValidationExpression="\d{1,2}-\d{1,2}-\d{4}" Display="None" ControlToValidate="IncidentDate_edit_tbx">                                                                        
                                        </asp:RegularExpressionValidator>
    <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RegularExpressionValidator1">
    </cc1:ValidatorCalloutExtender>                                    
  </td>
</tr>  

Answer 1

我认为这是一个CSS问题，请在页面标题中尝试：

<style type="text/css">
    .ajax__calendar_container { z-index : 1000; }
</style>

如果值1000不起作用，请尝试5000.

如果这不起作用，请尝试：

<style type="text/css">
    .ajax__calendar {
        position: relative;
        left: 0px !important;
        top: 0px !important;
        visibility: visible; display: block;
    }
    .ajax__calendar iframe
    {
        left: 0px !important;
        top: 0px !important;
    }
</style>

希望有所帮助！

Answer 2

检查完整样式

    <style type="text/css">
     .ajax__calendar_container {
        padding: 4px;
        position: absolute;
        cursor: default;
        width: 170px;
        font-size: 11px;
        text-align: center;
        font-family: tahoma,verdana,helvetica;
    }

    .ajax__calendar_body {
        height: 139px;
        width: 170px;
        position: relative;
        overflow: hidden;
        margin: auto;
    }

    .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years {
        top: 0px;
        left: 0px;
        height: 139px;
        width: 170px;
        position: absolute;
        text-align: center;
        margin: auto;
    }

    .ajax__calendar_container TABLE {
        font-size: 11px;
    }

    .ajax__calendar_header {
        height: 20px;
        width: 100%;
    }

    .ajax__calendar_prev {
        cursor: pointer;
        width: 15px;
        height: 15px;
        float: left;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-image: url(WebResource.axd?d=vuxhVfo1YLyjqq0iGRXgQLQX43rVnAr0061zfFv0yrJptA2vlKQIjqV6bQH7kcz62NSlNo4XlKkgaWR89p2wWS0-_eYynob71_2kyJ_BbCehN90iBwIVlHvOujE4LEMnC_XgRxhDLUgjt5q6z-RyhBJEqA0I88WHStYXd8XDskQ1&t=633885366380000000);
    }

    .ajax__calendar_next {
        cursor: pointer;
        width: 15px;
        height: 15px;
        float: right;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-image: url(WebResource.axd?d=1vEP8Pv3XMqD6PfaIev5s6qGIqSFwx2eI9GjFosFKgLLJo8GkIOA59ujgqiG0gCg8XxgaPKCBQazTqQPIxNumjgdpN7yZMBP2ZzOnYX70AkEhvKWlRzNTNKTKL36xKq8nFeBI-IuZ7k4FJoWSKj4oxp2Bnx546ji6VGnO1TwPsM1&t=633885366380000000);
    }

    .ajax__calendar_title {
        cursor: pointer;
        font-weight: bold;
    }

    .ajax__calendar_footer {
        height: 15px;
    }

    .ajax__calendar_today {
        cursor: pointer;
        padding-top: 3px;
    }

    .ajax__calendar_dayname {
        height: 17px;
        width: 17px;
        text-align: right;
        padding: 0 2px;
    }

    .ajax__calendar_day {
        height: 17px;
        width: 18px;
        text-align: right;
        padding: 0 2px;
        cursor: pointer;
    }

    .ajax__calendar_month {
        height: 44px;
        width: 40px;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
    }

    .ajax__calendar_year {
        height: 44px;
        width: 40px;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
    }

    .ajax__calendar .ajax__calendar_container {
        border: 1px solid #646464;
        background-color: #ffffff;
        color: #000000;
    }

    .ajax__calendar .ajax__calendar_footer {
        border-top: 1px solid #f5f5f5;
    }

    .ajax__calendar .ajax__calendar_dayname {
        border-bottom: 1px solid #f5f5f5;
    }

    .ajax__calendar .ajax__calendar_day {
        border: 1px solid #ffffff;
    }

    .ajax__calendar .ajax__calendar_month {
        border: 1px solid #ffffff;
    }

    .ajax__calendar .ajax__calendar_year {
        border: 1px solid #ffffff;
    }

    .ajax__calendar .ajax__calendar_active .ajax__calendar_day {
        background-color: #edf9ff;
        border-color: #0066cc;
        color: #0066cc;
    }

    .ajax__calendar .ajax__calendar_active .ajax__calendar_month {
        background-color: #edf9ff;
        border-color: #0066cc;
        color: #0066cc;
    }

    .ajax__calendar .ajax__calendar_active .ajax__calendar_year {
        background-color: #edf9ff;
        border-color: #0066cc;
        color: #0066cc;
    }

    .ajax__calendar .ajax__calendar_other .ajax__calendar_day {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #646464;
    }

    .ajax__calendar .ajax__calendar_other .ajax__calendar_year {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #646464;
    }

    .ajax__calendar .ajax__calendar_hover .ajax__calendar_day {
        background-color: #edf9ff;
        border-color: #daf2fc;
        color: #0066cc;
    }

    .ajax__calendar .ajax__calendar_hover .ajax__calendar_month {
        background-color: #edf9ff;
        border-color: #daf2fc;
        color: #0066cc;
    }

    .ajax__calendar .ajax__calendar_hover .ajax__calendar_year {
        background-color: #edf9ff;
        border-color: #daf2fc;
        color: #0066cc;
    }

    .ajax__calendar .ajax__calendar_hover .ajax__calendar_title {
        color: #0066cc;
    }

    .ajax__calendar .ajax__calendar_hover .ajax__calendar_today {
        color: #0066cc;
    }
</style>

Answer 3

它是Web.config中的一个设置

将以下内容添加到web.config

的底部

<ajaxControlToolkit useStaticResources="true" renderStyleLinks="true" /></configuration>