ASP.NET AJAX基础控件
l2.1 ScriptManager控件
l2.1.1ScriptManager控件概述
ScriptManager控件包括在ASP.NET AJAX Extensions中,它提供处理页面上的所有ASP.NET AJAX组件(UpdatePanel、UpdateProgress等)的支持。并且生成相关的客户端代理脚本以便能够在客户端脚本中访问Web Service。所有需要支持ASP.NET AJAX的ASP.NET页面上只能有一个ScriptManager控件。在ScriptManager控件中我们可以指定需要的脚本库,或者指定通过 JS来调用的Web Service,以及调用AuthenticationService和ProfileService,还有页面错误处理等。
lASP.NET AJAX基础控件
使用ScriptManager控件之后,可以使用ASP.NET AJAX的如下特性:
lASP.NET AJAX库的客户端脚本功能。
l部分页面刷新。部分页面刷新使得也页面可以不用回发就能够改变特定区域的内容。其他的ASP.NET AJAX基础控件(如UpdatePanel、UpdateProgress和Timer控件)要求页面必须有一个 ScriptManager控件的支持
lASP.NET AJAX基础控件
2.1.2 ScriptManager控件的属性与方法
lASP.NET AJAX基础控件
l2.1.3 ScriptManager控件使用实例2-1
l<html xmlns="http://www.w3.org/1999/xhtml">
l<head runat="server">
l <title>Untitled Page</title>
l</head>
l<body>
l <form id="form1" runat="server">
lASP.NET AJAX基础控件
l<asp:ScriptManager ID="ScriptManager1" runat="server" />
l <asp:UpdatePanel ID="UpdatePanel1" runat="server">
l <ContentTemplate >
l <asp:Calendar ID="caledar1" ShowTitle ="true" runat="server" OnSelectionChanged="caledar1_SelectionChanged"></asp:Calendar>
lBackGround;
lASP.NET AJAX基础控件
l<br />
l <asp:DropDownList ID="list" AutoPostBack="true" runat="server" OnSelectedIndexChanged="list_SelectedIndexChanged">
l <asp:ListItem Selected="true" Value="White">White</asp:ListItem>
l <asp:ListItem Value="Silver">Silver</asp:ListItem>
l <asp:ListItem Value="DarkGray">DarkGray</asp:ListItem>
l <asp:ListItem Value="Khaki">Khaki</asp:ListItem>
l <asp:ListItem Value="DarkKhaki">DarkKhaki</asp:ListItem>
l </asp:DropDownList>
lASP.NET AJAX基础控件
l Selected Date:
l <asp:Label ID="selecteddate" runat="server" >None</asp:Label>
l </ContentTemplate>
l </asp:UpdatePanel>
l </form>
l</body>
l</html>
lASP.NET AJAX基础控件
l protected void caledar1_SelectionChanged(object sender, EventArgs e)
l {
l selecteddate.Text = caledar1.SelectedDate.ToString();
l }
l protected void list_SelectedIndexChanged(object sender, EventArgs e)
l {
l caledar1.DayStyle.BackColor = System.Drawing.Color.FromName(list.SelectedItem.Value);
l }
lASP.NET AJAX基础控件
上面的实例使用的ScriptManager控件和
UpdatePanel控件实现部分刷新显示的例子。
lASP.NET AJAX基础控件
2.2 ScriptManagerProxy控件
2.2.1 ScriptManagerProxy控件概述
ScriptManagerProxy控件与ScriptManager控件的作用几乎一样。区别在于,一个页面中只允许出现一个 ScriptManager控件。因此,如果这个页面中有ScriptManger控件,那么使用的用户自定义控件中就不能再有一个 ScriptMager控件。这时,就只能在用户自定义控件中使用ScriptManagerProxy控件。
lASP.NET AJAX基础控件
2.2.2 ScriptManagerProxy控件属性与方法
lASP.NET AJAX基础控件
2.2.3 ScriptManagerProxy控件使用实例2-2
l<%@ Control Language="C#" ClassName="scriptmanagerproxy" %>
l<script runat="server">
l protected void btn1_Click(object sender, EventArgs e)
l {
l lbl.Text = DateTime.Now.ToString();
l }
l</script>
l<asp:ScriptManagerProxy ID="smp1" runat="server">
l</asp:ScriptManagerProxy>
l<asp:UpdatePanel ID="up1" runat="server">
l <ContentTemplate >
l <asp:Button ID="btn1" runat="server" Text="Button" OnClick="btn1_Click" />
l <asp:Label ID="lbl" runat="server" ></asp:Label>
l </ContentTemplate>
l</asp:UpdatePanel>
lASP.NET AJAX基础控件
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="~/scriptmanagerproxy.ascx" TagPrefix="uc"TagName="aa" %>
l<html xmlns="http://www.w3.org/1999/xhtml">
l<head runat="server">
l <title>Untitled Page</title>
l</head>
l<body>
l <form id="form1" runat="server">
l <asp:ScriptManager ID="ScriptManager1" runat="server" />
l <div>
l <uc:aa ID="cc" runat="server" />
l </div>
l </form>
l</body>
l</html>
lASP.NET AJAX基础控件
2.3 UpdatePanel控件
2.3.1 UpdatePanel控件概述
通过使用UpdatePanel控件,可以仅仅刷新页面中选中的部分内容,而不是将整个页面回发—这通常称作部分页面更新。具有一个 ScriptManager控件和一个或多个UpdatePanel控件的页面能自动控制部分页面更新,而不用编写专门的客户端脚本。
lASP.NET AJAX基础控件
2.3.2 UpdatePanel控件属性与方法
lASP.NET AJAX基础控件
UpdatePanel控件中还有两个重要的属性是ContentTemplate属性和Triggers属性。 ContentTemplate属性用于定义UpdatePanel控件的内容;而Triggers属性有两种,一种是 AsyncPostBackTrigge,用于异步回传UpdatePanel中服务器控件引发的事件,另一种是PostBackTrigge,用于表示 UpdatePanel控件中的服务器控件引发的事件采用传统的整页回传方式
lASP.NET AJAX基础控件
UpdatePanel控件属性设定在部分显示过程中什么时候刷新UpdatePanel控件的内容,如下说明:
1、如果UpdateMode属性设置为Always,UpdatePanel控件的内容在页面中任何一个回发后都会更新,包括UpdatePanel控件内部的控件所产生的异步回发以及UpdatePanel控件外部的控件产生的回发
lASP.NET AJAX基础控件
2、如果UpdateMode属性设置为Codition,那么在以下条件下更新内容:
(1)当UpdatePanel控件的trigger引发回发时
(2)当显示调用UpdatePanel的Update()方法时
(3)当UpdatePanel控件嵌入在UpdatePanel控件中,并且父控件更新时
lASP.NET AJAX基础控件
3、如果ChildrenAsTriggers属性设置为False而UpdateMode属性设置为Always,会引发异常。也就是说,当UpdateMode属性设置为Conditional时,才使用ChildrenAsTriggers属性
lASP.NET AJAX基础控件
2.3.3 UpdatePanel控件使用实例
默认情况下,任何UpdateControl控件中回发的控件会引发异步回发,并更新UpdatePanel控件中的内容。当然,也可以指定页面中哪个控 件来刷新UpdatePanel控件,通过定义UpdatePanel控件的Triggers集合可以做到这一点。当Triggers集合中的事件触发 时,就会引发UpdatePanel控件中的内容刷新。
lASP.NET AJAX基础控件
l示例1利用Triggers指定UpdatePanel有条件的更新
l<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
l <asp:Button ID="btn" runat="server" Text="button" OnClick="btn_Click" />
l <asp:UpdatePanel ID="up1" runat="server" UpdateMode ="Conditional">
l <ContentTemplate>
l <asp:Label ID="dd" runat="server" ></asp:Label>
l </ContentTemplate>
l <Triggers>
l <asp:AsyncPostBackTrigger ControlID="btn" EventName="click" />
l </Triggers>
l </asp:UpdatePanel>
lASP.NET AJAX基础控件
lprotected void btn_Click(object sender, EventArgs e)
l {
l dd.Text = DateTime.Now.ToString();
l }
lASP.NET AJAX基础控件
从前面的例子中可以看到,不论有条件地更新还是无条件地更新,只要进行异步更新,就会更新UpdatePanel中的内容。如果把网页中所有的元素都放在UpdatePanel控件中会增加页面更新的时间,使页面反应迟钝。用户体验并不好。
lASP.NET AJAX基础控件
有两种办法解决这个问题
一种是使用UpdateProgress控件提示更新状态,但这种办法并不能缩短更新时间,无法有效地提高更新效率
另一种是在多个UpdatePanel控件中实现局部更新。当用户单击某个按钮时,不会引起大面积内容的更新,此时就根据需要决定哪一个UpdatePanel的需要异步更新
lASP.NET AJAX基础控件
示例2在多个UpdatePanel中实现局部更新
l<div>
l <asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
l <asp:UpdatePanel ID="UpdatePanel1" runat="server">
l <ContentTemplate>
l <fieldset style="width:167px">
l <legend>UpdatePanel1</legend>
l <asp:ListBox ID="listbox1" runat="server" Width="185px"></asp:ListBox>
l </fieldset>
l </ContentTemplate>
l <Triggers>
l <asp:AsyncPostBackTrigger ControlID="add" EventName="Click" />
l <asp:AsyncPostBackTrigger ControlID="delete" EventName="Click" />
l </Triggers>
l </asp:UpdatePanel>