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

时间:2010-02-21 09:37:33  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:下:      1)拖放一个LinkButton控件和一个TextBox控件到页面      <asp:LinkButton ID="ExtraShow1" Text="1234567" runat="server" OnClick="ExtraShow_Click" />      <asp:TextBox ID="TextBox2" runat="server&...
  正文:如何制作使用Ajax 1.0一个按钮提交后台的UpdatePanel动画呢?
  
  这里我制使用了Ajax 1.0制作了当一个LinkButton点击提交后UpdatePanel闪出一个边框的动画.
  
  
  步骤如下:
  
  1)拖放一个LinkButton控件和一个TextBox控件到页面
  
  <ASP/ target=_blank class=infotextkey>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);
"用Ajax 1.0制作一个按钮提交后UpdatePanel动画"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/aspnet/12861.html


关键字:

关于《用Ajax 1.0制作一个按钮提交后UpdatePanel动画》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td