ASP.NET Tutorial/Ajax/UpdatePanelAnimation

Материал из .Net Framework эксперт
Перейти к: навигация, поиск

Using the UpdatePanelAnimation Control

<%@ Page Language="C#" %>
<%@ Register TagPrefix="ajax" Namespace="AjaxControlToolkit"
 Assembly="AjaxControlToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000);
        lblSelectedColor.Text = txtFavoriteColor.Text;
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Show UpdatePanel Animation</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <%-- First Update Panel --%>
        <asp:UpdatePanel ID="up1" runat="server">
        <ContentTemplate>
        <asp:Label
            id="lblFavoriteColor"
            Text="Enter Your Favorite Color:"
            Runat="server" />
        <asp:TextBox
            id="txtFavoriteColor"
            Runat="server" />
        <asp:Button
            id="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />
        </ContentTemplate>
        </asp:UpdatePanel>
        <ajax:UpdatePanelAnimationExtender
            id="upae1"
            TargetControlID="up1"
            runat="server">
        <Animations>
            <OnUpdating>
            <Color
                Duration="0.5"
                Fps="20"
                Property="style"
                PropertyKey="backgroundColor"
                StartValue="#FFFFFF"
                EndValue="#FFFF90" />
            </OnUpdating>
            <OnUpdated>
            <Color
                Duration="1"
                Fps="20"
                Property="style"
                PropertyKey="backgroundColor"
                StartValue="#FFFF90"
                EndValue="#FFFFFF" />
            </OnUpdated>
        </Animations>
        </ajax:UpdatePanelAnimationExtender>
        <%-- Second Update Panel --%>
        <asp:UpdatePanel ID="up2" runat="server">
        <ContentTemplate>
        You selected:
        <asp:Label
            id="lblSelectedColor"
            Runat="server" />
        </ContentTemplate>
        </asp:UpdatePanel>
        <ajax:UpdatePanelAnimationExtender
            id="UpdatePanelAnimationExtender1"
            TargetControlID="up2"
            runat="server">
        <Animations>
            <OnUpdating>
            <Color
                Duration="0.5"
                Fps="20"
                Property="style"
                PropertyKey="backgroundColor"
                StartValue="#FFFFFF"
                EndValue="#FFFF90" />
            </OnUpdating>
            <OnUpdated>
            <Color
                Duration="3"
                Fps="20"
                Property="style"
                PropertyKey="backgroundColor"
                StartValue="#FFFF90"
                EndValue="#FFFFFF" />
            </OnUpdated>
        </Animations>
        </ajax:UpdatePanelAnimationExtender>
    </div>
    </form>
</body>
</html>
Источник — «http://nfex.ru/index.php?title=ASP.NET_Tutorial/Ajax/UpdatePanelAnimation&oldid=3036»