AJAX的基础控件.

 

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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值