登录对话框将使用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最终源代码
Asp.net MVC 3实例学习之ExtShop(四)的源代码
ASP.NET MVC作为微软官方的.NET平台下MVC解决方案,自诞生起就吸引了众多.NET平台开发人员的眼球。ASP.NET MVC从一开始的设计思路就与Struts不同,它的映射是利用路由配置而非xml,从而大大降低了开发复杂度,并且比...
基于ASP.NET MVC框架的学习项目,包含MVC的框架的设计思路,通俗易懂学习MVC框架,需要VS2010及以上版本打开,初学者可以快速理解MVC的构思以及开发。
vs2010 配sql2008 asp.Net mvc4 开发的实例
Asp.Net MVC案例教程 Asp.Net MVC案例教程 Asp.Net MVC案例教程 Asp.Net MVC案例教程 Asp.Net MVC案例教程 Asp.Net MVC案例教程
asp.net MVC3实例开发教程,是基于ASP.NET MVC3+ADO.NET4+EF4.1+Jquery+插件等技术下的CRM企业客户管理系统,asp.net MVC3实例开发教程由北风网提供,asp.net MVC3实例开发教程包括:营销管理、客户管理、服务管理、...
精通asp.net mvc 4 实例源码,第个章节实例,包含SportsStore.
通过本书的学习,读者可以全面掌握ASP.NET MVC的开发,并从代码中获取软件开发与架构设计的经验与灵感。本书具有很大的参考价值,既适合ASP.NET MVC开发初学者阅读,也适合有一定基础的ASP.NET MVC开发人员进行技术...
asp.net mvc 弹出窗口 技巧asp.net mvc 弹出窗口 技巧asp.net mvc 弹出窗口 技巧asp.net mvc 弹出窗口 技巧
ASP.NET MVC 5 - 开始MVC 5之旅 2. ASP.NET MVC 5 - 控制器 3. ASP.NET MVC 5 - 视图 4. ASP.NET MVC 5 - 将数据从控制器传递给视图 5. ASP.NET MVC 5 - 添加一个模型 6. ASP.NET MVC 5 - 创建连接字符串并使用SQL ...
微软官方Asp.net Mvc源代码,可以深入理解mvc的原理,内部实现
asp.net mvc架构网站实例.
AngularJS 开发 ASP.NET MVC.
Pro ASP.NET MVC 5 (精通ASP.NET MVC5框架) 中文+英文+配套源代码
功能简单 IDE:VS2013 架构:ASP.NET MVC5 语言:C#
ASP.NET MVC 项目集合
ASP.NET MVC5高级编程(第5版.NET开发经典名著)作为Microsoft备受欢迎的MVC技术的最新版本,MVC 5是一个成熟的Web应用程序框架,支持快速的、TDD友好的开发。MVC允许开发人员创建动态的、数据驱动的网站。这样的...
asp.net mvc后台管理系统 数据库