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  初稿完成。
  • 相关阅读:
    mysql修改数据表名
    HDU 5742 It's All In The Mind (贪心)
    HDU 5752 Sqrt Bo (数论)
    HDU 5753 Permutation Bo (推导 or 打表找规律)
    HDU 5762 Teacher Bo (暴力)
    HDU 5754 Life Winner Bo (博弈)
    CodeForces 455C Civilization (并查集+树的直径)
    CodeForces 455B A Lot of Games (博弈论)
    CodeForces 455A Boredom (DP)
    HDU 4861 Couple doubi (数论 or 打表找规律)
  • 原文地址:https://www.cnblogs.com/warnier-zhang/p/4181605.html
Copyright © 2011-2022 走看看