登錄對話框將使用jquery提供的對話框，所以不需要添加其它js文件。首先要為登錄對話框添加一個表單模型。在Models目錄下創建一個“AccountModels”類文件，然后添加一個Logon類，代碼如下：

1	public class LogOnModel
2	{
3	[ Required ( ErrorMessage = " 請輸入“用戶名” " ) ]
4	[ Display ( Name = " 用戶名： " ) ]
5	public string UserName { get ; set ; }
6	?
7	[ Required ( ErrorMessage = " 請輸入“密碼” " ) ]
8	[ DataType ( DataType . Password ) ]
9	[ Display ( Name = " 密碼 " ) ]
10	public string Password { get ; set ; }
11	?
12	[ Required ( ErrorMessage = " 請輸入“驗證碼” " ) ]
13	[ StringLength ( 6 , ErrorMessage = " 請輸入正確的驗證碼 " , MinimumLength = 6 ) ]
14	[ Display ( Name = " 驗證碼 " ) ]
15	public string VaildCode { get ; set ; }
16	?
17	[ Display ( Name = " 記住我？ " ) ]
18	public bool RememberMe { get ; set ; }
19	}
20	?

?

表單中將包括用戶名、密碼、驗證碼和“記住我”4個輸入項。

現在要創建一個顯示表單的操作和分部視圖。在“Controllers”目錄下創建“AccountController”控制器，然后創建一個“Logon”操作，代碼如下：

1	[ ChildActionOnly ]
2	public ActionResult Logon ( )
3	{
4	return PartialView ( ) ;
5	}
6	?

?

代碼很簡單，直接返回分部視圖就行了。接著創建對應的分部視圖，代碼如下：

1	@ model Extshop . Models . LogOnModel
2	?
3	@ using ( Ajax . BeginForm ( " Logon " , " Account " , new AjaxOptions { OnSuccess = " LogonSuccess " , LoadingElementId = " LogonLoad " , UpdateTargetId = " LogonMsg "
4	, OnBegin = " LogonBegin " } , new { id = " LogonForm " } ) )
5	{
6	< div >
7	< fieldset >
8	< legend > < / legend >
9	< p >
10	@ Html . LabelFor ( m = > m . UserName )
11	@ Html . TextBoxFor ( m = > m . UserName )
12	< / p >
13	< div class = " error " >
14	@ Html . ValidationMessageFor ( m = > m . UserName )
15	< / div >
16	< p >
17	@ Html . LabelFor ( m = > m . Password )
18	@ Html . PasswordFor ( m = > m . Password )
19	< / p >
20	< div class = " error " >
21	@ Html . ValidationMessageFor ( m = > m . Password )
22	< / div >
23	< p >
24	@ Html . LabelFor ( m = > m . VaildCode )
25	@ Html . TextBoxFor ( m = > m . VaildCode )
26	< / p >
27	< p style = " padding-left:80px;width:240px;line-height:54px; " > < img alt = " 驗證碼 " id = " Logon-vcode " height = " 40 " width = " 100 " src = " @Url.Action( " Vcode " , " Account " , new { id = " Logon " }) " style = " cursor:pointer; " / > & nbsp ; & nbsp ; 區分大小寫 < / p >
28	< div class = " error " >
29	@ Html . ValidationMessageFor ( m = > m . VaildCode )
30	< / div >
31	< p >
32	@ Html . CheckBoxFor ( m = > m . RememberMe )
33	@ Html . LabelFor ( m = > m . RememberMe )
34	< / p >
35	< p style = " text-align:center; " >
36	< input id = " LogonSubmit " type = " submit " value = " 登錄 " / >
37	< / p >
38	< p style = " text-align:center;display:none; " id = " LogonLoad " > < img src = " /Images/blue-loading.gif " alt = " 正在驗證…… " / > < / p >
39	< p style = " text-align:center;color:Red; " id = " LogonMsg " > < / p >
40	< / fieldset >
41	< / div >
42	}
43	?
44	< script type = " text/javascript " >
45	function LogonSuccess ( e ) {
46	$ ( " #LogonForm input " ) . removeAttr ( " readonly " ) ;
47	$ ( " #LogonSubmit " ) . removeAttr ( " disabled " ) ;
48	if ( e . Success ) {
49	$ ( " #LogonMsg " ) . html ( e . Message ) ;
50	$ ( " #login " ) . text ( " 退出 " ) ;
51	$ ( " #LoginDialog " ) . dialog ( " close " ) ;
52	} else {
53	$ ( " #LogonMsg " ) . html ( e . Message ) ;
54	}
55	}
56	?
57	function LogonBegin ( e ) {
58	$ ( " #LogonForm input " ) . attr ( " readonly " , true ) ;
59	$ ( " #LogonSubmit " ) . attr ( " disabled " , " disabled " ) ;
60	$ ( " #LogonMsg " ) . html ( " " ) ;
61	}
62	?
63	< / script >

?

因為使用Ajac提交，所以這里也是使用Ajax.BeginForm。這里要注意的是代碼第27行要通過Vcode操作輸出驗證碼。在Account控制器里的Vcdoe代碼如下：

1	public ActionResult Vcode ( string id , string d )
2	{
3	VerifyCode v = new VerifyCode ( ) ;
4	string code = v . CreateVerifyCode ( ) ; // 取隨機碼
5	Session [ id ] = code ;
6	v . Padding = 10 ;
7	byte [ ] bytes = v . CreateImage ( code ) ;
8	return File ( bytes , @ " image/jpeg " ) ;
9	}
10	?

?

代碼中為了避免同一頁面有多個表單使用驗證碼，從而出現混亂，因而需要傳入一個id值用以區分。因為直接返回圖片，所以直接返回File值，而不是視圖。

因為所有頁面都會使用到對話框，所以對話框必須加載在母版頁，切換到_Layout.cshtml文件，在“”標記上加入以下代碼：

1	< div id = " LoginDialog " title = " 登錄 " >
2	@ { Html . RenderAction ( " Logon " , " Account " ) ; }
3	< / div >
4	?

?

這樣，登錄對話框就已經實現了。接著修改一下頂部導航欄的登錄導航菜單，修改代碼如下：

1	< a href = " # " id = " login " > @ ( User . Identity . IsAuthenticated ? " 退出 " : " 登錄 " ) < / a > & nbsp ; & nbsp ; | & nbsp ; & nbsp ;

?

如果用戶已經登錄就顯示“退出”，如果未登錄則顯示“登錄”。

在Jquery函數中加入以下腳本

1	$ ( " #LoginDialog " ) . dialog ( { modal : true , autoOpen : false , width : 420 , height : 500 } ) ;
2	$ ( " #login " ) . click ( function ( ) {
3	if ( $ ( " #login " ) . text ( ) = = " 登錄 " ) {
4	$ ( " #LoginDialog " ) . dialog ( " open " ) ;
5	} else {
6	$ . ajax ( {
7	url : " /Account/LogOut " ,
8	success : function ( ) {
9	$ ( " #login " ) . text ( " 登錄 " ) ;
10	}
11	} ) ;
12	}
13	} ) ;
14	$ ( " #Logon-vcode " ) . click ( function ( ) {
15	var dt = new Date ( )
16	$ ( " #Logon-vcode " ) . attr ( " src " , " /Account/Vcode/Logon?d= " + dt . toString ( ) ) ;
17	} ) ;
18	?

?

代碼第1句通過HTML元素創建一個登錄對話框。當單擊登錄菜單，將執行第3行到第12行的帶。代碼首先判斷登錄菜單的顯示內容，如果是退出，則通過Ajax執行“Logout”操作，如果是登錄，則顯示登錄對話框。代碼第14行到第17行的作用是更新登錄對話框的驗證碼圖片。

?

總結：

本系列文章到此就結束了，通過本系列文章，作者自己對Asp.net MVC 3的整個開發流程已經有了基本的了解。總體來說是獲益良多，希望你們也是如此。總體感覺，Asp.net MVC 3加入Razor引擎后，代碼更加簡潔了，開放效率也相應的提高了。

源代碼下載：http://download.csdn.net/source/2998628

總結

以上是生活随笔為你收集整理的Asp.net MVC 3实例学习之ExtShop（六）——登录对话框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。