在 Web 应用中,导航是非常重要的。ASP

Slides:



Advertisements
Similar presentations
第14章 表单 在制作动态网页时,要实现信息交互,常常用到表单。 常见的表单有搜索表单、用户登录注册表单、调查表 单、留言簿表单等。本章节将和大家一起探讨在表单 的基本概念和各个元素,以及在Dreamweaver CS4中 如何创建表单,并通过实例掌握表单制作的方法。
Advertisements

第六章 网页设计与制作基础.
Task #3 使用ASP.NET服务器控件创建页面.
Web与信息检索 LJ JUFE-SIT.
网页制作 第一讲
动态网页制作 第1章 HTML语言1.
网站如何定制建设???.
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
学习情境三:配置WEB服务器 服务器配置与管理.
第五单元课1-3 层叠样式表.
第13章多项目设计与开发.
《ASP.NET数据库网站设计教程(C#版)》
第6章 HTML控件和Web服务器控件 本章讲述的主要内容 6.1 ASP.NET控件概述 6.2 标准服务器端控件 6.3 数据验证控件
類別與物件 Class & Object.
RWD網頁設計實務 李欣螢 以誠研發有限公司.
《计算机网络技术》 asp.net 程序设计 文本类控件 笪静.
5.1 – 表格(FORM) 輸入元素 : 兩種傳遞方法 : GET or POST 範例 1. 文字欄位 Text box
第三章 控制结构.
Ch07 PHP程式基礎 網頁程式設計.
Ch03 VB.NET語法建立ASP.NET 網頁程式設計.
《ASP.NET数据库网站设计教程(C#版)》
Ajax编程技术 第十章 使用外部数据.
HTML5全栈开发序列课程 《前端入门》之HTML入门 余鹏作品.
Google 自訂搜尋 淡江大學資訊中心 專案發展組 朱家璁 2009/10/6.
《ASP.NET数据库网站设计教程(C#版)》
第 2 章 必備的 HTML 與 CSS 重點.
Chapter 4 基本伺服器控制項.
Asp.net 基礎.
Ch11 檔案上傳及電子郵件 WEB程式設計.
HTML 钟晖云 QQ:
客戶端的檔案上傳 HtmlInputFile檔案控制項 上傳單一檔案 同時上傳多個檔案.
第一章: Java Web 开发技术概述.
JavaScript 靜宜大學 資管系 楊子青.
讲课人:王璞 浙江工商职业技术学院.
5.5.1 存储过程的优点 ① 事务处理 ② 速度和性能 ③ 过程控制 ④ 安全性 ⑤ 减少网络流量和通信 ⑥ 模块化
第14章 伺服器檔案、電子郵件處理與Ajax 14-1 資料夾與檔案操作 14-2 文字檔案的讀寫 14-3 電子郵件與附檔處理
委派與執行緒 建國科技大學 資管系 饒瑞佶.
PHP 程式流程控制結構.
第15章 豐富控制項.
C#面向对象程序设计 $7 继承和多态性.
第5章 .NET框架类 5.
FormView 控件只能显示数据库中一行的数据,并且提供对数据的分页操作,FormView 控件可以以 一种不规则的外观来将数据呈现给用户。FormView 控件同样支持模板,以方便开发人员自定义 FormView 控件的 UI,FormView 控件支持的模板如下所示: ItemTemplate:用于在.
第4章 使用验证控件.
視窗程式設計 (Windows Programming)
主 讲 教 师:陆有军 Web技术与应用 第四章 内部对象 主 讲 教 师:陆有军
課程名稱:_____________ 指導教授:_____________
第3章 ASP.NET程序设计基础 3.
网站设计 前端 选择器(复习),表单.
第2章 初识Dreamweaver CS4 Adobe Dreamweaver CS4是建立Web站点和应用程序的 专业工具。它将可视布局工具、应用程序开发功能和 代码编辑支持组合在一起,其功能强大,使得各个层 次的开发人员和设计人员都能够快速创建界面吸引人 的基于标准的网站和应用程序。从对基于CSS的设计.
第4章 ASP.NET的HTTP物件、輸出入與Cookie處理
HTML 103 互動式網頁.
大專院校美食網- 以新北市為例 商務科技管理專題 組 別: 第二組 專題成員: 方采薇 陳宜欣
蓝色图示 — 无动画版.
第13章 CSS 通过CSS可以使用更丰富、更灵活的样式,更简单地 设计出更美观的网页。同时,也让网页的设计与维护 更有效率。CSS在网页设计中的作用尤为重要,是网 页设计师必备的知识。本章首先介绍什么是CSS、CSS 的基本语法等基础知识,接着学习利用“CSS”面板 管理规则,如何在Dreamweaver中创建与应用CSS样式.
劉崇汎 崑山科技大學 電腦與通訊系 DLL的建立與引用 劉崇汎 崑山科技大學 電腦與通訊系
Ajax编程技术 第六章 调试与错误处理.
Ch09 在網頁之間傳遞資訊 網頁程式設計.
补充:c#语言基础.
C# 基本語法、變數.
1 Session对象的特性 Session 状态对象 Session 对象常用的方法有: Session 对象常用的属性有:
第4章 ASP.NET服务器控件.
HTML 103 互動式網頁 助教:黃毓瑩.
向导控件的样式 当创建了一个向导控件时,系统会自动生成向导控件的 HTML 代码,示例代码如下所示。
第1章 ASP.NET基础.
ASP动态网页设计实用教程 主讲教师:贾海陶.
PHP程式設計 五、程式流程控制結構 建國科技大學 資訊管理學系 饒瑞佶.
C# 匿名委派 + Lambda + Func 建國科技大學 資管系 饒瑞佶.
第二章 Java基本语法 讲师:复凡.
表单页面 表单是用户利用浏览器对Web站点网络数据库进行查询的一种界面,用户利用表单可以输入信息或选择选项等,然后将这些信息提交给服务器进行处理。通过表单,既可以将浏览器的信息发送到Internet服务器上,同时表单也可以使用户与站点的浏览者交互或从浏览者那里收集信息。它是网页的设计者和使用者相互交流的工具。表单对象包括文本域(单行、多行、密码)、列表、菜单、复选框、单选框、按钮等。
Presentation transcript:

在 Web 应用中,导航是非常重要的。ASP 在 Web 应用中,导航是非常重要的。ASP.NET提供了站点导航的一种简单的方法,导航控件包括SiteMapPath、TreeView、Menu三个控件,这三个控件都可以在页面中轻松建立导航。 这三个导航控件的基本特征如下所示: SiteMapPath:检索用户当前页面并显示层次结构的控件。这使用户可以导航回到层次结构中的 其他页。SiteMap 控件专门与 SiteMapProvider 一起使用。 TreeView:提供纵向用户界面以展开和折叠网页上的选定节点,以及为选定像提供复选框功能。 并且 TreeView 控件支持数据绑定。 Menu:提供在用户将鼠标指针悬停在某一项时弹出附加子菜单的水平或垂直用户界面。

三个导航控件中,SiteMapPath控件使用户能够从当前导航回站点层次结构中较高的页,但是该控件并不允许用户从当前页面向前导航到层次结构中较深的其他页面。使用TreeView或Menu控件,用户可以打开节点并直接选择需要跳转的特定页。TreeView和Menu控件不仅可以自定义选项,也可以绑定一个SiteMapDataSource。TreeView和Menu控件的基本样式如左图和右图所示。

</asp:TreeView> TreeView和Menu控件生成的代码并不相同,因为TreeView和Menu控件所实现的功能也不尽相同TreeView和Menu控件的代码分别如下所示。 <asp:Menu ID="Menu1" runat="server"> <Items> <asp:MenuItem Text="新建项" Value="新建项"></asp:MenuItem> <asp:MenuItem Text="新建项" Value="新建项"> </asp:MenuItem> </Items> </asp:Menu> <asp:TreeView ID="TreeView1" runat="server"> <Nodes> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"> <asp:TreeNode Text="新建节点" Value="新建节点 "></asp:TreeNode> </asp:TreeNode> </Nodes> </asp:TreeView>

从上面的代码和运行后的实例图可以看出,TreeView 和 Menu 控件有一些区别,这些具体区别如下所示: Menu 展开时,是弹出形式的展开,而TreeView控件则是就地展开。 Menu 控件并不是按需下载,而TreeView控件则是按需下载的。 Menu 控件不包含复选框,而TreeView控件包含复选框。 Menu 控件允许编辑模板,而TreeView控件不允许模板编辑。 Menu 在布局上是水平和垂直,而TreeView只是垂直布局。 Menu 可以选择样式,而TreeView不可以选择样式。 开发人员在网站开发的时候,可以通过使用导航控件来快速的建立导航,为浏览者提供方便,也为网站做出信息指导。在用户的使用中,通常情况下导航控件中的导航值是不能被用户所更改的,但是开 发人员可以通过编程的方式让用户也能够修改站点地图的节点。

上述代码通过 Value 属性获取一个隐藏输入框的值,如左图所示。单击后如右图所示。 2.18.1 隐藏输入框控件 HiddenField控件就是隐藏输入框控件,用来保存那些不需要显示在页面上的对安全性要求不高的数据。隐藏输入框控件作为<input type=“hidden”/>元素呈现在HTML页面。隐藏输入框控件的值通过Value属性保存,同时也可以通过代码来控制Value的值,利用隐藏输入框对页面的值进行传递,示例代码如下所示。 protected void Button1_Click(object sender, EventArgs e) { Label1.Text = HiddenField1.Value; } //获取隐藏输入框控件的值 上述代码通过 Value 属性获取一个隐藏输入框的值,如左图所示。单击后如右图所示。

2.18.1 隐藏输入框控件 HiddenField 是通过 HTTP 协议进行参数传递的,所以当打开新的窗体或者使用 method=get 都无法 使用 HiddenField 隐藏输入框控件。同时,隐藏输入框控件还能初始化或保存一些安全性不高的数据。 当双击隐藏输入框控件时,系统会自动生成 ValueChanged 事件代码段,当隐藏输入框控件内的值被改 变时则触发该事件,示例代码如下所示。 protected void Button1_Click(object sender, EventArgs e) { HiddenField1.Value = "更改了值"; } //更改隐藏输入框控件的值 protected void HiddenField1_ValueChanged(object sender, EventArgs e) //更改将触发此事件 Label1.Text = "值被更改了,并被更改成\"" + HiddenField1.Value + "\"";

2.18.1 隐藏输入框控件 上述代码创建了一个 ValueChanged 事件,并当隐藏输入框控件的值被更改时,如左图所示。单 击【change】按钮后会触发按钮事件,运行结果如右图所示。

1 2.18.2 图片热点控件 HotSpotMode(热点模式)常用选项 2.18.2 图片热点控件 ImageMap 控件是一个让你可以在图片上定义热点(HotSpot)区域的服务器控件。用户可以通过点击这些热点区域进行回发(PostBack)操作或者定向(Navigate)到某个URL位址。该控件一般用在需要对某张图片的局部范围进行互动操作。ImageMap控件主要由两个部分组成,第一部分是图像,第二部分是作用点控件的集合。其主要属性有HotSpotMode、HotSpots,具体如下所示。 HotSpotMode(热点模式)常用选项 1 NotSet:未设置项。虽然名为未设置,但其实默认情况下会执行定向操作,定向到你指定的 URL位址去。如果你未指定 URL 位址,那默认将定向到自己的 Web 应用程序根目录。 Navigate:定向操作项。定向到指定的 URL 位址去。如果你未指定 URL 位址,那默认将定向 到自己的 Web 应用程序根目录。 PostBack:回发操作项。点击热点区域后,将执行后部的 Click 事件。 Inactive:无任何操作,即此时形同一张没有热点区域的普通图片。

2 2.18.2 图片热点控件 HotSpots(图片热点)常用属性 2.18.2 图片热点控件 2 HotSpots(图片热点)常用属性 该属性对应着System.Web.UI.WebControls.HotSpot对象集合。HotSpot类是一个抽象类,它之下有CircleHotSpot(圆形热区)、RectangleHotSpot(方形热区)和PolygonHotSpot(多边形热区)三个子类。 实际应用中,都可以使用上面三种类型来定制图片的热点区域。如果需要使用到自定义的热点区域类型时,该类型必须继承HotSpot抽象类。当需要设置HotSpots属性时,可以可视化设置,如图所示。

上述代码还添加了一个 Click 事件,事件处理的核心代码如下所示。 2.18.2 图片热点控件 当可视化完毕后,系统会自动生成 HTML 代码,核心代码如下所示。 <asp:ImageMap ID="ImageMap1" runat="server" HotSpotMode="PostBack" ImageUrl="~/images/mobile.jpg" onclick="ImageMap1_Click"> <asp:CircleHotSpot Radius="15" X="15" Y="15" HotSpotMode="PostBack" PostBackValue="0" /> <asp:CircleHotSpot Radius="100" X="15" Y="15" HotSpotMode="PostBack" PostBackValue="1" /> <asp:CircleHotSpot Radius="300" X="15" Y="15" HotSpotMode="PostBack" PostBackValue="2" /> </asp:ImageMap> 上述代码还添加了一个 Click 事件,事件处理的核心代码如下所示。 protected void ImageMap1_Click(object sender, ImageMapEventArgs e) { string str=""; switch (e.PostBackValue) case "0":str = "你点击了 1 号位置,图片大小将变为 1 号"; break; case "1":str = "你点击了 2 号位置,图片大小将变为 3 号"; break; case "2":str = "你点击了 3 号位置,图片大小将变为 3 号"; break; } Label1.Text = str; ImageMap1.Height =120*(Convert.ToInt32(e.PostBackValue)+1); //获取传递过来的参数 //更改图片的大小

2.18.2 图片热点控件 上述代码通过获取ImageMap中的CricleHotSpot控件中的PostBackVlue值来获取传递的参数,如左图所示。当获取到传递的参数时,可以通过参数做相应的操作,如右图所示。

2.18.3 静态标签控件 通常情况下Lieral控件无需添加任何HTML元素即可将静态文本呈现在网页上。与Label不同的是, Label控件在生成HTML代码时,会呈现<span>元素。而Lieral控件不会向文本中添加任何HTML代码。与Label不同的是,Lieral控件有一个Mode属性,用来控制Lieral控件中的文本的呈现形式。Lieral可以通过Mode属性来选择输出的是HTML样式还是HTML代码,核心代码如下所示。 namespace _5_17 { public partial class Lieral : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) string str = "<span style=\"color:red\">大家好</span>,您现在查看的是 HTML 样式。";//HTML 字符 Literal1.Text = str + "<div style=\"border-top:1px dashed #ccc;background:gray\">单击按钮查看 HTML 代码</div>"; Label1.Text = str; //赋值 Label } protected void Button1_Click(object sender, EventArgs e) Literal1.Mode = LiteralMode.Encode; //转换显示的模式

2.18.3 静态标签控件 上述代码将一个HTML形式的字符串分别赋值给Literal和Label控件,并通过转换查看赋值的源代码,运行结果如左图和右图所示。

当点击了按钮后,更改了Literal的模式之后,Literal中的HTML文本被直接显示,Literal的具有 三种模式,具体如下: Transform:添加到控件中的任何标记都将进行转换,以适应请求浏览器的协议。 PassThrough:添加到控件中的任何标记都将按照原样输出在浏览器中。 Encode:添加到控件中的任何标记都将使用 HtmlEncode 方法进行编码,该方法将把 HTML 编码转换为其文本表示形式。 注意:PassThrough 模式和 Ttansform 模式在通常情况下,呈现的效果并没有区别。

2.18.4 动态缓存更新控件 Substitution动态缓存更新控件将动态内容插入到缓存页中,并且不会呈现任何HTML标记。用户可以将控件绑定到页上或父用户控件上的方法,自行创建静态方法,以返回要插入到页面中的任何信息。 同时,要使用Substitution控件,则必须符合以下标准: 在ASP.NET中,缓存的使用能够极大的提高网站的性能,降低服务器的压力。而通常情况下,对ASP.NET整个页面的缓存是没有任何意义的,这样经常会给用户带来疑惑。Substitution动态缓存更新控件允许用户在页上创建一些区域,这些区域可以用动态的方式进行更新,然后集成到缓存页。 此方法被定义为静态方法。 此方法接受 HttpContext 类型的参数。 此方法返回 String 类型的值。

2.18.4 动态缓存更新控件 在ASP.NET页面中,为了减少用户与页面的交互中数据库的更新,可以对ASP.NET页面进行缓存, 缓存代码可以使用页面参数的@OutputCatch,示例代码如下所示。 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Substitution.aspx.cs" Inherits="_5_17.Substitution" %> <%@ OutputCache Duration="100" VaryByParam="none" %> //增加一个页面缓存 <!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>无标题页</title> </head> <body> <form id="form1" runat="server"> <div> 当前的时间为:<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> (有缓存)<br /> 当前的时间为:<asp:Substitution ID="Substitution1" runat="server" MethodName="GetTimeNow"/> (动态更新)</div> </form> </body> </html>

2.18.4 动态缓存更新控件 执行事件操作的 cs 页面核心代码如下所示。 2.18.4 动态缓存更新控件 执行事件操作的 cs 页面核心代码如下所示。 protected void Page_Load(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); //页面初始化时,当前时间赋值给 Label1 标签 } protected static string GetTimeNow(HttpContext con) //注意事件的格式 return DateTime.Now.ToString(); //Substitution 控件执行的方法 上述代码对ASP.NET页面进行了缓存,当用户访问页面时,除了Substitution控件的区域,以外区域都会被缓存,而使用了Substitution控件局部再刷新后会进行更新,运行结果如图所示。 运行结果见,未使用Substitution控件的区域,当页面再次被请求时,会直接在缓存中执行。 而Substitution控件区域内的值并不会缓存。在每次刷新时,页面将进行该控件区域的局部动态更新。