实现页面异步局部更新-Ajax updatepanel控件

         优化系统,是因为系统的不够完善,同时也是为了软件的可持续发展。开发软件的同志们,应该都有同感,优化比开发难,但是无可厚非的是,优化比开发重要。

 

        本着这么一项宗旨,我在优化自己那一个功能模块时,不得不走上了“更快更好更实用”的路子,其中用到了一些技术和技巧性的东西,愿意拿出来分享给大家,会以博客的方式陆续发表出来,希望大家多提宝贵意见!

 

        因为某种原因,需要用到页面局部更新,采纳别人的意见,用现在很火的AJAX来实现。

 

一、简单介绍控件和相关属性

 

 ScriptManager控件

属性:EnablePartialRendering属性:true-实现页面的异步局部更新;false-实现全页面的刷新。

 

UpdatePanel控件

属性:

UpdateMode属性:Always-UpdatePanel页面上任何一处发生的回发操作都会产生页局部更新;Conditional-只在特定的情况下才产页面的回发,如执行UpdatePanel控件的update()方法或在指定的触发器的操作下。

ChildAsTrigger属性:指示UpdatePanel内部控件引起的回发是否产生当前UpdatePanel控件的局部更新。如果UpdateMode设为Always的话,那ChildAsTrigger局性必须设为True,否则运行出错

RenderMode属性:InLine-UpdatePanel控件被解析成HTML的<span>标记;Block-UpdatePanel控件被解析成HTML控件的<DIV>

 

二、介绍两种局部更新的方法

 

1updatepanel控件的内部控件(假设该控件为Button1)引起局部更新时:

 

a、首先在页面放入ScriptManager控件,放在Form里即可,设置EnablePartialRendering属性,详情见下面代码:

 

              <!--局部刷新-->
              <asp:ScriptManager ID="ScriptManager1"runat="server" EnablePartialRendering="true" >
              </asp:ScriptManager>

b、将需要更新的内容放在UpdatePanel控件里,详情见下面代码:

 

     <%--局部刷新,UpdatePanel的元素ContentTemplate是更新面板的内容模板--%>
     <asp:UpdatePanelID="UpdatePanel1" runat="server"ChildrenAsTriggers="True" UpdateMode="Always" >
         <ContentTemplate>
             需要更新的内容,button1(点击这个按钮,开始更新)
         </ContentTemplate>
     </asp:UpdatePanel>
         

c、运行页面即可。

 

2updatepanel控件的外部控件(假设该控件为Button1)引起局部更新时:

 

a、刚开始的内容与上面一样,不同的是,需要将UpdatePanel的属性UpdateMode设为Conditional

 

b、我们要在Page_Load方法中注册ScriptManager1.RegisterAsyncPostBackControl()来注册一下要实现异步更新的控件,详情见下面代码:


         //实现对Button1的注册
         ScriptManager1.RegisterAsyncPostBackControl(this.Button1);

c 、在 Button1控件的Click事件中后面加入 相应 代码 ,使得Button 1 按钮只对 UpdatePanel1控件实现的异步的局部刷新 ,详情见下面代码

             UpdatePanel1.Update();

d 、运行页面即可。

你可能感兴趣的:(实现页面异步局部更新-Ajax updatepanel控件)