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

Presentation on theme: "在 Web 应用中，导航是非常重要的。ASP"— Presentation transcript:

1

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

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

4 </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>

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

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

7 隐藏输入框控件 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 + "\"";

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

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

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

11 上述代码还添加了一个 Click 事件，事件处理的核心代码如下所示。
图片热点控件 当可视化完毕后，系统会自动生成 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); //获取传递过来的参数 //更改图片的大小

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

13 静态标签控件 通常情况下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; //转换显示的模式

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

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

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

17 动态缓存更新控件 在ASP.NET页面中，为了减少用户与页面的交互中数据库的更新，可以对ASP.NET页面进行缓存， 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" " <html xmlns=" > <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>

18 2.18.4 动态缓存更新控件 执行事件操作的 cs 页面核心代码如下所示。
动态缓存更新控件 执行事件操作的 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控件区域内的值并不会缓存。在每次刷新时，页面将进行该控件区域的局部动态更新。