zoukankan      html  css  js  c++  java
  • ASP.NET AJAX简明教程

       当我们谈论Ajax时,首先想到的就是JavaScript下的Ajax,用来完成网页的交互,局部刷新工作,Microsoft的ASP.NET AJAX框架在Web的开发中承担着类似的角色,并简化了JavaScript中的Ajax的操作。

      Microsoft的ASP.NET AJAX框架,整合了客户端脚本库和服务器的开发框架,基于.NET平台和Visual Studio开发工具来创建具有良好用户体验的Web页面和服务器端的页面。

      ASP.NET AJAX框架的结构体系:

      1.客户端

      ASP.NET AJAX是可扩展的,完全面向对象的JavaScript客户端脚本框架,允许开发者在JavaScript脚本中非常容易地调用Web Service。包含兼容IE,Firefox,Safari,Chrome等浏览器的浏览器兼容层,扩展了JavaScript的核心服务,丰富组件的基础类库,以及用来管理Web服务,应用程序通信,异步远程方法调用的网络层。

      2.服务器端

      ASP.NET AJAX服务器端集成了对异步客户端回调的脚本支持,Web Service的调用和实现基本AJAX应用的服务器端控件;

        ASP.NET AJAX框架包含了ScriptManager,UpdatePanel,UpdaProgress和Timer四个核心的服务器端控件,核心控件之间的关系可以用下图来描述:

                 

      下面具体介绍各个控件的使用方法:

      1.ScriptManager控件:

      ScriptManager是ASP.NET AJAX的运行基础,用来处理页面上的所有AJAX组件,注册JavaScript脚本,注册Web Service,在AJAX的开发中,ScriptManager是必须的,且有且仅有一个。

      ScriptManager的内部标签有:

      <Scripts>

        <asp:ScriptReference Path=""></asp:ScriptReference>

      </Scripts>

      用来注册外部的脚本文件;

      <Services>

        <asp:ServiceReference Path=""></asp:ServiceReference>

      <Services />

      用来注册Web Service;

      在JavaScript中调用Web Service要经历创建Web Service,在客户端注册Web Service,在JavaScript中引用Web Service中的方法三个步骤。

      下面给出一个调用Web Service的简单示例: 

     1 <script type="text/javascript">
     2         //为什么要以这种方式调用Web Service的方法;
     3         function myButton1_onClick() {
     4             AjaxService.Greet(show);
     5         }
     6 
     7         function show(result) {
     8             alert(result);
     9         }
    10     </script>
     1 <div>
     2         <%--注册服务器端的ScriptManager控件;--%>
     3         <asp:ScriptManager ID="myScriptManager" runat="server" >
     4             <Services>
     5                 <asp:ServiceReference Path="~/AjaxService.asmx" />
     6             </Services>
     7         </asp:ScriptManager>
     8     </div>
     9 
    10    <%-- 调用Web Service;--%>
    11     <div class="WebServiceDemo">
    12         <p>This is a example about the Web Service!</p>
    13         <input type="button" name="myButton1" value="获取Web服务" onclick="myButton1_onClick();"/>
    14     </div><br /><br /><br /> 
     1 [WebService(Namespace = "http://tempuri.org/")]
     2 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
     3 // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
     4  [System.Web.Script.Services.ScriptService]
     5 public class AjaxService : System.Web.Services.WebService {
     6 
     7     public AjaxService () {
     8     }
     9 
    10     [WebMethod]
    11     public string Greet()
    12     {
    13         return "Hello Ajax!";
    14     } 
    15 }

       注:至于为什么要在JavaScript脚本中使用那样的调用方法,我也不知道,等待更新……

      2.UpdatePanelUpdateProgress控件:

      UpdatePanel控件是服务器端的控件,用来创建实现局部更新的Web应用程序,强大之处在于不需要写任何JavaScript脚本就能够实现页面的局部更新;

      UpdatePanel的属性之中最重要的是UpdateMode,即更新模式,有Always和Conditional两个值,当值为Conditional时,只有触发注册到该UpdatePanel上的控件时才会局部更新页面,否则的话,只要.aspx页面中包含两个或两个以上的UpdatePanel,有一个进行局部更新,其他的都会随之更新;(这个现象可以在运行整个项目Demo时发现!);

      UpdatePanel控件的内部标签有:

      <ContentTemplate>

        在这里添加需要局部更新的ASP.NET服务器端控件;

        注:如果希望UpdateProgress能够正常显示,该UpdatePanel绑定的触发器控件也要在这里定义!

      </ContentTemplate>

      <Triggers  />包含<asp:AsyncPostBackTrigger />内部标签,用于异步局部更新页面。<asp:AsyncPostBackTrigger />有ControlID和EventName两个属性,其中ControlID用来设置用于触发异步回传控件的ID,如Button控件,EventName用来设置当触发绑定控件的什么事件时开始异步回传,局部更新页面,如Button的“Click”事件。

      UpdateProgress控件绑定于一个或多个UpdatePanel控件,用来显示UpdatePanel控件局部更新页面的过程信息。

      UpdateProgress控件的重要属性有AssociatedUpdatePanelID和DisplayAfter两个,AssociatedUpdatePanelID用来设置UpdateProgress控件绑定的UpdatePanel控件的ID,DisplayAfter用来设置UpdateProgress控件延迟显示的毫秒数。

      UpdateProgress控件的内部标签有:

      <ProgressTemplate>

        在这里添加显示状态信息的ASP.NET控件或者文本;

      </ProgressTemplate>

      注:如果没有定义UpdatePanel控件,就使用UpdateProgress控件,在调试的过程中会报错。

      下面给出一个使用UpdatePanel和UpdateProgress控件的简单示例:

     1 <div class="UpdatePanelandUpdateProgressDemo">
     2         <p>This is a example about the UpdatePanel and UpdateProgress!</p>
     3         <div>
     4            初始时间:<asp:Label ID="Label1" runat="server"></asp:Label><br />
     5         </div>
     6 
     7         <asp:UpdatePanel ID="myUpdatePanel" runat="server" UpdateMode="Conditional">
     8             <%--把需要局部跟新的控件内容添加到该区域;--%>
     9             <ContentTemplate>
    10                 当前时间:<asp:Label ID="Label2" runat="server"></asp:Label><br />
    11                 <%--<asp:Button />控件在<ContentTemplate />外部时,<asp:UpdateProgress />控件无法正常显示,
    12                 但是 <asp:UpdatePanel />可以正常使用;--%>
    13                 <asp:Button ID="myButton2" Text="使用UpdatePanel局部更新页面" runat="server" OnClick="myButton2_OnClick"/>
    14             </ContentTemplate>
    15             <Triggers>
    16                 <asp:AsyncPostBackTrigger ControlID="myButton2" EventName="Click"/>
    17             </Triggers>
    18         </asp:UpdatePanel>
    19 
    20          <asp:UpdateProgress ID="myUpdateProgress" AssociatedUpdatePanelID="myUpdatePanel" runat="server">
    21             <ProgressTemplate>
    22                 <asp:Label ID="Label3" Text="正在更新数据,请等待……" runat="server"></asp:Label>
    23             </ProgressTemplate>
    24         </asp:UpdateProgress>
    25     </div><br /><br />
     1     protected void Page_Load(object sender, EventArgs e)
     2     {
     3         Label1.Text = DateTime.Now.ToString();
     4         Label2.Text = DateTime.Now.ToString();
     5     }
     6 
     7     public void myButton2_OnClick(object sender, EventArgs e)
     8     {
     9         Label2.Text = DateTime.Now.ToString();
    10         System.Threading.Thread.Sleep(2000);
    11         //无法以下面的方式添加HTML标签;
    12         //Response.Write("<p>This is a example about the UpdatePanel!</p>");
    13     }

      3.Timer控件:

      Timer计时器控件,用来实现经过一段时间间隔刷新页面的功能。Timer控件能够定时触发整个页面回送,当它与UpdatePanel结合使用时可以定时触发异步回送并局部刷新UpdatePanel控件的内容。

      Timer控件的重要属性有Interval和onTick,Interval用来设置刷新的时间间隔,onTick用来设置一个处理程序来执行页面回送服务器时执行的请求。Timer处在UpdatePanel控件外部时刷新整个页面, 处在UpdatePanel控件内部是执行局部刷新;Timer控件处在UpdatePanel控件的内外部也会影响到JavaScript计时器组件的计时操作,读者自行探索,不在详述。

      下面给出一个使用Timer控件的简单示例:

     1 <div class="TimerDemo">
     2         <p>This is a example about the Timer!</p>
     3         <%--当添加两个或两个以上的UpdatePanel时通过设置UpdateMode属性来阻止UpdatePanel同时全部刷新;--%>
     4         <asp:UpdatePanel ID="myUpdatePanel2" runat="server" UpdateMode="Conditional">
     5             <ContentTemplate>
     6                 <asp:Image ID="myImage" runat="server" AlternateText="myImage" ImageAlign="Left" ImageUrl="images/image1.jpg"/>
     7                 <asp:Timer ID="myTimer" runat="server" Interval="2000" OnTick="myTimer_OnTick"></asp:Timer>
     8             </ContentTemplate>
     9         </asp:UpdatePanel>
    10     </div>
    1 public void myTimer_OnTick(object sender, EventArgs e)
    2     {
    3         Random r = new Random();
    4         int i = r.Next(5) + 1;
    5         myImage.ImageUrl = "images/image" + i + ".jpg";
    6     }

      4.ASP.NET AJAX Control Toolkit

      我还没使用过,个人感觉是一个类似jQuery UI 的控件库,详细的介绍参考:http://asp.net/ajax/downloads/default.aspx

      到此ASP.NET AJAX简明教程就结束了,希望给遇到困惑的读者一点启发。完整的示例下载访问:链接: http://pan.baidu.com/s/1hqqvFtM 密码: pwq5。

      参考文献:

        [1] ASP.NET 4.0(C#)实用教程,张玉兰编著,2012-10,北京,清华大学出版社。

        [2] ASP.NET 3.5(C#)实用教程,王辉等编著,2010-08,北京,清华大学出版社。

      本文历史:

    • 2014-12-24  初稿完成。
  • 相关阅读:
    Srt字幕文件解析
    有意思的一些处理
    CMSampleBufferRef转换
    不知为什么的警告和报错
    X Postgres copy命令导入导出数据
    X Oracle打Patch报错Missing command :fuser
    X wal_segment_size参数的理解与调优
    X PostgreSQL 11、12 开启归档日志
    X 手动安装postgresql扩展插件
    P1501 [国家集训队]Tree II
  • 原文地址:https://www.cnblogs.com/warnier-zhang/p/4181605.html
Copyright © 2011-2022 走看看