学习MVC3（二）——创建自己的第一个网页：实现用户登陆(2)

《学习MVC3（二）——创建自己的第一个网页：实现用户登陆(1)》由于图片太多了，文章太长，所以就分开写了，紧接上一篇，在上一篇文章中，搭起了程序的一个框架，下面我们开始一点点的在里面添加内容。

第一步：在登陆界面的左上角显示登陆的状态：登陆/退出，因为每个界面都要求在左上角显示这个状态，所以这个状态应该单独写在一个共享页面中，然后写在模板中。

View——Shared——鼠标右键点击——添加View：_LogOnPartial.cshtml

View Code

@using MyLogin.Models;
@model Users

@{
ViewBag.Title = "Register";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
#Password, #Name,#Email{
background: none repeat scroll 0 0 #FBFBFB;
border: 1px solid #E5E5E5;
font-size: 24px;
margin-bottom: 15px;
margin-right:16px;
margin-left: 16px;
margin-top: 5px;
padding: 3px;
width :90%;
}
label{
font-size:16px;
margin :15px;
}
</style>

<h2 style =" text-align:center;">创建新账户</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true, "Account creation was unsuccessful. Please correct the errors and try again.")
<div  style=" margin:0 auto;
margin: 0em auto;
padding: 0 0 5em;
width: 390px;
height:290px;
border: 1px solid #C0C0C0;">

<div class="editor-label">
@Html.Label("账号")
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.Name)
@Html.ValidationMessageFor(m => m.Name)
</div>

<div class="editor-label">
@Html.LabelFor(m => m.Email)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.Email)
@Html.ValidationMessageFor(m => m.Email)
</div>

<div class="editor-label">
@Html.Label("密码")
</div>
<div class="editor-field">
@Html.PasswordFor(m => m.Password)
@Html.ValidationMessageFor(m => m.Password)
</div>
<p>
<input type="submit" value="Register" style="margin: 10px 140px 10px; height: 30px; width: 80px;" />
</p>

</div>
}

到现在一个简单的用户登陆程序完成了，效果如下：

首页如图1



图1

点击左上角的[登陆]进入登陆界面，如图2



图2

点击登陆界面上的 注册，进入注册界面，如图3



图3