用Ajax 1.0制作一个按钮提交后UpdatePanel动画

如何制作使用Ajax 1.0一个按钮提交后台的UpdatePanel动画呢?

这里我制使用了Ajax 1.0制作了当一个LinkButton点击提交后UpdatePanel闪出一个边框的动画.

步骤如下:

1)拖放一个LinkButton控件和一个TextBox控件到页面

<asp:LinkButton ID="ExtraShow1" Text="1234567" runat="server" OnClick="ExtraShow_Click" />

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

 

2)添加一个LinkButton的Click事件,该事件用来将LinkButton中的Text值付给TextBox

protected void ExtraShow_Click(object sender, EventArgs e)

{

    TextBox2.Text = ((LinkButton)sender).Text;

}

 

3)拖放一个UpdatePanel控件,将LinkButton和TextBox控件放入其中.并设置UpdateMode为Conditional.

增加LinkButton的Trigger触发一个AsyncPostBackTrigger

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

       <Triggers>

            <asp:AsyncPostBackTrigger ControlID="ExtraShow1" />

       </Triggers>

            <ContentTemplate>

                <fieldset>

                <asp:LinkButton ID="ExtraShow1" Text="1234567" runat="server" OnClick="ExtraShow_Click" />

                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

                </fieldset>

            </ContentTemplate>

       </asp:UpdatePanel>

4)写JavaScript动画方法

        <script type="text/javascript">

    Type.registerNamespace("ScriptLibrary");//注册一个ScriptLibrary的命名空间

       

        //制作一个BorderAnimation边框动画(如果写过wpf的动画,那么在这里我们会发现这句话很眼熟).

        ScriptLibrary.BorderAnimation =

        function(color, duration) {

            this._color = color;

            this._duration = duration;

        }

       

        //制作一个边框

        ScriptLibrary.BorderAnimation.prototype = {

            animatePanel: function(panelElement) {

                var s = panelElement.style;

                s.borderWidth = '1px';

                s.borderColor = this._color;

                s.borderStyle = 'solid';

                window.setTimeout(

                    function() {{ s.borderWidth = 0; }},

                    this._duration

                );

            }

        }

       

        //在动画中注册刚才我们制作的

        ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);

       

        //定义一个panelUpdatedAnimation用来存储我们做好的边框动画,我们设置成蓝色

        var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 1000);

        var postbackElement;

       

        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);

        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

       

        //我们在BeginRequest事件中获取到页面所有的PostBack元素

        function beginRequest(sender, args) {

            postbackElement = args.get_postBackElement();

        }

       

        function pageLoaded(sender, args) {

            //在窗体加载事件中我们获取到UpdatePanels

            var updatedPanels = args.get_panelsUpdated();

            //判断如果没有任何元素返回

            if (typeof(postbackElement) === "undefined") {

                return;

            } //否则查找里面的id中包含extrashow字符的控件,将动画注册到这些控件上

            else if (postbackElement.id.toLowerCase().indexOf('ExtraShow1') > -1)

  {

                for (i=0; i < updatedPanels.length; i++) {

        //设置当触发PostBack后在UpdatePanel上调用动画.

                    panelUpdatedAnimation.animatePanel(updatedPanels[i]);

                }

            }

           

        }

    </script>

其中js部分可能写的有点不太清楚,大虾们看了请指点下.
还有就是我尝试了添加一个Calender控件使用同样的方法,始终不能加载动画进去,看了下源代码,发现Calender控件生成后是个Table,只有Table拥有ID.每一个数字中不拥有ID.非常郁闷.大虾们如果知道如何将动画事件加载上去,请教教小弟我~~~~~~~