asp.net4.0循序渐进(一)新的asp.net网站项目模板

本次练习，我们将熟悉vs2010提供的asp.net4 网站项目模板

asp.net4.0提供了三种新的网站项目模板1.空的网站项目(Asp.net Empty Web application ),2.网站项目(Asp.net Web application )3.网站(Web Site)

前两种项目类型在vs2010新建->项目中进行选择,后一种项目在vs2010中选择新建->web site

空网站项目(Asp.net Empty Web application )很简单，跟以前版本的网站项目也很类似，有一个内容很少的网站配置文件(web.config)

其他的网站项目类型模板，功能有了有很大的变化，新特点如下:

1.提供了基础的身份验证功能

2.提供了默认的网站项目母版页

3.提供了默认的css样式文件 site.css

4.精简了web.config配置文件把大部分不需要在网站应用程序中使用的配置设置信息放在了machine.config文件中，而web.config文件一般只存放站点设置的数据信息。

5.提供了jquery的自动智能提示(这个在vs2008中要进行一些配置才行)

下面我们来做一个练习，创建一个asp.net web application体会以上5点新的功能，并做一个简单的jquery例子。
任务一，创建一个Web站点

1.打开Microsoft Visual Studio 2010

2.从File菜单中选择New->project

3.在接下来的模板列表中选择,网站项目(Asp.net Web application )

4.选择好项目路径，录入项目名字，如图（一）所示

(图一)
注意，开发语言请选择C#
5.选择ok，确认后，项目解决方案目录展开如图(二所示)

图(二) vs2010正式版中jquery版本为1.4.1
通过图二的项目目录结构，我们等下可以通过练习体会到新web项目模板的特点
1.提供了基础的身份验证功能 :所有的身份验证信息页面和函数都在Account 子文件夹中
2.提供了默认的网站项目母版页:提供的默认母版页面为站点根目录下的site.master
3.提供了默认的css样式文件: site.css 该样式文件将作用于整个网站
4.精简了web.config配置文件: 打开站点根目录的web.config，你将看到一个精简的web.config配置文件,(如果是新建一个asp.net空web项目，可以看到配置文件更为精简，因为整个网站只有一个内容非常少的web.config文件)
5.提供了jquery的自动智能提示 jquery的智能提示在Scripts文件夹中
注意:Script文件夹中的jquery脚本有三个版本,jquery-1.4.1-vsdoc.js用来在开发时引用，具有自动提示功能,jquery-1.4.1.js是标准的jquery文件，可以用来在开发中使用,jquery-1.4.1.min.js是精简了的jquery脚本文件，文件较小，可以用来在发布环境中引用.

接下来，我们体会一下拆盒即可使用的网站验证技巧
任务二，拆盒即可使用的网站验证技巧
1.在网站项目中我们展开Account文件夹，如图三所示

图(三)
展开Account文件夹，在Account文件夹中你可以看到4个页面和一个web.config配置文件
2.打开Account目录下的Login.aspx文件，这个文件是默认的登录页面，并且页面内包含一个登录（login）控件,页面HTML模式内容如下：

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Log In
</h2>
<p>
Please enter your username and password.
<asp:HyperLink ID="RegisterHyperLink" runat="server" EnableViewState="false">Register</asp:HyperLink> if you don't have an account.
</p>
<asp:Login ID="LoginUser" runat="server" EnableViewState="false" RenderOuterTable="false">
<LayoutTemplate>
...
</LayoutTemplate>
</asp:Login>
</asp:Content>
3.打开站点根目录下的Site.master文件，定位到LoginView控件（LoginView控件用来显示用户的登录状态，放在母版中，则所有继承了母版的页面都会显示该控件信息，该控件将会显示已登录用户的用户信息，如果用户未登录，则会显示一个链接到登录页面的超链接）
HTML视图内容如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">

</div>
</form>
</body>
</html>

Register.aspx和ChangePassword.aspx也都使用了Login控件，Register.aspx还使用了CreateUserWizard 控件引导用户进行注册，ChangePassword.aspx 使用ChangePassword 控件进行密码修改。
所有验证和登录控件都以Forms表单验证为基础，在vs2010中还使用了SQL MemeberShip,Role和Profile提供程序，针对SQLServer Express2008建立对应的验证库信息,所有的表单验证配置信息都可以在Web.Config文件中找到

本人个人不太推荐使用Forms表单验证机制，如果不使用自定义配置的SqlProvider则灵活不够，如果要使用自定义的SqlProvider则代码编写也较麻烦。要控制到页面上控件级的权限，或者根据不同用户角色取不同的显示数据,最好还是自己设计数据库来实现
4.在项目站点根目录下双击鼠标打开Web.Config配置文件
5.定位到configuration块下 <system.web>中的<authentication>标签，这个区块就是用来进行表单身份验证的。
XML内容如下：
<authentication mode="Forms">
<forms loginUrl="~/Account/Login.aspx" timeout="2880" />
</authentication>

以上配置信息表示默认登录页面是虚拟站点根目录下的Account文件夹中的Login.aspx
6.在Web.config文件authentication 区块中, 有 membership（成员）, profile （个性化配置）and role（角色）定义的配置. 默认情况下，这些配置信息都由Asp.net 个性化配置数据库提供。
XML配置信息如下：


你可以从一下的MSDN文章中了解更多的表单身份验证的知识: - ASP.NET 登录控件概览 - ASP.Net2.0表单身份验证介绍 - Membership介绍 - ASP.NET 个性化设置概览 - 使用角色进行身份验证

任务三，浏览精简的Web.Config配置文件信息
1.在.Net FrameWork4中，主要的配置信息已经移到了machine.config文件中，然后由应用程序继承machine.config中的配置信息,这样设置使得Asp.net 4的应用程序配置文件可以为空，或者只有很少几行内容。
2.Web项目可以移除多余的配置信息,通过继承machine.config文件中的通用配置，比如Ajax，重定向等配置信息和IIS7完美结合
3.在项目文件夹中打开Web.Cofig配置文件，发现其比以前版本精简很多，在一个空的网站项目中（Asp.Net Empty Web Forms Application）,仅仅只需要在,<system.web> 下有一个Compliation 配置节指定使用的FrameWork版本即可。空Web网站的Web.config配置内容如下

<system.web>
<compilation debug="true" targetFramework="4.0" />

</system.web>

</configuration>
由于我们创建的项目包含表单身份验证信息，你可以发现我们的Web.Config文件中有许多表单身份验证的配置信息，这些信息在不需要表单身份验证的项目中是可以去掉的。下表为我们例子中使用到的表单验证配置信息

功能	使用到的配置节
Forms Authentication	configuration/system.web/authentication
ASP.NET Membership	configuration/system.web/membership
ASP.NET Profile	configuration/system.web/profile
ASP.NET Role Management	configuration/system.web/rolemanager

另外,在Web.Config文件中你可以看到 <connectionString> 配置节，该节定义你在表单验证中使用到的数据库提供源，默认是SQLServerExpress 2008中的本地aspnetdb.mdf文件
任务4,使用拆盒即用的jquery 脚本
jquery是现在非常普及的JavaScript框架，asp.net 4.0web站点自动包含了jquery库。下面我们来使用jquery做一个练习，改变页面标题的颜色
1.在项目根文件夹中打开Default.aspx
2.在Default.aspx页面的 ContentPlaceHolderID="MainContent" 的内容区域中, 添加一个按钮来改变 “Welcome to ASP.NET” 标题的颜色.
设置完成后的页面HTML视图代码如下：

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
<input type="button" id="btnChangeTitleStyle" value="Change Title Style" />
</asp:Content>

3.要使用jQuery ,必须添加对jQurey脚本库的引用我们在页面的HeaderContent 内容区添加如下的脚本，添加成功后的HTML视图代码如下：
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
</asp:Content>
4.在 HeaderContent 内容区添加使用jQuery的Javascript脚本来改变标题颜色,脚本如下:
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnChangeTitleStyle").click(function () {
$("h2").css("color", "red");
});
});
</script>
</asp:Content>

请不熟悉jQuery的找相关资料看该段jQuery脚本，主要功能是响应按钮的Click事件，通过css改变标题h2标签的颜色为红色。

完成任务后把default.aspx页面设置为首页，运行该页面，点 Change Title Style按钮即可看到效果
如果对jQurey不熟，推荐大家看看园子博客从零开始学习jQuery