当ASP.NET MVC模型验证遇上CKEditor

项目需要，使用到了CKEditor编辑器。这是个很不错的富文本编辑器，但是当它绑定的字段需要进行模型验证的时候，却会出现验证失效的问题。因此本文旨在记录这个问题和给出解决办法。以下以ValidationAttribute和jQuery Validate2中验证方式为例。测试项目包含3个页面：Index.cshtml(包含2个部分视图)、Add.cshtml(添加页)、Companies(列表页，仅为展示数据)；一个模型(Company)。项目功能截图如下：

---------------------------------------------------------------------------List

@model Models.Company
@{
ViewBag.Title = "CompanyManagement";
Layout = null;
}
@Styles.Render("~/Content/Plan_admin.css")
@Styles.Render("~/Content/lbw_css.css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/exp-js")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/bootstrap.min")
<div class="ProductAdd">
<div class='container-fluid' style=" width:650px;float:left;margin-left:100px; margin-top:100px;">
<div class='tabbable tabs-left'>
<ul class='nav nav-tabs  nav-pills  top-size' role="tablist">
<li class='active' role="presentation"><a href='#tab1' data-toggle='tab' style="font-size:14px;font-family:Arial;">公司列表</a></li>
<li><a href='#tab2' data-toggle='tab' style="font-size:14px;">添加公司</a></li>
</ul>
<div class='tab-content'>
<div class='tab-pane active' id='tab1'>
@Html.Action("Companies", "Test")
</div>
<div class='tab-pane' id='tab2'>
@Html.Action("Add", "Test")
</div>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
<script src="~/Scripts/jquery.validate.js"></script>

<script type="text/javascript">
$(document).ready(function () {
$("#tab2 form").submit(function () {
//先更新textarea值
for (instance in CKEDITOR.instances)
CKEDITOR.instances[instance].updateElement();
var _this = $(this);
if (validater.form()) {
$.post(_this.attr('action'), _this.serialize(), function (data) {
if (data.error == "0") {
location.href = "/Test/Index";
} else {
//问题出现在ckeditor对textare的改变有延迟
$('#tab2').empty().html(data) //3.出来样式改变了
$('textarea.ckeditor').each(function () {
var $textarea = $(this);
var span = $textarea.parent().find('span');
span.hide();
CKEDITOR.replace($textarea.attr("id"));
$textarea.hide();
setTimeout(function () {
span.show();
}, 100);
});
}
});
}
return false;
});
//验证
var validater = $("#tab2 form").validate({
rules: {
CompanyName: {
required: true,
},
CompanyAddress: {
required: true,
},
CompanyProfile: {
required: true,
}
},
ignore: '',  //不能少
messages: {
CompanyName: {
required: "公司名称不能为空",
},
CompanyAddress: {
required: "公司地址不能为空",
},
CompanyProfile: {
required: "公司简介不能为空",
}
}
})
});
</script>

View Code