MVC编程实例----简易电子商务网站（一）

一.总体概览、规划

二.实现思路和步骤

三.按功能具体实现

1.商品浏览

[DisplayName("商品类别")]
[DisplayColumn("Name")]
public class ProductCategory
{
[Key]
public int Id { get; set; }

[DisplayName("商品类别名称")]
[Required(ErrorMessage="请输入商品类别名称")]
[MaxLength(20,ErrorMessage="类别名称不可超过20个字")]
public string Name { get; set; }

public virtual ICollection<Product> Products { get; set; }
}

[DisplayName("商品信息")]
[DisplayColumn("Name")]
public class Product
{
[Key]
public int Id { get; set; }

[DisplayName("商品类别")]
[Required]
public virtual ProductCategory ProductCategory { get; set; }

[DisplayName("商品名称")]
[Required(ErrorMessage = "请输入商品名称")]
[MaxLength(60, ErrorMessage = "不得超过60个字")]
public string Name { get; set; }

[DisplayName("商品简介")]
[Required(ErrorMessage = "请输入商品简介")]
[MaxLength(250, ErrorMessage = "商品简介不超过250字")]
public string Description { get; set; }

[DisplayName("商品颜色")]
[Required(ErrorMessage = "请选择颜色")]
public Color Color { get; set; }

[DisplayName("商品售价")]
[Required(ErrorMessage = "请输入商品售价")]
[Range(1,10000,ErrorMessage="商品售价必须介于1到10000之间")]
public int Price { get; set; }

[DisplayName("上架时间")]
[Description("如果不设置上架时间，代表不发售")]
public DateTime? PublishOn{get;set;}
}

public class HomeController : Controller
{
MvcShoppingContext db = new MvcShoppingContext();
// 首页
public ActionResult Index()
{
var data = db.ProductCategories.ToList();
data = db.ProductCategories.ToList();
return View(data);
}
//商品列表
public ActionResult ProductList(int id)
{
var productCategory = db.ProductCategories.Find(id);
var data = productCategory.Products.ToList();
return View(data);
}
//商品明细
public ActionResult ProductDetail(int id)
{
var data = db.Products.Find(id);
return View(data);

}
}

@model IEnumerable<MVCShopping.Models.ProductCategory>

<h2>@Html.DisplayNameFor(t=>t.Name)</h2>
<ul>
@foreach (var item in Model)
{
<li>@Html.ActionLink(item.Name, "ProductList", new { id=item.Id})</li>
}
</ul>

ProductList.cshtml

@model IEnumerable<MVCShopping.Models.Product>
@{
var ajaxOption = new AjaxOptions() {
HttpMethod="Post",
OnSuccess = "AddToCartSuccess",
OnFailure = "AddToCartFailure",
};
}
@section scripts{
@Scripts.Render("~/bundles/jqueryval")
<script>
function AddToCartSuccess() {
alert('添加购物从成功');
}
function AddToCartFailure(xhr) {
alert('添加购物车失败(HTTP状态代码：'+xhr.status+')');
}
</script>

}
<h2>@Html.DisplayNameFor(t => t.ToList()[0])</h2>
<h2>@Html.DisplayNameFor(t => t.Name)</h2>
<h3>您正在浏览[@Model.First().ProductCategory.Name]分类的信息</h3>

<table>
<tr>
<th>@Html.DisplayNameFor(model=>model.Name)</th>
<th>@Html.DisplayNameFor(model => model.Description)</th>
<th>@Html.DisplayNameFor(model => model.Price)</th>
<th>添加购物车</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>@Html.ActionLink(item.Name, "ProductDetail", new { id=item.Id})</td>
<td>@Html.DisplayFor(w=>item.Description)</td>
<td>@Html.DisplayFor(w=>item.Price)</td>
<td>@Ajax.ActionLink("添加购物车", "AddToCart", "Cart", new { ProductId=item.Id},ajaxOption)</td>
</tr>
}
</table>

ProductDetail.cshtml

@model MVCShopping.Models.Product

@{
var ajaxOption = new AjaxOptions()
{
OnSuccess = "AddToCartSuccess",
OnFailure = "AddToCartFailure",
};
}
@section scripts{
@Scripts.Render("~/bundles/jqueryval")
<script>
function AddToCartSuccess() {
alert('添加成功');
}
function AddToCartFailure(xhr) {
alert('添加购物车失败(HTTP状态代码：' + xhr.status + ')');
}
</script>
}

<h2>您正在察看"@Model.Name"商品</h2>
<fieldset>
<legend>@Html.DisplayNameFor(m=>m)</legend>
<div class="display-label">
@Html.DisplayNameFor(model=>model.Description)
</div>
<div class="display-field">
@Html.DisplayFor(model => model.Description)
</div>

<div class="display-label">
@Html.DisplayNameFor(model => model.Price)
</div>
<div class="display-field">
@Html.DisplayFor(model => model.Price)
</div>

<div class="display-label">
@Html.DisplayNameFor(model => model.PublishOn)
</div>
<div class="display-field">
@Html.DisplayFor(model => model.PublishOn)
</div>
</fieldset>
<p>
@Ajax.ActionLink("添加购物车","AddToCart","Cart",ajaxOption)
</p>

　　可以看出来，不论是html辅助方法还是ajax辅助方法的使用都是很固定很简洁的，也比较容易掌握，要不然也不会mvc能根据模板自动生成许多html控件。这里的页面使用了许多强类型的辅助方法,多写几个页面就觉着都是套路。比我菜和跟我一样菜的可以看我总结的这些内容，基本都涵盖了。

2.会员功能

　　这里的会员功能主要用到了常用的Forms认证。登录和注销的方法分别是：FormsAuthentication.SetAuthCookie()和FormsAuthentication.SignOut()。详见Fish Li大神的这篇文章。还是分三步走。

[DisplayName("会员信息")]
[DisplayColumn("Name")]
public class Member
{
[Key]
public int id { get; set; }

[DisplayName("会员帐号")]
[Description("以Email为会员的登陆帐号")]
[Required(ErrorMessage = "请输入Email地址")]
[MaxLength(250, ErrorMessage = "不得超过250个字")]
[DataType(DataType.EmailAddress)]
public string Email { get; set; }

[DisplayName("会员密码")]
[Description("密码将以SHA1进行哈西运算，通过运算后的结果转为HEX表示法的字符串长度都为40")]
[Required(ErrorMessage = "请输入密码")]
[MaxLength(40, ErrorMessage = "不得超过40个字")]
[DataType(DataType.Password)]
public string Password { get; set; }

[DisplayName("中文姓名")]
[Description("忽略外国人")]
[Required(ErrorMessage = "请输入中文姓名")]
[MaxLength(5, ErrorMessage = "不得超过5个字")]
public string Name { get; set; }

[DisplayName("网络昵称")]
[Required(ErrorMessage = "请输入网络昵称")]
[MaxLength(15, ErrorMessage = "不得超过15个字")]
public string Nickname { get; set; }

[DisplayName("会员注册时间")]
public DateTime RegisterOn { get; set; }

//AuthCode会保存一个GUID值
[DisplayName("会员启用认证码")]
[MaxLength(36)]
[Description("当AuthCode等于null代表会员已通过Email认证")]
public string AuthCode { get; set; }

public virtual ICollection<OrderHeader> orders { get; set; }
}

public class MemberLoginViewModel
{
/// <summary>
/// 在帐户这显示指定了DataType(DataType.EmailAddress,ErrorMessage="请输入您的Email地址")
/// 但是并不现实错误信息，这是因为MVC4并没有针对DataType属性支持客户端的js验证功能
/// </summary>
[DisplayName("会员帐号")]
[Required(ErrorMessage = "请输入{0}")]
[DataType(DataType.EmailAddress,ErrorMessage="请输入您的Email地址")]
public string Email { get; set; }

[DisplayName("会员密码")]
[Required(ErrorMessage = "请输入{0}")]
[DataType(DataType.Password)]
public string Password { get; set; }
}

public class MemberController : Controller
{
MvcShoppingContext db = new MvcShoppingContext();
private string pwSalt = "AlrySq1oPe2Mh784QQwG6jRAfkdPpDa90J0i";
// 会员注册页面

public ActionResult Register()
{
return View();
}

//写入会员信息
[HttpPost]
public ActionResult Register([Bind(Exclude="RegisterOn,AuthCode")]Member member)
{
//检查会员是否存在
var chk_member = db.Members.Where(p => p.Email == member.Email).FirstOrDefault();
if (chk_member != null)
{
ModelState.AddModelError("Email","您输入的Email已经有人注册过了!");
}
if (ModelState.IsValid)
{
//将密码加盐在之后进行哈希运算
member.Password = FormsAuthentication.HashPasswordForStoringInConfigFile(pwSalt + member.Password, "SHA1");
member.RegisterOn = DateTime.Now;
//会员验证码,采用Guid当成验证码属性,避免有会员使用到重复的验证码
member.AuthCode = Guid.NewGuid().ToString();
db.Members.Add(member);
db.SaveChanges();

return RedirectToAction("Index","Home");
}
else
{ return View(); }
}

//显示会员登陆页面
public ActionResult Login(string returnUrl)
{
ViewBag.ReturnUrl = returnUrl;
return View();
}
//会员登陆
[HttpPost]
public ActionResult Login(string email, string password, string returnUrl)
{
if (ValidateUser(email, password))
{
FormsAuthentication.SetAuthCookie(email,false);
if (string.IsNullOrEmpty(returnUrl))
{
return RedirectToAction("Index", "Home");
}
else
return Redirect(returnUrl);
}
ModelState.AddModelError("", "输入的帐号或者密码错误");
return View();
}

private bool ValidateUser(string email, string password)
{
var hash_pw = FormsAuthentication.HashPasswordForStoringInConfigFile(pwSalt + password, "SHA1");
var member = db.Members.Where(p => p.Email == email && p.Password == hash_pw).FirstOrDefault();
return(member!=null);
}

//会员注销
public ActionResult Logout()
{
FormsAuthentication.SignOut();
Session.Clear();
return RedirectToAction("Index", "Home");
}

public ActionResult ValidateRegister()
{

return View();
}
}

@model MVCShopping.Models.MemberLoginViewModel

@{
ViewBag.Title = "Login";
}

<h2>Login</h2>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)

<fieldset>
<legend>MemberLoginViewModel</legend>

<div class="editor-label">
@Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.Email, new { data_val_Email="请输入Email地址"})
@Html.ValidationMessageFor(model => model.Email)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Password)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Password)
@Html.ValidationMessageFor(model => model.Password)
</div>

<p>
<input type="submit" value="登陆" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

Register.cshtml

@model MVCShopping.Models.Member

@{
ViewBag.Title = "注册";
}

<h2>会员注册</h2>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)

<fieldset>
<legend>请输入会员注册信息</legend>

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

<div class="editor-label">
@Html.LabelFor(model => model.Password)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Password)
@Html.ValidationMessageFor(model => model.Password)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Nickname)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Nickname)
@Html.ValidationMessageFor(model => model.Nickname)
</div>

<p>
<input type="submit" value="注册" />
</p>
</fieldset>
}

<div>
@Html.ActionLink("Back to List", "index")
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

3.购物车功能

　　这个功能主要是用到了Session（我见过的购物车都是以session实现的），在Session中存储Cart信息。基本上就是围绕以下这一段关键代码进行的：

public class Cart
{
[DisplayName("选购商品")]
[Required]
public Product Product { get; set; }

[DisplayName("选购数量~")]
[Required]
public int Amount { get; set; }
}

public class CartController : Controller
{
//非会员也可使用所以购物车保存在Session中
// 显示当前购物从项目
MvcShoppingContext db = new MvcShoppingContext();
List<Cart> Carts
{
get {
if (Session["Carts"] == null)
{
Session["Carts"] = new List<Cart>();
}
return Session["Carts"] as List<Cart>;
}
set { Session["Carts"] = value; }
}
public ActionResult Index()
{
return View(this.Carts);
}
//添加产品项目到购物车，如果没有传入Amount参数则默认购买数量为1
//因为要通过Ajax调用这个Action，所以可以先标示Post属性
[HttpPost]
public ActionResult AddToCart(int ProductId, int Amount = 1)
{
var product = db.Products.Find(ProductId);
//验证产品是否存在
if (product == null)
return HttpNotFound();
var existiongCart = this.Carts.FirstOrDefault(p => p.Product.Id == ProductId);
if (existiongCart != null)
{
existiongCart.Amount += 1;
}
else
{
this.Carts.Add(new Cart() { Product=product,Amount=Amount});
}
return new HttpStatusCodeResult(HttpStatusCode.Created);
}
//移出购物从项目
[HttpPost]
public ActionResult Remove(int ProductId)
{
var existingCart = this.Carts.FirstOrDefault(p => p.Product.Id == ProductId);
if (existingCart != null)
{
this.Carts.Remove(existingCart);
}
return new HttpStatusCodeResult(System.Net.HttpStatusCode.OK);
}
//更新数量
[HttpPost]
public ActionResult UpdateAmount(List<Cart> Carts)
{
foreach (var item in Carts)
{
var existingCart = this.Carts.FirstOrDefault(p => p.Product.Id == item.Product.Id);
if (existingCart != null)
{
existingCart.Amount = item.Amount;
}
}
return RedirectToAction("Index","Cart");
}
}

@model IEnumerable<MVCShopping.Models.Cart>

@{
var ajaxOption = new AjaxOptions()
{
OnSuccess = "RemoveCartSuccess",
OnFailure = "RemoveCartFailure",
Confirm = "您确定要从购物车删除吗？",
HttpMethod = "Post",
};
}

@section scripts{
@Scripts.Render("~/bundles/jqueryval")

<script>
function RemoveCartSuccess() {
alert('移出购物从成功');
location.reload();
}
function RemoveCartFailure(xhr)
{
alert('移出购物车失败(Http状态代吗:' + xhr.status);
}
</script>
}

<h2>购物车列表</h2>
@using (Html.BeginForm("UpdateAmount", "Cart"))
{
<table>
<tr>
<th>产品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th></th>
</tr>
@{int subTotal = 0;}

@foreach (var item in Model)
{
subTotal += item.Product.Price * item.Amount;
var ddlAmountList = new SelectList(Enumerable.Range(1,10),item.Amount);
@Html.Hidden(item.Product.Id.ToString())
<tr>
<td>@Html.DisplayFor(t=>item.Product.Name)</td>
<td>NT￥@(item.Product.Price)</td>
<td>@Html.DropDownListFor(t=>item.Amount,ddlAmountList)</td>
<td>NT￥@(item.Product.Price*item.Amount)</td>
<td>
@Ajax.ActionLink("删除","Remove",new{ProductId=item.Product.Id},ajaxOption)
</td>
</tr>
}
<tr>
<th></th>
<th></th>
<th>总价</th>
<th id="subtotal">NT￥ @subTotal</th>
<th></th>
</tr>
</table>
<p>
<input type="submit" value="更新数量" />
<input type="button" value="完成订单" onclick="location.href='@Url.Action("Complete","Order")';" />
</p>
}