UpdatePanel内的日历不能作为主页的触发器使用

时间:2014-05-29 12:57:47

标签: asp.net triggers calendar updatepanel master-pages

我有两个测试页面:一个页面为Master,第二个为空。

空的看起来像这样:

<asp:ScriptManager ID="scriptManager" runat="server" />
<asp:UpdatePanel ID="calendarUpdatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Calendar ID="calendar" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="timetableUpdatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:PlaceHolder ID="placeHolder" runat="server" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Calendar" EventName="SelectionChanged" />
    </Triggers>
</asp:UpdatePanel>

当用户从Date(第一个Calendar)中选择UpdatePanel时,我会显示Date相关信息insite placeHolder(第二个UpdatePanel)。这适用于两个页面。

Master页面的页面具有相同的Content。如果我按&#39;&gt;&#39;或者&#39;&lt;&#; ({1}}在空白页面上Calendar(下一个或上个月),Calendar会更新,我会看到下一个/上个月。使用Master页面的页面上的相同功能不起作用(如果我按下一个月或上个月我仍然会看到同一个月)。

问题出在哪里?

1 个答案:

答案 0 :(得分:0)

您应该将Calendar UpdatePanel放置到Controller / DisplayUnit的UpdatePanel的ContentTemplate。

这样日历可以与Controller / DisplayUnit交互。

例如。控制器按钮可以切换CalendarUpdatePanel。

<asp:UpdatePanel runat="server" ID="UpdatePanelControlDateEnd" UpdateMode="Conditional" ChildrenAsTriggers="True" RenderMode="Inline">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ImageButtonDateEnd" EventName="Click" />
        <asp:AsyncPostBackTrigger ControlID="CalendarDateEnd" EventName="SelectionChanged" />
    </Triggers>
    <ContentTemplate>
        <span style="display:inline-block;">
        <asp:UpdatePanel runat="server" ID="UpdatePanelCalendarDateEnd" 
            UpdateMode="Conditional" ChildrenAsTriggers="True" Visible="False">
            <ContentTemplate>
                <asp:Calendar ID="CalendarDateEnd" runat="server" OnSelectionChanged="CalendarDateEnd_SelectionChanged"
                Style="position:absolute;margin:5px;" BackColor="White" BorderColor="Black" DayNameFormat="Shortest"
                Font-Names="Times New Roman" Font-Size="10pt" ForeColor="Black" Height="220px"
                NextPrevFormat="FullMonth" TitleFormat="Month" Width="400px">
                    <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" ForeColor="#333333"
                    Height="10pt" />
                    <DayStyle Width="14%" />
                    <NextPrevStyle Font-Size="8pt" ForeColor="White" />
                    <OtherMonthDayStyle ForeColor="#999999" />
                    <SelectedDayStyle BackColor="#CC3333" ForeColor="White" />
                    <SelectorStyle BackColor="#CCCCCC" Font-Bold="True" Font-Names="Verdana" Font-Size="8pt"
                    ForeColor="#333333" Width="1%" />
                    <TitleStyle BackColor="Black" Font-Bold="True" Font-Size="13pt" ForeColor="White"
                    Height="14pt" />
                    <TodayDayStyle BackColor="#CCCC99" />
                </asp:Calendar>
            </ContentTemplate>
            </asp:UpdatePanel>
        </span> 
        <span style="white-space:nowrap">
           <asp:TextBox ID="TextBoxDateEnd" runat="server" Width="100px"></asp:TextBox>
           <asp:ImageButton ID="ImageButtonDateEnd" runat="server" OnClientClick=""
           CausesValidation="False" onclick="ImageButtonDateEnd_Click" ImageUrl="~/Resources/Images/pic_drop_down_image_button.png"
           style="left:-23px;top:0px;vertical-align:middle;position:relative;height:18px;" />
        </span>
    </ContentTemplate>
</asp:UpdatePanel>

上面的代码,隐藏在带有母版页面的页面内,通过了IE7,IE8,IE9(IE 11的开发模式),Firefox 32的测试。(但是UpdatePanel的自我同样在IE上有一些js bug 10/11。)因此,对于IE 10/11,您最好修改这些代码,以避免使用UpdatePanel。

例如:

<span>
    <span style="display:inline-block;">
        <asp:Calendar ID="CalendarStart" runat="server" 
        onselectionchanged="CalendarDateStart_SelectionChanged" Visible="False" 
        style="position:absolute;margin:5px;" 
            BackColor="White" BorderColor="Black" 
            DayNameFormat="Shortest" Font-Names="Times New Roman" Font-Size="10pt" 
            ForeColor="Black" Height="220px" NextPrevFormat="FullMonth" TitleFormat="Month" 
            Width="400px">
            <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" 
                ForeColor="#333333" Height="10pt" />
            <DayStyle Width="14%" />
            <NextPrevStyle Font-Size="8pt" ForeColor="White" />
            <OtherMonthDayStyle ForeColor="#999999" />
            <SelectedDayStyle BackColor="#CC3333" ForeColor="White" />
            <SelectorStyle BackColor="#CCCCCC" Font-Bold="True" Font-Names="Verdana" 
                Font-Size="8pt" ForeColor="#333333" Width="1%" />
            <TitleStyle BackColor="Black" Font-Bold="True" Font-Size="13pt" 
                ForeColor="White" Height="14pt" />
            <TodayDayStyle BackColor="#CCCC99" />
        </asp:Calendar>
    </span>
    <span style="white-space:nowrap">
      <asp:TextBox ID="TextBoxDateStart" runat="server" Width="100px"></asp:TextBox>
      <asp:ImageButton ID="ImageButtonDateStart" runat="server" OnClientClick=""
      CausesValidation="False" onclick="ImageButtonDataStart_Click" ImageUrl="~/Resources/Images/pic_drop_down_image_button.png"
      style="left:-23px;top:0px;vertical-align:middle;position:relative;height:18px;" />
    </span>
</span>

玩得开心。