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

《幻灯片1-计算机科学与工程系.ppt》由会员分享，可在线阅读，更多相关《幻灯片1-计算机科学与工程系.ppt（45页珍藏版）》请在三一办公上搜索。

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

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

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

4、下：,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文件实现站点导航,使用例前面所建立的Web.Sitemap文件，绑定到SiteMap文件实现站点导航

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

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

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

8、示导航路径,例3.5使用SiteMapPath控件显示导航路径。步骤如下：,（1）定义Web.sitemap文件。Web.sitemap文件内容如下：,3.1.3使用SiteMapPath控件显示导航路径,例3.5使用SiteMapPath控件显示导航路径。步骤如下：,（2）在Web.sitemap文件中，可以看到有：的节点，添加一个名为“Software.aspx”的Web 窗体，而Web窗体文件名的命名是根据节点中的url所定义的Web 窗体文件名，不能依个人喜好而随意命名，如果胡乱添加未定义的网页名称，则这个网页就得不到SiteMapPath控件导航功能。（3）从工具箱中拖曳一个Site

9、MapPath控件到Software.aspx网页的设计视图界面，SiteMapPath控件就会直接将路径呈现在界面上,3.1.3使用SiteMapPath控件显示导航路径,例3.5使用SiteMapPath控件显示导航路径。步骤如下：,SiteMapPath控件呈现的导航路径,3.1.4使用Menu控件实现导航菜单,例3.6使用Menu控件实现网页导航,操作步骤如下：（1）在VS2005的“解决方案资源管理器”窗口中，在SiteNavigation站点上，单击鼠标右键，选择“添加新项”命令，在模板项目中选择Web窗体，并命名为“Menu.aspx”。（2）在Menu.aspx文件的设计视图下

10、，拖曳一个Menu及SiteMapDataSource控件到界面上，默认SiteMapDataSource控件会读取Web.sitemap文件的网站层次性描述。（3）在Menu控件中，利用智能标签设定控件的数据源为SiteMapDataSource控件。运行时，将鼠标移动到Menu控件相关位置，会出现下一级菜单及下一级的子菜单，单击菜单中的任意一个链接，就可以实现页面之间的转移。,3.1.4使用Menu控件实现导航菜单,例3.6使用Menu控件实现网页导航,Menu控件运行的界面,3.1.5在母版中实现站点导航,母版页能够为ASP.NET应用程序创建统一的用户界面和样式，这是母版页的核心功能。

11、在实现网站一致性的过程中，必须包含两种文件：一种是母版页，另一种是内容页。母版页后缀名是.master，其封装页面中的公共元素。内容页实际是普通的.aspx文件，它包含除母版页之外的其它非公共内容。在运行过程中，ASP.NET引擎将两种页面内容合并执行，最后将结果发给客户端浏览器。,3.1.5在母版中实现站点导航,以下面的页面为例来说明：,3.1.5在母版中实现站点导航,页面结构图,3.1.5在母版中实现站点导航,创建母版页：（1）单击“网站”命令菜单中的“添加新项”命令，选择母版页模板，文件名使用MasterPage.master的默认值。（2）单击“添加按钮”，创建MasterPage.m

12、aster文件（3）修改MasterPage版面布局。由于MasterPage.master默认的版面布局不符合要求，修改成为具有页头、页尾、导航及内容页的外观。（4）设置表格的背景图片，在表格中第一行，也说是页头的位置插入网站的标志，页尾所在的地方输入版权标志，内容页处插入ContentPlaceHolder控件，导入SiteMap文件，从导航控件组中拖入SiteMapPath和TreeView控件，并设置TreeView控件数据源为站点地图数据源。,3.1.5在母版中实现站点导航,创建内容页：（1）单击“网站”命令菜单中的“添加新项”，或者在解决方案管理器中右键单击项目，在下拉菜单中选择“

13、添加新项”。（2）由于内容页与普通.aspx页面的扩展名相同，因此，选择的是Web窗体图标。由于内容页必须绑定母版页，所以对复选框“将代码放在单独的文件中”和“选择母版页”要选定。（3）单击添加按钮，弹出选择“母版页”对话框，选择上面所建立的MasterPage.master母版。单击“确定”按钮。建立了Hardware.aspx文件（4）内容页的编辑和一般的Web窗体一样。这里示范一下，在内容页输入文字，定义字体、字号，然后保存。,3.2主题和皮肤,主题是ASP.NET 2.0提供的一种新技术。利用主题可以为一批服务器控件定义外观。VS2005为创建主题制定了一些规则，但没有提供特殊的工具。

14、这些规则是：对控件显示属性的定义必须放在以“.skin”为后缀的皮肤文件中，而皮肤文件必须放在“主题目录”下，而主题目录又必须放在专用目录App_Themes的下面。每个专用目录下可以放多个主题目录，每个主题目录下面又可以放多个皮肤文件。只有遵守这些规定，在皮肤文件中定义的显示属性才能够起作用。,创建一个网站和一个页面,没有使用主题的控件,创建一个网站和一个如下图所示的页面：,在页面中创建和应用主题,使用主题时，显然只有先定义主题，然后再将主题应用到页面。操作步骤如下：（1）建立如下图所示的文件夹与文件,专用目录、主题目录、皮肤文件的关系,在页面中创建和应用主题,（2）皮肤文件SkinFile

15、.skin中给Lable、TextBox和Button三种控件定义显示的语句如下：（4）网站中需要使用主题的网页，都需要在网页的定义语句中增加“Theme=主题目录”的属性。在Default.aspx页面的第一行代码增加：,在页面中创建和应用主题,（5）运行Default.aspx页面，标签、文本框和按钮就会使用主题“MyThemes”中所设定的外观，如下图所示。,样式主题和个性化主题,在创建了主题之后，根据需要可以使用个性化主题theme，即前面所使用的主题，还可以使用样式主题（StyleSheetTheme）.样式主题与个性化主题使用相同主题中的样式或皮肤文件，不过它在控制页面外观的优先级

16、别不一样，与个性化主题相比，样式主题的优先级别要低。也就是说，如果在一个页面中使用样式主题，如果该页面中的代码又修改了该控件的外观，此时控件的外观由修改的代码来控制，而不是由样式主题来设定。如果在一个页面中使用个性化主题，如果该页面中的代码也修改了该控件的外观，由于个性化主题的优先级别高，此时控件的外观并不是由修改代码来控制，而同样是由主题个性化来控制。,在整个站点中使用主题,为了将主题文件应用于整个应用程序，可以在应用程序根目录下的Web.config文件中进行定义。例如，要将MyThemes主题目录应用程序的所有文件中，可以在Web.config文件中定义如下：configuration

17、system.web pages themeMyThemes/system.webconfiguration,3.3实现网站的成员管理,在Web应用的开发过程中，常常会要求某些页面只允许会员或者被授权的用户才能浏览和使用，当一个普通用户浏览这些页面时，系统将会弹出一个登录窗口或者转入到指定的页面，提示用户输入用户名和密码，当用户成功登录后，才可以浏览这些页面，否则，这些用户不能查看这些页面。为了实现上述的成员管理功能，提供了新的成员API，即Membership API，通过新的成员API，可以非常容易地实现网站的成员管理。,3.3.1 创建一个网站和一个页面,建立如下图所示的网站：,配置成员

18、管理,在VS2005中，可以使用Web站点管理工具，通过Web页界面来配置ASP.NET应用程序，控制对Web应用程序中文件夹和单个页面的访问。首先建立一个MemberPages的目录，在MemberPages目录中存放需要保护的页面，或者需要会员才能被浏览的页面，然后通过Web站点管理工具来创建新的注册用户，最后为网站中的MemberPages目录建立访问的规则，从而限制只有注册用户才能访问该目录以及该目录中的页面。,配置成员管理,操作步骤如下：（1）新建一个MemberPages目录；（2）在VS2005中，用鼠标单击菜单“网站”选择“ASP.NET配置”命令，打开“ASP.NET Web

19、应用程序管理”窗口；（3）在应用程序管理窗口中，单击“安全”标签，单击“使安全配置向导按部就班地配置安全性”的链接，打开安全配置欢迎界面，欢迎界面的左边显示了安全配置向导的7个步骤。（4）根据这7个即可完成成员的安全配置。,实现用户登录,实现用户登录的步骤如下：（1）打开Membership网站中的Default.aspx页面，在设计视图下，输入标题“测试用户对网页的访问权限”，并定义字体字号大小。（2）在工具箱“Login”控件组中把“LoginStatus”、“LoginView”、LoginName控件拖放到文字的下方。对于LoginView控件，选择匿名模板，然后输入文字“你还没有登录

20、，请单击“登录”链接进入”。对于LoginView控件，选择登录模板，输入文字，“你已经成功登录！”如下图所示,实现用户登录,（3）在VS2005的“解决方案资源管理器”窗口中，在http:/localhost/Membership站点上，单击鼠标右键，选择“添加新项”命令，在模板项目中选择Web窗体，并命名为“Login.aspx”。在VS2005的设计视图下，把左边工具箱中的“Login”控件组中的“Login”控件拖放到页面的适当位置，完成登录页面的设计。（4）在VS2005中，设置Default.aspx页面为起始页，运行，单击“登录”链接，页面将自动链接到另一个页面Login.asp

21、x。需要说明的是，转移的页面的名称必须设定为Login.aspx，这是LoginStatus控件默认的链接地址。（5）输入前面所建立的用户名user001以及正确的密码后，单击“登录”按钮，就会成功登录并返回到Default.aspx页面。由于用户已经成功登录，LoginStatus控件显示的是Logout链接，显示“你已成功登录！”的说明。,实现用户登录,实现用户注册,使用CreateUserWizard控件实现用户注册的步骤如下：（1）在VS2005的“解决方案资源定理器”窗口中，在http:/localhost/Membership站点上，单击鼠标右键，选择“添加新项”命令，在模板项目中

22、选择Web窗体，并命名为“Register.aspx”。（2）在Register.aspx页面的设计视图下，输入文字“注册新用户”，定义文字的字体及字号。（3）把工具箱中Login控件组中的CreateUserWizard控件拖放到文字的下方，并将其中的ContinueDestinationPageUrl属性设定为“/Default.aspx”，表明当用户注册成功后，单击“Continue”按钮，将返回到Default.aspx页面。（4）在VS2005中，在Default.aspx页面的设计视图中选择LoginView控件，修改AnonymousTemplate中所设定的内容，在原有的内容后

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

24、为“ChangePassword.aspx”。（2）在VS2005的设计视图下，在ChangePassword.aspx页面中添加一个“Login”控件组中的“ChangePassword”控件，即可完成ChangePassword.aspx页面的创建。（3）在Default.aspx页面的设计视图中，选择LoginView控件，修改登录用户模板中所设定的内容，在原有的内容后添加一个标准组中的HyperLink控件，将该控件的Text属性设置为“修改密码”，将NavigateUrl属性设定为“/ChangePassword.aspx”，这样在Default.aspx页面，当用户成功登录后，可以

25、单击“修改密码”的链接，进入ChangePassword.aspx页面。,修改密码,（4）在VS2005中，设Default.aspx为起始页，运行，在Default.aspx页面中单击“Login”链接，在登录页面Login.aspx中输入正确的用户名和密码，登录成功后会看到如下图所示的界面,小结,网站中的文件是种层次结构。TreeView和Menu都是层次控件，因此非常适合于作导航控件。建立站点地图，设置节点以及它们之间的逻辑关系，然后以站点地图作为数据源与层次控件进行数据绑定。由于这里建立的站点是逻辑结构，而不是物理结构，因此具有很大的灵活性。SiteMapPath控件是一个比较特殊的控

26、件，只要网站中设置了站点地图，控件放进网页，就会自动与站点地图连接，利用它返回到前面的节点时非常方便。为了使得网站中一批网页的显示风格保持一致，ASP.NET 2.0提供了主题及母版技术。主题是利用皮肤文件对一批单个控件显示的定义，皮肤文件必须放在主题目录之下，而主题目录又必须放在专用目录App_Themes下。母版是从整体布局的定义，二者结合可以使网站的多个网页之间，在显示风格上取得一致。最后，从安全的角度，针对网站中网页文件的访问权限，从配置成员管理、实现用户登录、注册新用户及修改密码等方面作了详细的讲解。,习题与上机操作题,【习题】1)为了实现网站的导航，ASP.NET 2.0使用了哪些控件？说出控件之间的不同点。2）保持多个网页显示风格一致，ASP.NET 2.0使用了哪些技术，每种技术是如何发挥作用的？3)简述利用ASP.NET网站管理工具创建用户和指定访问规则的步骤。【上机操作题】1)直接在TreeView控件中创建网站的逻辑结构。2)先创建网站地图，然后利用TreeView、Menu和SiteMapPath控件结合网站地图进行导航。3)将主题、母版技术相结合创建风格一致的多个网页。4）利用LoginStatus、LoginView、LoginName、CreateUserWizard、ChangePassword等控件实现用户登录、注册新用户及修改密码的功能。,