- 拷贝素材css目录下的style.css文件至Content目录，拷贝images目录至项目中。
- 右键点击/Views/Shared目录，选择“添加”-“MVC 5 Partial Page (Razor)”，设定“视图名称”为“_top”。
- 在新建的_top.cshtml中输入头部代码（从素材中拷贝），修改相关css文件及图片的引用路径：
<div id="head">
<div id="logo"><img src="~/Content/images/shopping_logo.png" /></div>
<ul id="logomenu">
<li><a href="index.html">首页</a>▕</li>
<li><a href="register.html">注册</a>▕</li>
<li><a href="login.html">登录</a>▕</li>
<li><a href="#">购物车</a>▕</li>
<li><a href="#">会员中心</a>▕</li>
<li><a href="#">收藏夹</a>▕</li>
<li><a href="#">客服中心</a>▕</li>
<li><a href="#">留言板</a></li>
</ul>
<div style="clear:both"></div>
<div class="search">
<div class="leader">
<div class="right" style="overflow: hidden; "> <a target="_blank" href='#' style="top: 0px;"><span>1</span>短袖1</a> <a target="_blank" href=#' style="top: 0px;"><span>2</span>皮鞋1</a> </div>
</div>
</div>
</div>
- 右键点击/Views/Shared目录，选择“添加”-“MVC 5 Layout Page (Razor)”，设定“视图名称”为“_Layout”布局页，在_Layout.cshtml中使用@Html.Partial加载分部视图_top.cshtml，核心代码如下：
<body>
<div id="container">
@Html.Partial("_Top")
<div id="content">
@RenderBody()
</div>
<div id="foot">Copyright(c)2008-2010 FasionShopping时尚有限公司 鄂ICP备05009763号</div>
</div>
</body>
- 在Home控制器中创建Register()方法并生成/views/admin/Register.cshtml视图，Register.cshtml视图需要使用_Layout.cshtml布局页，（核心代码从素材register.html中拷贝）。
- 修改/views/admin/Register.cshtml文件，将表单及表单元素全部使用HTML辅助方法代替，部分代码如下：
@{
ViewBag.Title = "Register";
Layout = "~/Views/Shared/_UserLayout.cshtml";
}
@if (ViewBag.Mag != null)
{
<script>alert('@ViewBag.Msg')</script>
}
@using (Html.BeginForm("Register", "User", FormMethod.Post))
{
<div class="in_zt">
<div class="re_zt">
<div class="re_zt_t">会员注册</div>
<div>
<div class="border1_t"></div>
<div class="border1_m">
<table class="table_form pad_4" id="reg_fm">
<tbody>
<tr>
<th class="style2"><span class="must_input">*</span>账号</th>
<td>
@Html.TextBox("username")
</td>
</tr>
<tr>
<th class="style2"><span class="must_input">*</span>Email</th>
<td>
@Html.TextBox("email")
</td>
</tr>
<tr>
<th class="style2"><span class="must_input">*</span>密码</th>
<td>
@Html.TextBox("pwd", null, new {
style = "width:124px;" })
</td>
</tr>
<tr>
<th class="style2"><span class="must_input">*</span>确认密码</th>
<td>
@Html.TextBox("repwd", null, new {
style = "width:124px;" })
</td>
</tr>
<tr>
<th class="style2"><span class="must_input">*</span>昵称</th>
<td>@Html.TextBox("nick", null, new {
style = "width:124px;" })</td>
</tr>
<tr>
<th class="style2"><span class="must_input">*</span>QQ</th>
<td>@Html.TextBox("QQ", null, new {
style = "width:124px;" })</td>
</tr>
<tr>
<th class="style2"><span class="must_input">*</span>手机号</th>
<td>@Html.TextBox("phone", null, new {
style = "width:124px;" })</td>
</tr>
<tr>
<th class="style2"><span class="must_input">*</span>安全问题</th>
<td>@Html.TextBox("question", null, new {
style = "width:235px;" })</td>
</tr>
<tr>
<th class="style2"><span class="must_input">*</span>安全密码</th>
<td>@Html.TextBox("secPwd", null, new {
style = "width:235px;" })</td>
</tr>
<tr>
<td class="style2"></td>
<td>
<br />
<input name="agreement" value="1" checked="checked" class="checkbox" type="checkbox" style="width:20px;" />
我已看过并接受《<a href="#" target="_blank" style="text-decoration: underline;">用户协议</a>》
</td>
</tr>
<tr>
<td class="style3"></td>
<td class="style1">
<input type="image" name="regBtn" id="regBtn" src="~/Content/images/but_reg.gif" style="height:35px;width:98px;border-width:0px;" />
</td>
</tr>
<tr>
<td class="style2"></td>
<td>
<br />
<img class="b_5" src="images/ico_04.gif" alt="" />我已有账号，我要 <a href="/User/Login" style="color: rgb(210,128, 164);">登录</a><br />
</td>
</tr>
</tbody>
</table>
</div>
<div class="border1_b"></div>
</div>
</div>
</div>
}