MVC Music Store 在线音乐商店示例分析(13)View(Account、Checkout、Home、Shared、ShoppingCart)
2011-03-07 17:25
435 查看
Account 控制器包含了LogOn、LogOff、Register、ChangePassword、ChangePasswordSuccess这几个Action。每个Action都对应的有相应的View。
首先来看看LogOn的View。MVC Music Store这个案例使用的是MVC3,View部分采用的是Razor模板,Razor模板对应的View的后缀名为cshtml。
在Razor模板中,第一行代码的意思就是指定该模板所对应呈现数据的Model类型。例如:
@model MvcMusicStore.Models.LogOnModel
aspx模板写法:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcMusicStore.Models.LogOnModel>" %>
这种写法比老式的使用page指令的方式要少些很多的代码,并且更清晰明了。嘿嘿,看到Razor的这种模板之后,个人感觉非常爽!当然Razor模板不止这么点东西,查了下资料。请参考《Introducing “Razor” – a new view engine for ASP.NET 》,英文不好的可以查看《介绍“Razor”— ASP.NET的一个新视图引擎》。
第三行的代码一般如下:
@{
ViewBag.Title = "Log On";
}
这里给ViewBag.Title变量赋值。这个变量是在母版页Shared文件夹_Layout.cshtml中的标题部分设置文档标题用的变量。并且这个变量是.NET Framework 4.0的一个新的特性--动态表达式(动态表达式是在在运行的时候解析的)。简单的讲就是随时可以给某个对象添加一个属性并使用,而不需要向一起那样先声明才能使用。好东西,不过这种做法也有点让人小疑惑一把。因为第一次看这个的时候,找了半天都没找到这个变量是什么东西,还以为是ViewBag里面的已经声明好的变量,找到ViewBag定义查看的时候却什么都没有,ViewBag是个dynamic(动态类型参考)类型的变量。
LogOn.cshtml这个页面的部分代码说明:
第9行:@Html.ActionLink("Register", "Register") 意思是通过HTMLHelper对象产生一个链接到Register Action的超级连接标记。HTMLHelper对象是专门用于呈现HTML元素用的一个系统内置对象。
第12行:@Url.Content("~/Scripts/jquery.validate.min.js") 意思是通过URLHelper对象将括号内的服务器虚拟路径转换为绝对路径。URLHelper对象包含一系列专门处理MVC生产URL地址的方法。
第15行:@Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.") 意思是通过HTMLHelper对象,呈现出界面验证登陆出现错误后的消息。
第17行和第48行:@using (Html.BeginForm()) {意思是这其中的HTML代码将包含在表单当中。
第23行:@Html.LabelFor(m => m.UserName) 将来生成一个标签,里面的数据为模型中的UserName
第26行: @Html.TextBoxFor(m => m.UserName)生成一个文本框,里面的数据为模型中的用户名。
第27行:@Html.ValidationMessageFor(m => m.UserName)生成一个验证消息显示控件。
第34行:@Html.PasswordFor(m => m.Password) 生成一个密码框,用于模型中的密码呈现和输入。
第39行:@Html.CheckBoxFor(m => m.RememberMe)生成一个复选框,用于记住密码
Register.cshtml、ChangePassword.cshtml的代码与登陆界面的代码差不多,这里不过多的说明了。
CHeckout部分AddressAndPayment.cshtml、Complete.cshtml也都非常简单,即便上和上面的差不多。这里也不说明了。
Home部分Index.cshtml这个view中个循环提取代码:
这里通过迭代model中每个album元素,并生成出对应的html标记呈现数据。
Shared文件夹部分的代码是整个站点共享View,保存了母版页、错误处理页面、以及Album编辑页面。
Album.cshtml、Error.cshtml页面都非常简单易懂,这里不做过多说明。
_Layout.cshtml中的代码:
可以看出整个母版分为三个部分,头部、菜单、主体正文、脚部。
@{Html.RenderAction("GenreMenu", "Store");}用于请求GenreMenu Action生成出菜单。
@RenderBody()用于呈现将来的内容页面。
ShoppingCart购物车文件夹部分,两个视图,一个是CartSummary.cshtml、另一个是Index.cshtml。
CartSummary.cshtml只有一句代码
@Html.ActionLink("Cart (" + ViewData["CartCount"] + ")",
"Index",
"ShoppingCart",
new { id = "cart-status" })
用于生成链接到购物车信息的链接。
Index.cshtml页面的javascript脚本比较多。
这个部分的代码用于在Dom加载完毕的时候,生成移除购物车项链接按钮的移除购物项的处理事件。移除购物项需要ajax通知服务器的ShoppingCart控制器中的RemoveFromCart Action处理移除项内容。
handleUpdate()方法在该案例中没有使用到。。。
HTML部分代码:
此处用于提取模型中的购物项内容,并生成表格中的一行购物项。
@Html.ActionLink(item.Album.Title, "Details", "Store", new { id = item.AlbumId }, null)生成购物项名称,并带有链接到该项的详细信息的超链接。
首先来看看LogOn的View。MVC Music Store这个案例使用的是MVC3,View部分采用的是Razor模板,Razor模板对应的View的后缀名为cshtml。
在Razor模板中,第一行代码的意思就是指定该模板所对应呈现数据的Model类型。例如:
@model MvcMusicStore.Models.LogOnModel
aspx模板写法:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcMusicStore.Models.LogOnModel>" %>
这种写法比老式的使用page指令的方式要少些很多的代码,并且更清晰明了。嘿嘿,看到Razor的这种模板之后,个人感觉非常爽!当然Razor模板不止这么点东西,查了下资料。请参考《Introducing “Razor” – a new view engine for ASP.NET 》,英文不好的可以查看《介绍“Razor”— ASP.NET的一个新视图引擎》。
第三行的代码一般如下:
@{
ViewBag.Title = "Log On";
}
这里给ViewBag.Title变量赋值。这个变量是在母版页Shared文件夹_Layout.cshtml中的标题部分设置文档标题用的变量。并且这个变量是.NET Framework 4.0的一个新的特性--动态表达式(动态表达式是在在运行的时候解析的)。简单的讲就是随时可以给某个对象添加一个属性并使用,而不需要向一起那样先声明才能使用。好东西,不过这种做法也有点让人小疑惑一把。因为第一次看这个的时候,找了半天都没找到这个变量是什么东西,还以为是ViewBag里面的已经声明好的变量,找到ViewBag定义查看的时候却什么都没有,ViewBag是个dynamic(动态类型参考)类型的变量。
LogOn.cshtml这个页面的部分代码说明:
@model MvcMusicStore.Models.LogOnModel @{ ViewBag.Title = "Log On"; } <h2>Log On</h2> <p> Please enter your username and password. @Html.ActionLink("Register", "Register") if you don't have an account. </p> <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> @Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.") @using (Html.BeginForm()) { <div> <fieldset> <legend>Account Information</legend> <div class="editor-label"> @Html.LabelFor(m => m.UserName) </div> <div class="editor-field"> @Html.TextBoxFor(m => m.UserName) @Html.ValidationMessageFor(m => m.UserName) </div> <div class="editor-label"> @Html.LabelFor(m => m.Password) </div> <div class="editor-field"> @Html.PasswordFor(m => m.Password) @Html.ValidationMessageFor(m => m.Password) </div> <div class="editor-label"> @Html.CheckBoxFor(m => m.RememberMe) @Html.LabelFor(m => m.RememberMe) </div> <p> <input type="submit" value="Log On" /> </p> </fieldset> </div> }
第9行:@Html.ActionLink("Register", "Register") 意思是通过HTMLHelper对象产生一个链接到Register Action的超级连接标记。HTMLHelper对象是专门用于呈现HTML元素用的一个系统内置对象。
第12行:@Url.Content("~/Scripts/jquery.validate.min.js") 意思是通过URLHelper对象将括号内的服务器虚拟路径转换为绝对路径。URLHelper对象包含一系列专门处理MVC生产URL地址的方法。
第15行:@Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.") 意思是通过HTMLHelper对象,呈现出界面验证登陆出现错误后的消息。
第17行和第48行:@using (Html.BeginForm()) {意思是这其中的HTML代码将包含在表单当中。
第23行:@Html.LabelFor(m => m.UserName) 将来生成一个标签,里面的数据为模型中的UserName
第26行: @Html.TextBoxFor(m => m.UserName)生成一个文本框,里面的数据为模型中的用户名。
第27行:@Html.ValidationMessageFor(m => m.UserName)生成一个验证消息显示控件。
第34行:@Html.PasswordFor(m => m.Password) 生成一个密码框,用于模型中的密码呈现和输入。
第39行:@Html.CheckBoxFor(m => m.RememberMe)生成一个复选框,用于记住密码
Register.cshtml、ChangePassword.cshtml的代码与登陆界面的代码差不多,这里不过多的说明了。
CHeckout部分AddressAndPayment.cshtml、Complete.cshtml也都非常简单,即便上和上面的差不多。这里也不说明了。
Home部分Index.cshtml这个view中个循环提取代码:
@foreach (var album in Model) { <li><a href="@Url.Action("Details", "Store", new { id = album.AlbumId })"> <img alt="@album.Title" src="@album.AlbumArtUrl" /> <span>@album.Title</span> </a> </li> }
这里通过迭代model中每个album元素,并生成出对应的html标记呈现数据。
Shared文件夹部分的代码是整个站点共享View,保存了母版页、错误处理页面、以及Album编辑页面。
Album.cshtml、Error.cshtml页面都非常简单易懂,这里不做过多说明。
_Layout.cshtml中的代码:
<body> <div id="header"> <h1><a href="/">ASP.NET MVC MUSIC STORE</a></h1> <ul id="navlist"> <li class="first"><a href="@Url.Content("~")" id="current">Home</a></li> <li><a href="@Url.Content("~/Store/")">Store</a></li> <li>@{Html.RenderAction("CartSummary", "ShoppingCart");}</li> <li><a href="@Url.Content("~/StoreManager/")">Admin</a></li> </ul> </div> @{Html.RenderAction("GenreMenu", "Store");} <div id="main"> @RenderBody() </div> <div id="footer"> built with <a href="http://asp.net/mvc">ASP.NET MVC 3</a> </div> </body>
可以看出整个母版分为三个部分,头部、菜单、主体正文、脚部。
@{Html.RenderAction("GenreMenu", "Store");}用于请求GenreMenu Action生成出菜单。
@RenderBody()用于呈现将来的内容页面。
ShoppingCart购物车文件夹部分,两个视图,一个是CartSummary.cshtml、另一个是Index.cshtml。
CartSummary.cshtml只有一句代码
@Html.ActionLink("Cart (" + ViewData["CartCount"] + ")",
"Index",
"ShoppingCart",
new { id = "cart-status" })
用于生成链接到购物车信息的链接。
Index.cshtml页面的javascript脚本比较多。
$(function () { // Document.ready -> link up remove event handler $(".RemoveLink").click(function () { // Get the id from the link var recordToDelete = $(this).attr("data-id"); if (recordToDelete != '') { // Perform the ajax post $.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete }, function (data) { // Successful requests get here // Update the page elements if (data.ItemCount == 0) { $('#row-' + data.DeleteId).fadeOut('slow'); } else { $('#item-count-' + data.DeleteId).text(data.ItemCount); } $('#cart-total').text(data.CartTotal); $('#update-message').text(data.Message); $('#cart-status').text('Cart (' + data.CartCount + ')'); }); } }); });
这个部分的代码用于在Dom加载完毕的时候,生成移除购物车项链接按钮的移除购物项的处理事件。移除购物项需要ajax通知服务器的ShoppingCart控制器中的RemoveFromCart Action处理移除项内容。
handleUpdate()方法在该案例中没有使用到。。。
HTML部分代码:
@foreach (var item in Model.CartItems) { <tr id="row-@item.RecordId"> <td> @Html.ActionLink(item.Album.Title, "Details", "Store", new { id = item.AlbumId }, null) </td> <td> @item.Album.Price </td> <td id="item-count-@item.RecordId"> @item.Count </td> <td> <a href="#" class="RemoveLink" data-id="@item.RecordId">Remove from cart</a> </td> </tr> }
此处用于提取模型中的购物项内容,并生成表格中的一行购物项。
@Html.ActionLink(item.Album.Title, "Details", "Store", new { id = item.AlbumId }, null)生成购物项名称,并带有链接到该项的详细信息的超链接。
相关文章推荐
- MVC Music Store 在线音乐商店示例分析(10)ShoppingCartController
- MVC Music Store 在线音乐商店示例分析(6)ShoppingCart
- MVC Music Store 在线音乐商店示例分析(4)Artist、Cart、Genre、MusicStoreEntities
- MVC Music Store 在线音乐商店示例分析(14)View(Browse、Details、GenreMenu、Create、 Edit、Delete、_ViewStart)
- MVC Music Store 在线音乐商店示例分析(9)HomeController
- MVC Music Store 在线音乐商店示例分析(2)AccountModels
- MVC Music Store 在线音乐商店示例分析(11)StoreController
- MVC Music Store 在线音乐商店示例分析(12)StoreManagerController
- MVC Music Store 在线音乐商店示例分析(3)Album
- MVC Music Store 在线音乐商店示例分析(5)Order、OrderDetail
- MVC Music Store 在线音乐商店示例分析(1)DataBase
- MVC Music Store 在线音乐商店示例分析(7)AccountController
- MVC Music Store 在线音乐商店示例分析(8)CheckoutController
- MVC Music Store 在线音乐商店示例分析(15)总结
- Asp.net MVC 示例项目"Suteki.Shop"分析之---ViewData
- ASP.NET MVC 音乐商店完整项目示例
- 我的MVC之旅(3)--------MVC Music Store 第三篇 Views and ViewModels [翻译]
- Asp.net MVC 示例项目"Suteki.Shop"分析之---IOC(控制反转)
- ASP.NET MVC 音乐商店 - 6. 使用 DataAnnotations 进行模型验证
- Asp.net MVC 示例项目"Suteki.Shop"分析之---NHibernate