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

前端之家收集整理的这篇文章主要介绍了实现页面异步局部更新-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 、运行页面即可。 原文链接:https://www.f2er.com/ajax/165253.html

猜你在找的Ajax相关文章