MVC3学习第十四章 佟掌柜第三弹——MVC3下利用陕北吴旗娃的验证码控件实现验证码功能以及在mvc3下使用编辑器

本章学习内容

1.利用陕北吴旗娃的验证码控件实现验证码功能

2.利用kindeditor编辑器实现mvc3下的编辑器功能

验证码是软件或网站中比较常用的一种功能，无论是对于房租恶意注册登录还是刷票，灌水之类的，都有很大的作用，在webform里我们可以利用第三方控件很方便的实现这个功能，当然自己手写一个生成验证码的类也不是太难，今天我们介绍一个在mvc3下实现验证码的控件，毕竟是能简单一点对于自己编码来说是最好的。控件和上一章的分页控件来自同一个地方，在上一章提及的官网也可以下载到，或者点此下载验证码控件

下载验证码控件dll后，请添加引用到项目

修改UserInfo/Login.cshtml完整源代码如下：

@using Webdiyer.WebControls.Mvc
@model MyShopTest.Models.UserInfo
@{
ViewBag.Title = "用户登录";
Layout = "~/Views/Shared/MyMaster.cshtml";
}
<h2>
用户登录</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>
<p>
没有有帐号，<a href="Register">点此</a>注册
</p>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset>
<legend>用户登录</legend>
<div class="editor-label">
@Html.LabelFor(model => model.UserName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.UserName)
@Html.ValidationMessageFor(model => model.UserName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.UserPwd)
</div>
<div class="editor-field">
@Html.PasswordFor(model => model.UserPwd)
@Html.ValidationMessageFor(model => model.UserPwd)
</div>
<div class="editor-label">
验证码:
</div>
<div class="editor-field">
@Html.Raw(Html.MvcCaptcha(new MvcCaptchaOptions { ValidationInputBoxId = "captchaTextBox", CaptchaImageContainerId = "captchaImage", ReloadLinkText = "看不清？换一张" ,Width=100,Height=30}))
<span id="captchaImage"></span>
<br />

<input type="text" name="captchaTextBox" id="captchaTextBox" />
</div>
<p>
<input type="submit" value="登录" />
</p>
</fieldset>
}

我们来解析一下代码：

@Html.Raw(Html.MvcCaptcha(new MvcCaptchaOptions { ValidationInputBoxId = "captchaTextBox", CaptchaImageContainerId = "captchaImage", ReloadLinkText = "看不清？换一张" ,Width=100,Height=30}))

此段代码是用来创建验证码的，new MvcCaptchaOptions 表示初始化验证码设置项，依次是输入验证码的文本框id，包含验证码图片控件的父容器的客户端Id（ajax加载时用到，此处不涉及），刷新验证码的提示文本，验证码的高，宽，至于验证码的最外围，我们使用了Html.Raw是为了让验证码控件不被mvc进行html编码，原样输出html代码，否则我们只能看到是经过html编码后的字符串

修改UserInfo控制器里的Login的Action，代码如下：

/// <summary>
/// 登录处理
/// </summary>
/// <returns></returns>
[HttpPost]
[AcceptVerbs(HttpVerbs.Post), ValidateMvcCaptcha("captchaTextBox")]
public ActionResult Login(string UserName, string UserPwd)
{
bool isOk = ModelState.IsValid;//会加入验证码验证
var user = new UserInfo();
if (!isOk)
{
user.UserName = UserName;
user.UserPwd = UserPwd;
ModelState.AddModelError("", "验证码错误!");
return View(user);
}
user = db.UserInfos.SingleOrDefault(u => u.UserName == UserName && u.UserPwd == UserPwd);
if (user != null)
{
Session["User"] = user;
return RedirectToAction("Index");
}
else
{
user = new UserInfo();
user.UserName = UserName;
user.UserPwd = UserPwd;
ModelState.AddModelError("", "用户名或密码错误!");
return View(user);
}

}

代码略作解释：

[AcceptVerbs(HttpVerbs.Post), ValidateMvcCaptcha("captchaTextBox")]

此段代码表示让这个Action进行验证码验证，验证内容来自于captchaTextBox，ModelState.IsValid会将我们的验证码对比一并加入进去，我们只需要知道ModelState.IsValid是否通过即可

重新编译项目，运行：



已经可以实现我们的验证码功能，当然这个验证码控件比我们目前使用的要强大的多，大家可以自行钻研实验一下。

2.利用kindeditor实现mvc3下的编辑器功能

之前的代码里我们实现了商品管理的增删改查，但是对于商品来说还缺少一个最重要的介绍功能，商品的介绍来所含信息丰富而且重要，可能会出现图片，文字，视频，表格等内容，为了适应这一需求，所见即所得的编辑器自然是最好的选择，在此系列教程中，我们使用kindeditor编辑器来实现，版本为4.1.5，可以点此下载，也可以去官网http://www.kindsoft.net/下载

下载后请添加dll引用，修改Models/Product.cs完整代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace MyShopTest.Models
{
public class Product
{
public int Id { get; set; }
[Display(Name = "商品名称")]
[Required(ErrorMessage = "必须输入名称!")]
public string Title { get; set; }
[Display(Name = "价格")]
[Required(ErrorMessage = "必须输入价格!")]
[Range(0.01, 1000, ErrorMessage = "输入的价格必须是0.01到1000")]
public double Price { get; set; }

[Display(Name = "图片")]
public string ImgUrl { get; set; }
//类别Id
public int CategoryId { get; set; }
[Display(Name="描述")]
public string Description { get; set; }
private DateTime addTime;
[Display(Name = "添加时间")]
[Required()]
public DateTime AddTime
{
get
{
if (addTime == null)
{
return DateTime.Now;
}
return addTime;
}
set { addTime = value; }
}
//类别实体（主外键）
public virtual Categeory Category { get; set; }
}
}

修改InitData.cs完整代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
using System.Data.Entity.Validation;

namespace MyShopTest.Models
{
public class InitData : DropCreateDatabaseIfModelChanges<MyShopDataEntities>
{
//实体发生改变时，重新创建数据库，首次也会运行此处
protected override void Seed(MyShopDataEntities context)
{
try
{

//初始化数据
var users = new List<UserInfo>
{
new UserInfo { UserName = "admin",UserPwd="admin",AddTime=DateTime.Now,Email="Qq@qq.com",Phone="13112345678" },
new UserInfo { UserName = "zhangsan",UserPwd="admin",AddTime=DateTime.Now,Email="Qq@qq.com",Phone="13112345678" },
new UserInfo { UserName = "lisi",UserPwd="admin",AddTime=DateTime.Now,Email="Qq@qq.com",Phone="13112345678" }

};
users.ForEach(user => context.UserInfos.Add(user));
//类别数据
var categorys = new List<Categeory>();
categorys.Add(new Categeory { Name = "食品" });
categorys.Add(new Categeory { Name = "宠物" });
//产品数据
var products = new List<Product>
{
new Product{ AddTime=DateTime.Now,Category=categorys.Find(delegate(Categeory c){return c.Name=="食品"; }), ImgUrl="0", Price=8.8, Title="冰淇淋",Description="暂无描述"},
new Product{ AddTime=DateTime.Now,Category=categorys.Single(c=>c.Name=="宠物"), ImgUrl="0", Price=88.8, Title="大熊猫",Description="暂无描述"},
new Product{ AddTime=DateTime.Now,Category=categorys.Single(c=>c.Name=="宠物"), ImgUrl="0", Price=88.8, Title="北极熊",Description="暂无描述"}
};
products.ForEach(p => context.Products.Add(p));

}
catch (DbEntityValidationException dbEx)
{
string a = dbEx.Message;
}

}
}
}

修改Product/Create.cshtml完整代码如下：

@model MyShopTest.Models.Product
@{
ViewBag.Title = "商品添加";
}
<h2>
商品添加</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>
<script src="../../kindeditor/kindeditor-all-min.js" type="text/javascript"></script>
<script type="text/javascript">
KindEditor.ready(function (K) {
var editor1 = K.create('#Description', {
cssPath: '../../kindeditor/plugins/code/prettify.css',
uploadJson: '/tools/upload_json.ashx',
fileManagerJson: '/tools/file_manager_json.ashx',
allowFileManager: true
});
});
</script>
@using (Html.BeginForm("Create", "Product", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@*@Html.ValidationSummary(true)*@
@Html.ValidationMessage("error")
<fieldset>
<legend>商品添加</legend>
<div class="editor-label">
@Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Title)
@Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Price)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Price)
@Html.ValidationMessageFor(model => model.Price)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ImgUrl)
</div>
<div class="editor-field">
<input type="file" name="filImgs" />
<input type="hidden" name="ImgUrl" value="0" />
@Html.ValidationMessageFor(model => model.ImgUrl)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.CategoryId, "类别")
</div>
<div class="editor-field">
@Html.DropDownList("CategoryId")
@Html.ValidationMessageFor(model => model.CategoryId)
@Html.Hidden("AddTime", DateTime.Now)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
@Html.TextAreaFor(model => model.Description, 15, 100, null)
</div>
<p>
<input type="submit" value="添加" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("返回列表", "Index")
</div>

修改Edit.cshtml完整代码如下：

@model MyShopTest.Models.Product
@{
ViewBag.Title = "商品编辑";
}
<h2>
商品编辑</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>
<script src="../../kindeditor/kindeditor-all-min.js" type="text/javascript"></script>
<script type="text/javascript">
KindEditor.ready(function (K) {
var editor1 = K.create('#Description', {
cssPath: '../../kindeditor/plugins/code/prettify.css',
uploadJson: '/tools/upload_json.ashx',
fileManagerJson: '/tools/file_manager_json.ashx',
allowFileManager: true
});
});
</script>
@using (Html.BeginForm("Edit", "Product", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.ValidationSummary(true)
<fieldset>
<legend>商品编辑</legend>
@Html.HiddenFor(model => model.Id)
<div class="editor-label">
@Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Title)
@Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Price)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Price)
@Html.ValidationMessageFor(model => model.Price)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ImgUrl)
</div>
<div class="editor-field">
<input type="file" name="filImgs"/>
<input type="hidden" name="ImgUrl" value="@Model.ImgUrl"/>
@Html.ValidationMessageFor(model => model.ImgUrl)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.CategoryId, "类别")
</div>
<div class="editor-field">
@Html.DropDownList("CategoryId")
@Html.ValidationMessageFor(model => model.CategoryId)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
@Html.TextAreaFor(model => model.Description, 15, 100, null)
</div>
<p>
<input type="submit" value="保存" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("返回列表", "Index")
</div>

修改Details完整代码如下：

@model MyShopTest.Models.Product
@{
ViewBag.Title = "商品详细";
Layout = "~/Views/Shared/MyMaster.cshtml";
}
<h2>
商品详细</h2>
<fieldset>
<legend>商品详细</legend>
<div style="margin: 0 auto;">
<img src="@Model.ImgUrl" width="300px" height="200px"/>
<br />
<ul>
<li>
@Html.DisplayFor(model => model.Title)
</li>
<li>
@Html.DisplayFor(model => model.Category.Name)
</li>
<li>
@Html.DisplayFor(model => model.Price)
</li>
<li>
@Html.DisplayFor(model => model.AddTime)
</li>
</ul>
@Html.Raw(Model.Description)
</div>
</fieldset>
<p>
@Html.ActionLink("返回列表", "Index") |
</p>

为ProductController的添加处理和编辑处理方法的HttpPost标识头修改为:

[HttpPost,ValidateInput(false)]

重新编译项目，运行，先看一下测试效果：







现在在我们来简单看一下关键代码：

Edit.cshtml

<script src="../../kindeditor/kindeditor-all-min.js" type="text/javascript"></script>
<script type="text/javascript">
KindEditor.ready(function (K) {
var editor1 = K.create('#Description', {
cssPath: '../../kindeditor/plugins/code/prettify.css',
uploadJson: '/tools/upload_json.ashx',
fileManagerJson: '/tools/file_manager_json.ashx',
allowFileManager: true
});
});
</script>

引入kindeditor的js和绑定编辑器，Create也是一样；
ProductController.cs，Cteate和Edit处理方法头部加上了下方标识：

ValidateInput(false)

主要是为了取消页面的ValidateRequest验证，以免当我们提交由html字符时当作敏感字符处理出现错误，在webform里可以在web.config里pages节点配置，经测试mvc3下此做法不生效

至此，在MVC3下已完成验证码和编辑器功能