微软AJAX 教学系列第一讲:局部刷新Partial Page Updates(翻译)
最新看到.NET官方网http://www.asp.net上推出了最新的AJAX系列教程.正好最近有不忙,所以决定翻译过来共大家参考. 由于本人第一次进行翻译,有翻译不准,不正确的地方,望大家批评指正 笑Q
最新看到.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的前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
Listing 2: Codebehind (trimmed) in default.aspx.cs
public partial class _Default : System.Web.UI.Page
{
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "You clicked the button!";
}
}
4)F5运行你的程序.vs2008会提示你是否增加web.config文件.选择"是".然后单击Button,你会发现Label的text变化了.而且同时你能看到页面很明显的刷新.
5)关掉你的IE,回到vs2008和default页面.在工具箱中找到标签"AJAX Extensions"如图1.1,如果你找不到,说明你的AJAX 或者是Atlas 版本太旧,你需要做的就是安装最新的AJAX版本.
(图1.1)
6):拖进去一个UpdatePanel控件,在源文件中你可以看到多了一个@register 指令.它表明了Updatecontrol 所在的Namespace以及使用这个控件时的前缀"ASP"
7)把</asp:UpdatePanel> 拖到Button 后面,让创建的label和button包含在UpdatePanel控件内!
8)紧接着在UpdatePanel内创建一个新tag<ContetnTemplate>如下图.
(图1.2)
9)在页面上拖进去一个ScriptManager控件.
10)修改 ScriptManager的属性EnablePartialRendering=”true”.
Listing 3: Markup for default.aspx with partial rendering enabled
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的前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>public partial class _Default : System.Web.UI.Page { protected void Button1_Click(object sender, EventArgs e) {
Label1.Text = "You clicked the button!"; }}5)关掉你的IE,回到vs2008和default页面.在工具箱中找到标签"AJAX Extensions"如图1.1,如果你找不到,说明你的AJAX 或者是Atlas 版本太旧,你需要做的就是安装最新的AJAX版本.
(图1.1)6):拖进去一个UpdatePanel控件,在源文件中你可以看到多了一个@register 指令.它表明了Updatecontrol 所在的Namespace以及使用这个控件时的前缀"ASP"
7)把</asp:UpdatePanel> 拖到Button 后面,让创建的label和button包含在UpdatePanel控件内!
8)紧接着在UpdatePanel内创建一个新tag<ContetnTemplate>如下图.
(图1.2)9)在页面上拖进去一个ScriptManager控件.
10)修改 ScriptManager的属性EnablePartialRendering=”true”.
Listing 3: Markup for default.aspx with partial rendering enabled
1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2
3<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
4 Namespace="System.Web.UI" TagPrefix="asp" %>
5
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的引用<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>2
3
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"4
Namespace="System.Web.UI" TagPrefix="asp" %>5
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
12)F5运行.你就可以看到Ajax的妙处了.
