本次練習，我們將熟悉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配置資訊如下：
<membership>
<providers>
<clear/>
<add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="ApplicationServices"
enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false"
maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10"
applicationName="/" />
</providers>
</membership>
<profile>
<providers>
<clear/>
<add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider" connectionStringName="ApplicationServices" applicationName="/"/>
</providers>
</profile>
<roleManager enabled="false">
<providers>
<clear/>
<add name="AspNetSqlRoleProvider" type="System.Web.Security.SqlRoleProvider" connectionStringName="ApplicationServices" applicationName="/" />
<add name="AspNetWindowsTokenRoleProvider" type="System.Web.Security.WindowsTokenRoleProvider" applicationName="/" />
</providers>
</roleManager>
| 你可以從一下的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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
