Ajax之三 Ajax服务器端控件

[学习目标]

F理解并掌握ScriptManager控件的使用

F了解ScriptManager控件的使用

F理解并掌握Timer控件的使用

F理解并掌握UpdatePanel控件的使用

F理解并掌握UpdateProgress控件的使用

【本章简介】

Ajax Extensions是Asp.NetAJAX框架的核心组件，只有使用它提供的服务，才能实现局部刷新和个性化组件的AJAX效果。

AJAXExtensions是整个Asp.NetAJAX框架的灵魂，它提供全局脚本的管理控制，提供异步获取数据功能，提供页面中某一部分的局部更新，还可以使用定时器实现任务的自动执行。

AJAXExtensions核心组件主要包括以下几个控件：ScriptManager、UpdatePanel、UpdateProgress、Timer和ScriptManagerProxy，下面我们对其中主要的控件逐一进行讲解。

Ajax Extensions	描述
ScriptManager	管理支持 AJAX 的 ASP.NET 网页的客户端脚本。默认情况下，ScriptManager 控件会向页面注册 Microsoft AJAX Library 的脚本。这将使客户端脚本能够使用类型系统扩展并支持部分页呈现和 Web 服务调用这样的功能。注意一个页面只能有一个该控件。
ScriptManagerProxy	当已在父元素中定义 ScriptManager 控件时，使嵌套组件（如内容页和用户控件）可以将脚本和服务引用添加到页中。比如ScriptManager位于master页面，该控件位于内容页面（子页面）。
Timer	按定义的时间间隔执行回发。如果将 Timer 控件用于 UpdatePanel 控件，则可以按定义的时间间隔启用部分页更新。也可以使用 Timer 控件来发送整个页面。
UpdatePanel	可生成功能丰富的、以客户端为中心的 Web 应用程序。通过使用 UpdatePanel 控件，可以刷新页的选定部分，而不是使用回发刷新整个页面。这称为执行“部分页更新”。包含一个 ScriptManager 控件和一个或多个 UpdatePanel 控件的 ASP.NET 网页可自动参与部分页更新，而不需要自定义客户端脚本。
UpdateProgress	来显示部分页更新的进度。如果页包含 UpdatePanel 控件，则也可以包含 UpdateProgress 控件，以便通知用户部分页更新的状态。可以使用一个 UpdateProgress 控件来表示整个页的部分页更新的进度。或者，可以为每个 UpdatePanel 控件包含一个 UpdateProgress 控件。

本章的下面几节将介绍这些服务器端控件，以及如何在Asp.Net程序中使用它们。

3.1 ScriptManager控件

在Asp.Net AJAX领域中，最重要的控件是ScriptManager服务器端控件，它处理页面，允许进行部分页面的呈现。每个要使用Asp.Net AJAX功能的页面都需要使用一个ScriptManager控件。它又叫做全局脚本控制器，在每个页面上只能有一个，相当于在这个页面上注册框架。

ScriptManager控件负责管理在页面上使用的JavaScript库，并在服务器和客户机之间来回编组信息，完成部分页面的呈现过程。

如果仅在Asp.Net页面上放置了ScriptManager控件，它就会负责加载Asp.Net AJAX需要的JavaScript库。

注意：

页上使用 ScriptManager 控件注册的任何脚本以及所有事件处理脚本必须位于页上的 form 元素内。否则，将不会注册或执行脚本。

ScriptManager控件的语法格式:

<asp:ScriptManager ID=＂ScriptManager1＂ runat=＂server＂>

</asp:ScriptManager>

3.2 ScriptManagerProxy控件

一个网页只能包含一个 ScriptManager 控件，该控件既可以直接位于页面中，也可以间接位于嵌套组件或父组件内部。使用 ScriptManagerProxy 控件，可在母版页或宿主页已包含 ScriptManager 控件的情况下，将脚本和服务添加到内容页和用户控件中。

在使用 ScriptManagerProxy 控件时，可以将脚本和服务添加到 ScriptManager 控件所定义的脚本和服务集合。如果不希望在包含特定 ScriptManager 控件的每一页上都包含特定的脚本和服务，则可以将这些脚本和服务从 ScriptManager 控件中移除。可以通过改用 ScriptManagerProxy 控件，将这些脚本和服务添加到各页中。

在VisualStudio2005项目中模板页上添加ScriptManager之后，最简单的页面代码如下程序清单3-1所示：

程序清单3-1

<%@Master Language="C#" AutoEventWireup="true"CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<formid="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1"runat="server">

</asp:ScriptManager>

<asp:contentplaceholder id="ContentPlaceHolder1"runat="server">

</asp:contentplaceholder>

</div>

</form>

</body>

</html>

在VisualStudio 2008母版也上，有直接添加AJAX Master Page的选项。

如果正在使用Asp.Net2.0的母版页，而且同时还在使用Asp.Net AJAX框架，你可能会考虑把ScriptManager控件放在模板页而不是每个内容页中。然而，当需要在某个内容页上引用JavaScript文件或Web服务时就会遇到麻烦了。由于每个页面上只能有一个ScriptManager控件，因此不得不在每一个使用Asp.Net AJAX的页面上引用JavaScipt文件或服务，哪怕某些页面根本就不需要那些外部资源。

为了解决这个问题，Asp.NetAJAX 提供了ScriptManagerProxy控件。这个控件与ScriptManager的功能一样，当页面上已经有一个ScriptManager控件的时候，就可以使用它了。

<asp:ScriptManagerProxy ID=＂ScriptManagerProxy1＂ runat=＂server＂>

<asp:ScriptReferencePath=＂MyScript.js＂/>

</Scipts>

</asp:ScriptManagerProxy>

当某个宿主页面上已经有一个ScriptManager控件，而又需要向其添加一个拥有AJAX功能的Asp.Net用户控件时，ScriptManagerProxy控件也同样可以派上用场。

3.2 UpdatePanel控件

UpdatePanel控件又叫做更新面板，它用来实现页面的无刷新效果。在使用时，只需要把更新的内容放在该控件的内容面板中即可。

UpdatePanel控件是一个容器控件，这表示它没有相关的UI项。它是引发部分页面会送的方式，仅更新UpdatePanel指定的部分页面。

UpdatePanel的语法格式：

<asp:UpdatePanel ID=＂UpdatePanel1＂ runat=＂server＂ UpdateMode=＂Always＂>

</asp:UpdatePanel>

nUpdatePanel 控件又一个重要的属性UpdateMode,它表示该更新面板采用何种方式来获取服务器端的资源。它有两种模式：Always和Conditional。

üAlways模式表示，在每次客户端浏览器向服务器端请求的时候，都无条件刷新该更新面板中的内容。

üConditional模式表示，有触发条件的更新。该触发条件可能是某一个控件的事件，或者其他可以引起更新的条件等。

nUpdatePanel有两个重要的子元素，分别是<ContentTemplate>和<Trigger>。

ü<ContentTemplate>元素是更新面板的内容面板，这和GridView等控件的模板类似，可以在其中添加任何控件。

ü<Triggers>元素是可以更新面板的触发器，只有在触发条件满足后才更新<ContentTemplate>元素中的内容。

项目一：利用UpdatePanel实现局部更新时间

1.建立一个包含ScriptManager和UpdatePanel的页面，在UpdatePanel上添加一个标签和按钮控件，在外部页面也加一个标签控件,程序代码如程序清单：

程序清单3-2 利用UpdatePanel实现局部更新时间

<%@ Page Language="C#"AutoEventWireup="true" CodeFile="Default.aspx.cs"Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Untitled Page</title>

</head>

<body>

<formid="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1"runat="server" />

<div>

<asp:UpdatePanel ID="UpdatePanel1"runat="server">

<asp:LabelID="Label1" runat="server"Text="Label"></asp:Label>

<asp:ButtonID="Button1" runat="server"OnClick="Button1_Click" Text="Button" />

</ContentTemplate>

</asp:UpdatePanel>

<asp:Label ID="Label2" runat="server" Text="外部时间"></asp:Label></div>

</form>

</body>

</html>

2. C# 代码为：

protected voidPage_Load(object sender,EventArgs e)

{

Label2.Text = DateTime.Now.ToString();

}

protected void Button1_Click(object sender,EventArgs e)

{

Label1.Text = DateTime.Now.ToString();

}

项目二：利用UpdatePanel实现局部更新数据表 内容

1.在创建好的3-2项目中添加一个ScriptManager、UpdatePanel、GridView和一个按钮控件到页面。

2.数据表内容为某银行客户的数据表，如图3-1所示：

图3-1：某银行客户交易信息表

3.该文件的HTML关键代码如程序清单3-3所示：

程序清单3-3利用UpdatePanel实现局部更新数据表内容1

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Untitled Page</title>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1"runat="server"/>

<div>

<asp:UpdatePanel ID="UpdatePanel1"runat="server">

<asp:GridView ID="gvUserData"runat="server"Width="800px">

</asp:GridView>

<asp:Button ID="btnRefresh"runat="server"Text="刷新" Width="135px"OnClick="btnRefresh_Click"/>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

4. 然后，我们把GridView绑定到表userdata表，需要用户自己建立数据库Bank，查询交易记录在前三条的账户信息。

后台的关键代码如程序清单3-4所示：

程序清单3-4：利用UpdatePanel实现局部更新数据表内容2

protected void Page_Load(objectsender, EventArgs e)

{

if (!Page.IsPostBack)

{

ShowUserData();

}

protected voidbtnRefresh_Click(object sender, EventArgs e)

{

ShowUserData();

}

/*从数据库读数据的方法.*/

public voidShowUserData()

{

string selsql = "selecttop 3 * from userdata order by 记账日期desc";

gvUserData.DataSource = DBHelper.GetDataSet(selsql).Tables[0];

gvUserData.DataBind();

}

5.效果验证，运行程序，将显示数据库表userdata中的最近前三条数据，将数据库中的支出金额由“49.4”修改为“49.45”，点击“刷新”按钮，发现数据在页面无刷新的情况下改变,如图3-2所示。即浏览器的客户端按钮仍然为灰色不可用，因为尽管我们的数据更新了，但是并没有刷新浏览器，所以不涉及页面返回问题。

图3-2：修改数据库表并点击“刷新”按钮实现无刷新效果

该程序用到了Web.Config和DBHelper.Cs，详见项目3-2。

项目三：UpdatePanel实现触发器更新局部内容

从项目一和项目二我们知道，只要把需要数据更新的控件和触发数据更新的控件都放在UpdatePanel中就可以快速地实现AJAX效果了。但是，假如我们想利用UpdatePanel外的控件来控制数据更新，来实现AJAX效果呢？在此问题基础上，Asp.Net为UpdatePanel控件提供了一个重要属性Triggers，使用Triggers属性可以实现触发器效果。

下面来做个小案例，步骤如下：

1.新建WEB项目3-3，在页面中添加ScriptManager、UpdatePanel、Label和Button。该文件的HTML关键代码如程序清单3-5所示：

程序清单3-5：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Untitled Page</title>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1"runat="server"/>

<div>

<asp:UpdatePanel ID="UpdatePanel1"runat="server">

<asp:Label ID="lblMsg" runat="server"Text="Label"></asp:Label><br />

<asp:Button ID="btnDateTime"runat="server"Text="显示日期和时间" />

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

后台代码为：

protected void btnDateTime_Click(objectsender, EventArgs e)

{

lblMsg.Text= DateTime.Now.ToString();

}

运行程序，单击按钮会实现无刷新更新，但是如果我们把按钮放在UpdatePanel，效果如何呢？你会发现，单击“显示日期和时间”按钮后，页面被整个刷新，并没有达到无刷新的效果。如图3-3所示：

3.为了实现无刷新效果，只要使用UpdatePanel控件的Triggers属性即可。在HTML代码标签</ContentTemplate>后面添加如下代码：

<asp:AsyncPostBackTrigger ControlID=＂btnDateTime＂ Event=＂Click＂/>

</Triggers>

其中ControlID为用来生成该事件的控件ID，EventName用于刷新事件的名称。UpdatePanel另外一个触发器是PostBackTrigger用来实现整个页面的回送，一般不用。现在运行程序，单击按钮，发现控件即使在UpdatePanel外部也实现了无刷新效果。如图3-4所示：

3.3 Timer控件

Timer控件用于间隔一定的时间自动刷新页面或完成特定的任务。它是定时控件，在实际开发中，我们经常使用Timer控件来完成自动刷新功能，比如聊天室聊天内容的即时更新、“世界杯”比赛中的夺冠国家统计、电气考核指标的实时数据等，都可以通过使用Timber控件的定时功能来实现。使用Timer控件还可以打造属于Web的时钟以显示系统时间。

Timer控件仍然主要通过Interval属性和Tick事件来实现其功能，与Winform中的类似。

例如，现在要做一个实时更新的奥运金牌榜排行，就可以通过Timer控件来实现。

本案例可以参考项目三，需要在Web页面添加ScriptManager、UpdatePanel、Timer和GridView控件。

在UpdatePanel控件的</ContentTemplate>标签后，假如代码为：

<asp:AsyncPostBackTriggerControlID=　＂Timer1＂ EventTime=＂Tick＂/>

</Triggers>

在Timer_Click事件中写从数据库中获得安金牌、银牌、铜牌从高到低的前10个国家的排名sql语句即可。

其中Interval表示执行Tick任务的间隔时间，单位是毫秒，这样我们一秒钟更新一次数据，你可以根据需要设置Interval具体的值。

3.4 UpdateProgress控件

在现实的网络中，当我们打开某一个网站或链接时，由于种种原因经常要等待页面显示出来，这样的用户体验真的很差。如果能在页面执行较长时间操作的同时，给用户提供一个类似于浏览器状态栏那样的进度条，将会很大地改善用户体验。所以微软在ASP.NETAjax中为我们提供了UpdateProgress控件，它可以轻松的实现这样的功能。

在下面示例中，我们模拟一个缓慢的服务器处理过程，这将使Asp.Net AJAX在服务器端代码执行的过程中显示一个等待信息框。代码如程序清单3-6所示：

程序清单3-6：使用UpdateProgress的等待信息框

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdateProgress.aspx.cs" Inherits="_Default"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Untitled Page</title>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1"runat="server"/>

<div>

<asp:UpdatePanel ID="UpdatePanel1"runat="server">

<asp:Button ID="Button1"runat="server"OnClick="Button1_Click"Text="测试UpdateProgess控件" /><br />

<asp:Label ID="Label1" runat="server"Text="Label"></asp:Label>

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1"runat="server"AssociatedUpdatePanelID="UpdatePanel1">

<div style="font-weight:bold;border:solid 2px black;left: 200px; width: 194px; color: blue; position:relative;

top: 150px; height:20px; background-color: #ffff99;">

正在加载数据，请稍候...

</div>

</ProgressTemplate>

</asp:UpdateProgress>

</div>

</form>

</body>

</html>

using System.Data;

using System.Configuration;

using System.Web;

usingSystem.Web.Security;

using System.Web.UI;

usingSystem.Web.UI.WebControls;

usingSystem.Web.UI.WebControls.WebParts;

usingSystem.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page

{

protected voidPage_Load(object sender, EventArgs e)

{

}

protected voidButton1_Click(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(3000);

Label1.Text= DateTime.Now.ToLongDateString();

}

注意：如果异步回发只需要很少的时间，UpdateProgress控件显示的时间也就会很短，这样造成一个让人很不舒服的闪烁效果。这时，可能就需要使用UpdateProgress控件的DisplayAfter属性。该属性指定在显示UpdateProgress控件的<ContentTemplate>中的内容之前所需要等待的毫秒数，设置一定的延迟可以避免闪烁效果。

@本章总结

1.本章介绍了Asp.Net AJAX的服务器控件。

2.ScriptManager控件在每一个Asp.Net AJAX页面上都要有，并且只能有一个。

3.常常把需要更新的内容放在UpdatePanel控件的内容模板中，以实现无刷新效果。

4.UpdatePanel控件的Triggers属性，一般在其UpdateMode属性设置为Conditional时用到。

5.UpdateProgress控件用来在更新过程中给出提示。

6.Timer控件可以用来做时钟显示系统时间，也可以定时完成特定的任务，它主要使用Interval属性和Tick属性来实现。

& 课后练习

1.以下不属于Asp.Net AJAX核心组件的是（）

A.ScriptManager

B.Timer

C.UpdatePanel

D.Calendar

2.以下关于ScriptManager控件的描述正确的是（）（选两项）

A.它是更新面板，需要把更新的部分放在该控件的模版中。

B.它在每个Asp.Net AJAX页面中都必须有。

C.它是客户端控件，不需要设置“runat=server”。

D.它在每个Asp.Net AJAX页面中只能有一个。

3.以下关于UpdatePanel控件的描述不正确的是（）

A.它是更新面板，实现无刷新时，常把需要更新的部分放在该控件的模板中。

B.它的UpdateMode属性，可以设置为Always或Conditional。

C.当UpdateMode属性设置为Always时，Triggers属性不生效。

D.当UpdateMode属性设置为Conditional时，Triggers属性不生效。

Ajax之三 Ajax服务器端控件

3.1 ScriptManager控件

3.2 ScriptManagerProxy控件

3.2 UpdatePanel控件

项目一：利用UpdatePanel实现局部更新时间

项目二：利用UpdatePanel实现局部更新数据表内容

项目三：UpdatePanel实现触发器更新局部内容

3.3 Timer控件

3.4 UpdateProgress控件

猜你在找的Ajax相关文章