幻灯片1-计算机科学与工程系.ppt

1、ASP.NET程序设计 （2.0版）,上海交通大学出版社,3.使用VS 2005 建立Web站点,2,内容,ASP.NET 2.0提供了网站导航、主题及成员管理技术，从定义网站的层次结构，统一控件的外观，从局部再到全局风格的一致及管理都提供了最佳的解决方案。本章将讲述这三种技术，即网站导航、网站显示的风格及实现网站中成员的管理。具体问题包括：网站导航、母版页、主题及网站成员管理。,3. 1网站的导航,网站导航框架图,3.1.1创建一个网站以及站点地图文件,要实现网站的导航，首先需要创建一个网站以及一个站点地图文件。 （1）新建SiteNavigation网站 在VS2005中，单击“文件”菜单

2、中的“新建网站”命令，在打开的“新建网站”对话框中选择“ASP.NET 网站”模板，在位置下拉列表框中，可以选择“HTTP”、“文件系统”及“FTP”三种方式，这里示例选择“文件系统”，当然，你也可以选择其它方式。网站的名称设定为SiteNavigation,单击“确定”按钮，VS2005就建立一个含有App_Data目录以及一个Default.aspx页面的SiteNavigation网站。,3.1.1 创建一个网站以及站点地图文件,新建网站对话框,3.1.1创建一个网站以及站点地图文件,（2）建立站点地图文件 导航结构文件格式有两种：系统默认的SiteMap文件格式和自定义的XML格式。自

3、定义的XML格式和SiteMap格式差异在于用户可以使用自己的XML节点名称，而SiteMap格式必须依照系统所定义的默认名称。如果用户有自己的XML文件，可以直接拿来使用，而不必迁就SiteMap格式的文件。,添加新项对话框,3. 1. 1创建一个网站以及站点地图文件,例3.1创建SiteMap格式的网站导航文件Web.sitemap 1）用鼠标右键单击“解决方案管理器”窗口中的SiteNavigation网站，在弹出的快捷菜单中选择“添加新项”命令，在模板中选择“站点地图”，使用默认Web.sitemap文件名.,3. 1. 1创建一个网站以及站点地图文件,单击“添加”按钮，得到一个空白结

4、构描述的Web.sitemap文件，文件内容如下： ,3. 1. 1创建一个网站以及站点地图文件,2）在上述结构的文件中，添加url、title及description属性值，内容如下所示： ,3. 1. 1创建一个网站以及站点地图文件,3）保存，就建立了默认的Web.sitemap站点地图文件。,siteMapNode的属性,3. 1. 2使用TreeView控件实现导航,TreeView控件结构,TreeView控件,SiteMapDataSource控件,3. 1. 2使用TreeView控件实现导航,例3.2使用TreeView控件绑定至SiteMap文件实现站点导航,使用例前面所建立

5、的Web.Sitemap文件，绑定到SiteMap文件实现站点导航，操作步骤如下： （1）在VS2005的“解决方案资源管理器”窗口中，在SiteNavigation站点上，单击鼠标右键，选择“添加新项”命令，在模板项目中选择Web窗体，并命名为“TreeView.aspx”。 （2）在TreeView.aspx文件的设计视图下，从工具箱的导航控件组中，拖曳一个TreeView控件，从数据控件组中拖曳SiteMapDataSource控件到设计界面上。 （3）在TreeView控件上，单击鼠标右键，选择“显示智能标记”，在弹出的“TreeView任务”标签上，设置它的数据源为SiteMapDa

6、taSource控件，见图3.5所示，SiteMapDataSource控件默认自动绑定Web.sitemap的内容,3. 1. 2使用TreeView控件实现导航,智能标签,TreeView控件设置数据源后的界面,3. 1. 2使用TreeView控件实现导航,例3.3使用TreeView节点编辑器创建TreeView控件实现页面导航,使用TreeView节点编辑器是一个既方便又直观的方式。步骤如下： （1）在VS2005的“解决方案资源管理器”窗口中，在SiteNavigation站点上，单击鼠标右键，选择“添加新项”命令，在模板项目中选择Web窗体，并命名为“TreeViewEdit.a

7、spx”。 （2）在TreeViewXML.aspx文件的设计视图下，拖曳一个TreeView控件到界面上，并在智能标签中选取“编辑节点”进入节点编辑器。 （3）以上面主页、产品、服务的节点数据为模板，在编辑器左上角按下加入根节点的按钮，并且输入节点相关信息：NavigateUrl为“Default.aspx”、Text为“主页”、Value为“Home”，而在根节点下再创建二层父节点：产品、服务，而各个父节点再创建子节点，而子节点相关信息输入的方式仿照父节点创建的方式。 （4）如果在各节点之间想有连线，只要将智能标签中的“显示行”属性打勾便可,3. 1. 2使用TreeView控件实现导航,

8、用节点编辑器创建节点,TreeView控件显示行,3. 1. 3使用SiteMapPath控件显示导航路径,例3.5使用SiteMapPath控件显示导航路径。步骤如下：,（1）定义Web.sitemap文件。Web.sitemap文件内容如下： ,3. 1. 3使用SiteMapPath控件显示导航路径,例3.5使用SiteMapPath控件显示导航路径。步骤如下：,（2）在Web.sitemap文件中，可以看到有： 的节点，添加一个名为“Software.aspx”的Web 窗体，而Web窗体文件名的命名是根据节点中的url所定义的Web 窗体文件名，不能依个人喜好而随意命名，如果胡乱添加

9、未定义的网页名称，则这个网页就得不到SiteMapPath控件导航功能。 （3）从工具箱中拖曳一个SiteMapPath控件到Software.aspx网页的设计视图界面，SiteMapPath控件就会直接将路径呈现在界面上,3. 1. 3使用SiteMapPath控件显示导航路径,例3.5使用SiteMapPath控件显示导航路径。步骤如下：,SiteMapPath控件呈现的导航路径,3. 1. 4使用Menu控件实现导航菜单,例3.6使用Menu控件实现网页导航,操作步骤如下： （1）在VS2005的“解决方案资源管理器”窗口中，在SiteNavigation站点上，单击鼠标右键，选择“添

10、加新项”命令，在模板项目中选择Web窗体，并命名为“Menu.aspx”。 （2）在Menu.aspx文件的设计视图下，拖曳一个Menu及SiteMapDataSource控件到界面上，默认SiteMapDataSource控件会读取Web.sitemap文件的网站层次性描述。 （3）在Menu控件中，利用智能标签设定控件的数据源为SiteMapDataSource控件。 运行时，将鼠标移动到Menu控件相关位置，会出现下一级菜单及下一级的子菜单，单击菜单中的任意一个链接，就可以实现页面之间的转移。,3. 1. 4使用Menu控件实现导航菜单,例3.6使用Menu控件实现网页导航,Menu控件

11、运行的界面,3. 1. 5在母版中实现站点导航,母版页能够为ASP.NET应用程序创建统一的用户界面和样式，这是母版页的核心功能。在实现网站一致性的过程中，必须包含两种文件：一种是母版页，另一种是内容页。母版页后缀名是.master，其封装页面中的公共元素。内容页实际是普通的.aspx文件，它包含除母版页之外的其它非公共内容。在运行过程中，ASP.NET引擎将两种页面内容合并执行，最后将结果发给客户端浏览器。,3. 1. 5在母版中实现站点导航,以下面的页面为例来说明：,3. 1. 5在母版中实现站点导航,页面结构图,3. 1. 5在母版中实现站点导航,创建母版页： （1）单击“网站”命令菜单

12、中的“添加新项”命令 ，选择母版页模板，文件名使用MasterPage.master的默认值。 （2）单击“添加按钮”，创建MasterPage.master文件 （3）修改MasterPage版面布局。由于MasterPage.master默认的版面布局不符合要求，修改成为具有页头、页尾、导航及内容页的外观。 （4）设置表格的背景图片，在表格中第一行，也说是页头的位置插入网站的标志，页尾所在的地方输入版权标志，内容页处插入ContentPlaceHolder控件，导入SiteMap文件，从导航控件组中拖入SiteMapPath和TreeView控件，并设置TreeView控件数据源为站点地图

13、数据源。,3. 1. 5在母版中实现站点导航,创建内容页： （1）单击“网站”命令菜单中的“添加新项”，或者在解决方案管理器中右键单击项目，在下拉菜单中选择“添加新项” 。 （2）由于内容页与普通.aspx页面的扩展名相同，因此，选择的是Web窗体图标。由于内容页必须绑定母版页，所以对复选框“将代码放在单独的文件中”和“选择母版页”要选定。 （3）单击添加按钮，弹出选择“母版页”对话框，选择上面所建立的MasterPage.master母版。单击“确定”按钮。建立了Hardware.aspx文件 （4）内容页的编辑和一般的Web窗体一样。这里示范一下，在内容页输入文字，定义字体、字号，然后保存

14、。,3. 2主题和皮肤,主题是ASP.NET 2.0提供的一种新技术。利用主题可以为一批服务器控件定义外观。 VS2005为创建主题制定了一些规则，但没有提供特殊的工具。这些规则是：对控件显示属性的定义必须放在以“.skin”为后缀的皮肤文件中，而皮肤文件必须放在“主题目录”下，而主题目录又必须放在专用目录App_Themes的下面。每个专用目录下可以放多个主题目录，每个主题目录下面又可以放多个皮肤文件。只有遵守这些规定，在皮肤文件中定义的显示属性才能够起作用。,3.2.1创建一个网站和一个页面,没有使用主题的控件,创建一个网站和一个如下图所示的页面：,3.2.2在页面中创建和应用主题,使用主

15、题时，显然只有先定义主题，然后再将主题应用到页面。操作步骤如下： （1）建立如下图所示的文件夹与文件,专用目录、主题目录、皮肤文件的关系,3.2.2在页面中创建和应用主题,（2）皮肤文件SkinFile.skin中给Lable、TextBox和Button三种控件定义显示的语句如下： （4）网站中需要使用主题的网页，都需要在网页的定义语句中增加“Theme=主题目录”的属性。在Default.aspx页面的第一行代码增加： ,3.2.2在页面中创建和应用主题,（5）运行Default.aspx页面，标签、文本框和按钮就会使用主题“MyThemes”中所设定的外观，如下图所示。,3.2.3样式主

16、题和个性化主题,在创建了主题之后，根据需要可以使用个性化主题theme，即前面所使用的主题，还可以使用样式主题（StyleSheetTheme）. 样式主题与个性化主题使用相同主题中的样式或皮肤文件，不过它在控制页面外观的优先级别不一样，与个性化主题相比，样式主题的优先级别要低。 也就是说，如果在一个页面中使用样式主题，如果该页面中的代码又修改了该控件的外观，此时控件的外观由修改的代码来控制，而不是由样式主题来设定。如果在一个页面中使用个性化主题，如果该页面中的代码也修改了该控件的外观，由于个性化主题的优先级别高，此时控件的外观并不是由修改代码来控制，而同样是由主题个性化来控制。,3.2.4在

17、整个站点中使用主题,为了将主题文件应用于整个应用程序，可以在应用程序根目录下的Web.config文件中进行定义。例如，要将MyThemes主题目录应用程序的所有文件中，可以在Web.config文件中定义如下： configuration system.web pages themeMyThemes/ system.web configuration,3 .3实现网站的成员管理,在Web应用的开发过程中，常常会要求某些页面只允许会员或者被授权的用户才能浏览和使用，当一个普通用户浏览这些页面时，系统将会弹出一个登录窗口或者转入到指定的页面，提示用户输入用户名和密码，当用户成功登录后，才可以浏览

18、这些页面，否则，这些用户不能查看这些页面。 为了实现上述的成员管理功能，ASP.NET2.0提供了新的成员API，即Membership API，通过新的成员API，可以非常容易地实现网站的成员管理。,3.3.1 创建一个网站和一个页面,建立如下图所示的网站：,3.3.2配置成员管理,在VS2005中，可以使用Web站点管理工具，通过Web页界面来配置ASP.NET应用程序，控制对Web应用程序中文件夹和单个页面的访问。 首先建立一个MemberPages的目录，在MemberPages目录中存放需要保护的页面，或者需要会员才能被浏览的页面，然后通过Web站点管理工具来创建新的注册用户，最后为

19、网站中的MemberPages目录建立访问的规则，从而限制只有注册用户才能访问该目录以及该目录中的页面。,3.3.2配置成员管理,操作步骤如下： （1）新建一个MemberPages目录； （2）在VS2005中，用鼠标单击菜单“网站”选择“ASP.NET配置”命令，打开 “ASP.NET Web应用程序管理”窗口； （3）在应用程序管理窗口中，单击“安全”标签，单击“使安全配置向导按部就班地配置安全性”的链接，打开安全配置欢迎界面，欢迎界面的左边显示了安全配置向导的7个步骤。 （4）根据这7个即可完成成员的安全配置。,3.3.3实现用户登录,实现用户登录的步骤如下： （1）打开Members

20、hip网站中的Default.aspx页面，在设计视图下，输入标题“测试用户对网页的访问权限”，并定义字体字号大小。 （2）在工具箱“Login”控件组中把“LoginStatus”、“LoginView”、LoginName控件拖放到文字的下方。对于LoginView控件，选择匿名模板，然后输入文字“你还没有登录，请单击“登录”链接进入”。对于LoginView控件，选择登录模板，输入文字，“你已经成功登录！”如下图所示,3.3.3实现用户登录,（3）在VS2005的“解决方案资源管理器”窗口中，在http:/localhost/ Membership站点上，单击鼠标右键，选择“添加新项”命

21、令，在模板项目中选择Web窗体，并命名为“Login.aspx”。在VS2005的设计视图下，把左边工具箱中的“Login”控件组中的“Login”控件拖放到页面的适当位置，完成登录页面的设计。 （4）在VS2005中，设置Default.aspx页面为起始页，运行，单击“登录”链接，页面将自动链接到另一个页面Login.aspx。需要说明的是，转移的页面的名称必须设定为Login.aspx，这是LoginStatus控件默认的链接地址。 （5）输入前面所建立的用户名user001以及正确的密码后，单击“登录”按钮，就会成功登录并返回到Default.aspx页面。由于用户已经成功登录，Log

22、inStatus控件显示的是Logout链接，显示“你已成功登录！”的说明。,3.3.3实现用户登录,3.3.4实现用户注册,使用CreateUserWizard控件实现用户注册的步骤如下： （1）在VS2005的“解决方案资源定理器”窗口中，在http:/localhost/ Membership站点上，单击鼠标右键，选择“添加新项”命令，在模板项目中选择Web窗体，并命名为“Register.aspx”。 （2）在Register.aspx页面的设计视图下，输入文字“注册新用户”，定义文字的字体及字号。 （3）把工具箱中Login控件组中的CreateUserWizard控件拖放到文字的下

23、方，并将其中的ContinueDestinationPageUrl属性设定为“/Default.aspx”，表明当用户注册成功后，单击“Continue”按钮，将返回到Default.aspx页面。 （4）在VS2005中，在Default.aspx页面的设计视图中选择LoginView控件，修改AnonymousTemplate中所设定的内容，在原有的内容后添加一个标准控件组中的HyperLink控件，将该控件的Text属性设置为“注册新用户”，将NavigateUrl属性设定为“/Register.aspx”，这样在Default.aspx页面中，当用户没有登录时，可以单击“注册新用户”的

24、链接，进入Register.aspx页面。,（5）在VS2005中，设定面Default.aspx为起始页，运行，界面下图所示。,3.3.5修改密码,操作步骤如下： （1）在VS2005的“解决方案资源管理器”窗口中，在http:/localhost/Membership站点的MemberPages目录上，单击鼠标右键，选择“添加新项”命令，在模板中选择Web窗体，并命名为“ChangePassword.aspx”。 （2）在VS2005的设计视图下，在ChangePassword.aspx页面中添加一个“Login”控件组中的“ChangePassword”控件，即可完成ChangePassword.aspx页面的创建。 （3）在Default.aspx页面的设计视图中，选择LoginView控件，修改登录用户模板中所设定的内容，在原有的内容后添加一个标准组中的HyperLink控件，将该控件的Text属性设置为“修改密码”，将NavigateUrl属性设定为“/ChangePassword.aspx”，这样在Default.aspx页面，当用户成功登录后，可以单击“修改密码”的链接，进入ChangePassword.aspx页面。,3.3.5修改密码,（4）在VS2005中，设Default.aspx为起始页，运行，在Default.