Ajax之三 Ajax服务器端控件(上)

简介: Ajax之三 Ajax服务器端控件

视频课:https://edu.csdn.net/course/detail/27107

[学习目标]


   理解并掌握ScriptManager控件的使用


   了解ScriptManager控件的使用


   理解并掌握Timer控件的使用


   理解并掌握UpdatePanel控件的使用


   理解并掌握UpdateProgress控件的使用


         【本章简介】


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


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


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


image.png

本章的下面几节将介绍这些服务器端控件,以及如何在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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
</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">
    <Scripts>
        <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>

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


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


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


n        UpdatePanel有两个重要的子元素,分别是和。


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


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


项目一:利用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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Untitled Page</title>
</head>
<body>
    <formid="form1" runat="server">
       <asp:ScriptManager ID="ScriptManager1"runat="server" />
       <div>
           <asp:UpdatePanel ID="UpdatePanel1"runat="server">
                <ContentTemplate>
                    <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();
    }
目录
相关文章
|
SQL 开发框架 前端开发
AJAX之四 Ajax控件工具集(下)
AJAX之四 Ajax控件工具集(下)
81 0
|
开发框架 前端开发 .NET
AJAX之四 Ajax控件工具集(中)
AJAX之四 Ajax控件工具集(中)
108 0
|
11月前
|
开发框架 JavaScript 前端开发
震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
104 8
|
8月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
176 3
|
9月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
110 22
|
9月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
174 4
|
10月前
|
开发框架 JavaScript 前端开发
|
Windows
LabVIEW中ActiveX控件、ActiveX服务器和类型库注册
LabVIEW中ActiveX控件、ActiveX服务器和类型库注册
364 4
|
XML 前端开发 JavaScript
AJAX如何向服务器发送请求?
AJAX如何向服务器发送请求?
158 0
|
开发框架 .NET 数据安全/隐私保护
Asp.Net第二章服务器端控件
Asp.Net第二章服务器端控件
86 0

热门文章

最新文章