UpdatePanelAnimationExtender - изменение размера не работает - PullRequest
Новая
       14

UpdatePanelAnimationExtender - изменение размера не работает

1 голос
/ 03 октября 2008

Это страница, которую я имею. Но часть изменения размера в разделе, похоже, не работает. Я скопировал большую часть кода с сайта Ajax . Я поместил alert () в тег (строка 108), чтобы найти значение «b._originalHeight», и оно отображается как «44». Я также попробовал код в вышеупомянутом уроке (строка 132), и это тоже не сработало. (Я не уверен, откуда оно получает это значение. Но мне нужно, чтобы оно отображало все элементы управления в форме. 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AddEditContest.ascx.cs" Inherits="TMPInternational.Spawn2DotComAdmin.Contest.UserControls.AddEditContest" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="uc" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register TagPrefix="ew" Assembly="eWorld.UI, Version=1.9.0.0, Culture=neutral, PublicKeyToken=24d65337282035f2" Namespace="eWorld.UI" %>
<h1 style="margin-left:8px">Add/Edit Contest</h1>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />

<div style="text-align:left;width:500px; margin-left:8px">
    <div id="PanelContainer">
        <asp:UpdatePanel ID="AddEditContestUpdatePanel" runat="server" UpdateMode="Always">
            <ContentTemplate>
                <div id="background" style="text-align:left; height: 44px;">
                    <asp:Panel ID="ContestList" runat="server">
                        <asp:datagrid AllowSorting="false" id="ContestGrid" GridLines="None" CellPadding="5" 
                            Width="100%" AutoGenerateColumns="False" AlternatingItemStyle-BackColor="#cccccc" 
                            HeaderStyle-Font-Size="15px" HeaderStyle-Font-Bold="true" HeaderStyle-BackColor="#888f9b" 
                            Runat="server" AllowPaging="True" PageSize="10"
                            PagerStyle-NextPageText="Next >>" PagerStyle-PrevPageText="<< Back" >
                            <Columns>
                                <asp:HyperLinkColumn DataNavigateUrlField="ContestID" DataNavigateUrlFormatString="../?Load=AddEditContest&Type=Edit&ContestID={0}" 
                                    DataTextField="Title" ItemStyle-width="30%" headertext="Contest Title" />
                                <asp:BoundColumn DataField="StartDate" ItemStyle-Width="35%" HeaderText="Start Date" />
                                <asp:BoundColumn DataField="EndDate" ItemStyle-Width="35%" HeaderText="End Date" />
                            </Columns>
                        </asp:datagrid>
                        <div style="text-align:right;">
                            <asp:ImageButton ID="AddContest" runat="server" 
                                ImageUrl="~/Contest/Images/Add.png" AlternateText="Add Contest" 
                                onclick="AddContest_Click" />
                        </div>
                    </asp:Panel>
                    <asp:Panel ID="FieldsPanel" runat="server">
                        <p /><b>Title</b>
                        <br />
                            <asp:TextBox Runat="server" id="TitleText" />
                            <asp:RequiredFieldValidator id="TitleValidator" runat="server" ForeColor="Red"
                                ErrorMessage="Please add a title" ControlToValidate="TitleText">*</asp:RequiredFieldValidator>
                        <p /><b>Contest Description</b>
                            <br />
                            Use HTML tags to format this area. Start paragraphs with 
                            &lt;p /&gt; tag, bold items with &lt;b&gt;&lt;/b&gt; tags. Create a 
                            line-break between lines with one &lt;br /&gt; tag.<br />
                            <asp:TextBox Runat="server" ID="DescriptionText" TextMode="MultiLine" Width="400" Height="200" />
                            <asp:RequiredFieldValidator id="DescriptionValidator" runat="server" ErrorMessage="Please add a description" 
                                ControlToValidate="DescriptionText" ForeColor="Red">*</asp:RequiredFieldValidator>
                        <p />
                            <b>Contest Start Date</b>
                        <br />
                        <ew:CalendarPopup id="StartDate" runat="server" Text="Change Date" Width="75px" MonthYearArrowImageUrl="~/Images/monthchange.gif"
                            CalendarLocation="Left" ControlDisplay="TextBoxImage" ImageUrl="~/Images/calendar.gif" MonthYearPopupApplyText="Select"
                            CalendarWidth="150" UseExternalResource="True" ExternalResourcePath="~/Scripts/CalendarPopup.js" Nullable="False">
                            <WeekdayStyle Font-Names="Arial" ForeColor="Black" BackColor="White" Font-Size="9pt" />
                            <MonthHeaderStyle Font-Size="9pt" Font-Names="Arial" Font-Bold="True" ForeColor="White" BackColor="#669AC1" />
                            <OffMonthStyle ForeColor="Gray" BackColor="White" Font-Size="9pt" />
                            <GoToTodayStyle Font-Names="Arial" ForeColor="Black" BackColor="White"/>
                            <TodayDayStyle Font-Bold="True" ForeColor="#669AC1" BackColor="White" />
                            <DayHeaderStyle Font-Size="9pt" Font-Names="Arial" Font-Bold="True" ForeColor="Blue" BackColor="White" />
                            <WeekendStyle Font-Names="Arial" ForeColor="Blue" BackColor="LightGray" Font-Size="9pt" />
                            <SelectedDateStyle Font-Bold="True" ForeColor="White" BackColor="#669AC1" Font-Size="9pt"/>
                            <HolidayStyle Font-Names="Arial" ForeColor="Black" BackColor="White" />
                        </ew:CalendarPopup>
                        &nbsp;
                        <ew:TimePicker id="StartTime" runat="server" ControlDisplay="TextboxImage" Text="Change Time" 
                                ImageUrl="~/Images/clock.gif" NumberOfColumns="4" Scrollable="True" Width="75px">
                            <TimeStyle ForeColor="Blue" BackColor="White" Font-Size="9pt" />
                            <SelectedTimeStyle ForeColor="Blue" BackColor="Gray" />
                        </ew:TimePicker>
                        <p/><b>Contest End Date</b>
                        <br />
                        <ew:CalendarPopup id="EndDate" runat="server" Text="Change Date" Width="75px" MonthYearArrowImageUrl="~/Images/monthchange.gif"
                            CalendarLocation="Left" ControlDisplay="TextBoxImage" ImageUrl="~/Images/calendar.gif" MonthYearPopupApplyText="Select"
                            CalendarWidth="150" UseExternalResource="True" ExternalResourcePath="~/Scripts/CalendarPopup.js" Nullable="False">
                            <WeekdayStyle Font-Names="Arial" ForeColor="Black" BackColor="White" Font-Size="9pt" />
                            <MonthHeaderStyle Font-Size="9pt" Font-Names="Arial" Font-Bold="True" ForeColor="White" BackColor="#669AC1" />
                            <OffMonthStyle ForeColor="Gray" BackColor="White" Font-Size="9pt" />
                            <GoToTodayStyle Font-Names="Arial" ForeColor="Black" BackColor="White"/>
                            <TodayDayStyle Font-Bold="True" ForeColor="#669AC1" BackColor="White" />
                            <DayHeaderStyle Font-Size="9pt" Font-Names="Arial" Font-Bold="True" ForeColor="Blue" BackColor="White" />
                            <WeekendStyle Font-Names="Arial" ForeColor="Blue" BackColor="LightGray" Font-Size="9pt" />
                            <SelectedDateStyle Font-Bold="True" ForeColor="White" BackColor="#669AC1" Font-Size="9pt"/>
                            <HolidayStyle Font-Names="Arial" ForeColor="Black" BackColor="White" />
                        </ew:CalendarPopup>
                        &nbsp;
                        <ew:TimePicker id="EndTime" runat="server" ControlDisplay="TextboxImage" Text="Change Time" 
                                ImageUrl="~/Images/clock.gif" NumberOfColumns="4" Scrollable="True" Width="75px">
                            <TimeStyle ForeColor="Blue" BackColor="White" Font-Size="9pt" />
                            <SelectedTimeStyle ForeColor="Blue" BackColor="Gray" />
                        </ew:TimePicker>
                    <p />
                        <asp:ImageButton ID="SaveContestButton" runat="server" AlternateText="Confirm" 
                        ImageUrl="~/Contest/Images/Confirm.png" onclick="SaveContestButton_Click" />
                </asp:Panel>
                <br />
                <asp:Label ID="MessageLabel" runat="server" />
                </div>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="SaveContestButton" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
    <uc:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="AddEditContestUpdatePanel">
        <Animations>
            <OnUpdating>
                <Sequence>
                    <%-- Store the original height of the panel --%>
                    <ScriptAction Script="var b = $find('animation'); b._originalHeight = b._element.offsetHeight;" />

                    <%-- Disable all the controls --%>
                    <Parallel duration="0">
                        <EnableAction AnimationTarget="SaveDefaultDescriptionButton" Enabled="false" />
                    </Parallel>
                    <StyleAction Attribute="overflow" Value="hidden" />

                    <%-- Do each of the selected effects --%>
                    <Parallel duration=".25" Fps="30">
                        <FadeOut AnimationTarget="PanelContainer" minimumOpacity=".2" />
                        <Resize Height="0px" />
                    </Parallel>
                </Sequence>
            </OnUpdating>
            <OnUpdated>
                <Sequence>
                    <%-- Do each of the selected effects --%>
                    <Parallel duration=".25" Fps="30">
                        <FadeIn AnimationTarget="PanelContainer" minimumOpacity=".2" />
                        <Length duration="2" fps="40" Property="style"  PropertyKey="height" 
                            StartValue="10"  EndValueScript="$get('animation').offsetHeight" 
                            AnimationTarget="animation" />
                        <%--Also tried the below
                        <Resize HeightScript="$find('animation')._originalHeight" />
                        --%>
                    </Parallel>

                    <%-- Enable all the controls --%>
                    <Parallel duration="0">
                        <EnableAction AnimationTarget="SaveDefaultDescriptionButton" Enabled="true" />
                    </Parallel>                            
                </Sequence>
            </OnUpdated>
        </Animations>
    </uc:UpdatePanelAnimationExtender>
</div>

Ответы [ 2 ]

1 голос
/ 14 августа 2009

После просмотра видео Джо Стагнера я тоже попытался реализовать ASP.NET AJAX UpdatePanelAnimation Extender, и у меня тоже возникли трудности с реализацией анимации изменения размера.

Моя проблема заключалась в следующем:

Я не добавил оператор System.Threading.Thread.Sleep (1000) в обработчик событий на стороне сервера *1009*.

В вашем примере кода нет кода, поэтому это может быть вашей проблемой.

Вот еще одно предположение:

Может помочь, если вы укажете атрибут 'AnimationTarget' в тегах 'Изменить размер'. 

<Resize AnimationTarget="PanelContainer" Height="0px" />
{...}
<Resize AnimationTarget="PanelContainer" HeightScript="$find('animation')._originalHeight" />
1 голос
/ 03 октября 2008

Я не уверен, что это единственное - это только первое, что выскочило мне: но согласно справочному документу , ваш тег <Resize Height="0px" /> должен вместо этого быть <Resize Height="0" Unit="px" />.

Почему второй <Parallel> Duration короче, чем <Length> Duration?

Извините, на самом деле это не ответ, только некоторые заметки о возможных проблемах, которые я вижу на первый взгляд.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...