微软AJAX 教学系列第一讲:局部刷新Partial Page Updates(翻译)
2008-05-19 18:18
363 查看
最新看到.NET官方网http://www.asp.net/上推出了最新的AJAX系列教程.正好最近有不忙,所以决定翻译过来共大家参考.
由于本人第一次进行翻译,有翻译不准,不正确的地方,望大家批评指正
笑Q
系列一:局部刷新Partial Page Updates
介绍(introduction)
微软的.net是基于面向对象和事件驱动的编程技术.但是它的基于服务端的处理存在很多内在的缺点.
.页面的更新需要一个往返的服务器的访问,这需要页面的刷新.
.像javascript和其他的基于客户端的技术(像Adobe Flash),他们的请求对服务端并不产生任何影响
.在回调的过程中.所有的浏览器除了IE外,其他浏览器不支持自动记住滚动条的位置,就算是IE,当页面刷新的时候,滚动条也会滚动.
.回调过程中__VIEWSTATE的增加会占用大量的贷款,特别是使用gridview或者repeater等数据控件时
.目前没有统一的用Javascript或者其他的客户端的技术调用Webservice的处理模型.
AJAX 是Asynchronous Javascript And XML 的缩写.它是一种通过跨平台Javascript来更新页面的集成框架.Ajax由服务端技术,AJAX框架和一种叫做Microsoft Ajax Script Library的脚本组件组成.此外.Asp.Net AJAX 扩展还为Javascript访问WebService提供了跨平台的支持.
本文主要讲解关于ASP.NET AJAX Extensions页面局部刷新的相关功能.包括:ScriptManager组件,UpdatePanel控件,UpdateProgress控件以及如果利用这些控件.
本文运行的平台,Visual Studio 2008 Beta2和.NET Framework3.5(已经把AJAX Extensions 整合为基本类库,在.NET2.0还是还是插件的形式),本文假设你使用的vs2008而不是Visual Web Developer Express Edition,因为在Express 版本中不包括本文用到的一些工程模板.
Partial Page Updates
ASP.NET AJAX Extensions 中最吸引人的就是页面的局部刷新和不通过对服务端的完整的回调而实现页面刷新的技术.优点是不言而喻的.比如你播放的影音(像Adobe Flash,Windows Media)不会重新开始,比以往占用更少的带宽,当进行回调的时候页面并感觉不到闪烁等等.
练习1:在现有项目中整合局部刷新
本练习用Visual C#创建,但是代码分别用Visual C#和Visaul Basic 呈现.但是前台文件只是显示了跟C#相关的文件.你可以通过@Page Directives 使用C#或者是Visual Basic后台代码.
1):打开VS2008,通过New->Web Site...在弹出的对话框中选择"ASP.net web Site",你可以随便命名,也可以随意选择创建方式,文件系统或者是IIS.
2):在新打开的空白页上,拖进去一个Label 和一个Button,你可以通过他们的属性修改他们的text属性.
3):在视图的状态下,双击Button1进入后台代码页面.在button1的事件中增加下列代码"Label1.Text='You Click the Button'".
Listing1:default.aspx的前台代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div> <asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
[b] Listing 2: Codebehind (trimmed) in default.aspx.cs
public partial class _Default : System.Web.UI.Page
3
6<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7
8<html xmlns="http://www.w3.org/1999/xhtml" >
9<head runat="server">
10 <title>无标题页</title>
11</head>
12<body>
13 <form id="form1" runat="server">
14 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
15 </asp:ScriptManager>
16 <div>
17 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
18 <ContentTemplate>
19 <asp:Label ID="Label1" runat="server" Text="Label" Width="153px"></asp:Label>
20 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
21 </ContentTemplate>
22 </asp:UpdatePanel>
23 </div>
24 </form>
25</body>
26</html>
27
11)打开你的webconfig,发现vs2008自动在webconfig中添加了对System.Web.Extensions.dll的引用
12)F5运行.你就可以看到Ajax的妙处了.
由于本人第一次进行翻译,有翻译不准,不正确的地方,望大家批评指正
笑Q
系列一:局部刷新Partial Page Updates
介绍(introduction)
微软的.net是基于面向对象和事件驱动的编程技术.但是它的基于服务端的处理存在很多内在的缺点.
.页面的更新需要一个往返的服务器的访问,这需要页面的刷新.
.像javascript和其他的基于客户端的技术(像Adobe Flash),他们的请求对服务端并不产生任何影响
.在回调的过程中.所有的浏览器除了IE外,其他浏览器不支持自动记住滚动条的位置,就算是IE,当页面刷新的时候,滚动条也会滚动.
.回调过程中__VIEWSTATE的增加会占用大量的贷款,特别是使用gridview或者repeater等数据控件时
.目前没有统一的用Javascript或者其他的客户端的技术调用Webservice的处理模型.
AJAX 是Asynchronous Javascript And XML 的缩写.它是一种通过跨平台Javascript来更新页面的集成框架.Ajax由服务端技术,AJAX框架和一种叫做Microsoft Ajax Script Library的脚本组件组成.此外.Asp.Net AJAX 扩展还为Javascript访问WebService提供了跨平台的支持.
本文主要讲解关于ASP.NET AJAX Extensions页面局部刷新的相关功能.包括:ScriptManager组件,UpdatePanel控件,UpdateProgress控件以及如果利用这些控件.
本文运行的平台,Visual Studio 2008 Beta2和.NET Framework3.5(已经把AJAX Extensions 整合为基本类库,在.NET2.0还是还是插件的形式),本文假设你使用的vs2008而不是Visual Web Developer Express Edition,因为在Express 版本中不包括本文用到的一些工程模板.
Partial Page Updates
ASP.NET AJAX Extensions 中最吸引人的就是页面的局部刷新和不通过对服务端的完整的回调而实现页面刷新的技术.优点是不言而喻的.比如你播放的影音(像Adobe Flash,Windows Media)不会重新开始,比以往占用更少的带宽,当进行回调的时候页面并感觉不到闪烁等等.
练习1:在现有项目中整合局部刷新
本练习用Visual C#创建,但是代码分别用Visual C#和Visaul Basic 呈现.但是前台文件只是显示了跟C#相关的文件.你可以通过@Page Directives 使用C#或者是Visual Basic后台代码.
1):打开VS2008,通过New->Web Site...在弹出的对话框中选择"ASP.net web Site",你可以随便命名,也可以随意选择创建方式,文件系统或者是IIS.
2):在新打开的空白页上,拖进去一个Label 和一个Button,你可以通过他们的属性修改他们的text属性.
3):在视图的状态下,双击Button1进入后台代码页面.在button1的事件中增加下列代码"Label1.Text='You Click the Button'".
Listing1:default.aspx的前台代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div> <asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
[b] Listing 2: Codebehind (trimmed) in default.aspx.cs
public partial class _Default : System.Web.UI.Page
3
6<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7
8<html xmlns="http://www.w3.org/1999/xhtml" >
9<head runat="server">
10 <title>无标题页</title>
11</head>
12<body>
13 <form id="form1" runat="server">
14 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
15 </asp:ScriptManager>
16 <div>
17 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
18 <ContentTemplate>
19 <asp:Label ID="Label1" runat="server" Text="Label" Width="153px"></asp:Label>
20 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
21 </ContentTemplate>
22 </asp:UpdatePanel>
23 </div>
24 </form>
25</body>
26</html>
27
11)打开你的webconfig,发现vs2008自动在webconfig中添加了对System.Web.Extensions.dll的引用
12)F5运行.你就可以看到Ajax的妙处了.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 微软AJAX 教学系列第一讲:ScriptManager控件
- Asp.Net Ajax系列(二) 局部页面呈现（Partial-Page Rendering）
- Asp.Net Ajax系列(二) 局部页面呈现（Partial-Page Rendering）
- MrXie 之Asp.Net Ajax系列(二) 局部页面呈现（Partial-Page Rendering）
- 微软AJAX 教学系列第一讲:ScriptManager控件
- Asp.Net Ajax系列(二) 局部页面呈现（Partial-Page Rendering）
- MVC中局部刷新PartialView(与Ajax.BeginForm结合)的用法
- Understanding Partial Page Updates with ASP.NET AJAX
- Ajax局部刷新例子
- EF5+MVC4系列(11)在主视图中用Html.RenderPartial调用分部视图(ViewDate传值);在主视图中按钮用ajax调用子action并在子action中使用return PartialView返回分布视图(return view ,return PartialView区别)
- layui的checbox在Ajax局部刷新下的设置
- ajax局部刷新
- web开发（四）之ajax局部刷新
- ASP.Net网站开发ajax局部刷新问题
- ajax局部刷新 (三种方法都可以）
- Ajax实现网页无闪自动局部刷新(邮件接收提示)
- rails4 will_paginate ajax 局部刷新
- Ajax实现页面局部刷新
- ajax局部刷新 (三种方法都可以）