我有一个在 jQuery UI 对话框中呈现的局部视图。因为它是动态内容，所以不显眼的客户端验证是行不通的。为了得到它，我必须强制验证器解析表单的内容，调用$.validator.unobtrusive.parse();。但它不起作用。我的浏览器报告 unobtrusive 对象未定义。
为什么会这样？也许 jQuery 库中有一些变化，现在整个事情的工作方式不同了。我正在使用 jquery-1.6
【问题讨论】：
标签： jquery asp.net-mvc-3 unobtrusive-validation
您可能会发现following blog post 很有用。
【讨论】：
jquery.validate.js 和 jquery.validate.unobtrusive.js）？
(function($){
CampusCommon.register("Campus.UI.Popup")
Campus.UI.Popup=function(){
defaults={
action:'',
ispartialaction:'',
customcallback:'',
confirmaction:'',
controltoupdateid:'',
width:500,
title:'',
onsubmit:function(id){
var popupid=id+"_popupholder";
if(this.ispartialaction){
$.ajax({
url:this.action,
type:"Get",
context: this,
data:$(this).find("form").serialize(),
success:function(data){
$('#'+id).parents('body').find('form').append("<div id='"+popupid+"'></div>");
var ajaxContext=this;
$("#"+popupid).dialog({
autoopen:false,
model:true,
width:this.width,
title:this.title,
buttons:{
"Confirm":function(){
if(ajaxContext.customcallback==''){
var popupform=$(this).find("form");
if(popupform.valid()){
$.post(ajaxContext.confirmaction,popupform.serialize(),function(d){
if(d!='')
{
$.each(d,function(i,j){
switch(j.Operation)
{
case 1:
if($('#'+j.ControlClientID).is("select"))
{
$('#'+j.ControlClientID).val(j.Value);
$('#'+j.ControlClientID).change();
}
else if($('input[name="'+j.ControlClientID+'"]').length>0)
{
$('input[name="'+j.ControlClientID+'"][value="'+j.Value+'"]').prop("checked",true);
}
break;
case 2:
if($('#'+j.ControlClientID).is("select"))
{
$('#'+j.ControlClientID).append("<option selected='selected' value=\""+j.Value+"\">"+j.Text+"</option>");
}
else
{
var len=$('input[name="'+j.ControlClientID+'"]').length;
$('#'+j.ControlClientID+"list").append('<li><input type="checkbox" name="'+j.ControlClientID+'" value="'+j.Value+'" id="ae'+j.ControlClientID+len+'"/><label for "ae'+j.ControlClientID+len+'">'+j.Text+'</label>');
}
break;
case 0:
$('#'+j.ControlClientID).val(j.Value);
breakl
default:break;
}
});
popupform.parent().dialog("destroy").remove();
$("#"+ajaxContext.controltoupdateid).change();
}
});
}
}
else
{
executeByFunctionName(ajaxContext.customcallback,window,new Array());
}
},
"Cancel":function(){
$(this).dialog("close");
}
}
});
$("#"+popupid).dialog("open");
$("#"+popupid).empty().append(data);
},
error:function(e)
{
alert(e);
}
});
}
else
{
var frm=document.createElement("form");
frm.id="CampusForm";
frm.name="CampusForm";
frm.action=this.action;
frm.method="post";
var arr=$($("#"+id).closest("body").find("form")).serializeArray();
$.each(arr,function(i,j){
var hidd=document.createElement("input");
hidd.type="hidden";
hidd.name=j.name;
hidd.value=j.value;
frm.appendChild(hidd);});
document.appendChild(frm);
frm.submit();
}
}
},
clicksubmit=function(){
var opts=$(this).data("CampusPopup");
opts.onsubmit($(this).attr("id"));
return false;
};
return {
init:function(opt){
var opts=$.extend({},defaults,opt||{});
$(this).data('CampusPopup',opts);
$(this).bind("click",clicksubmit);
}};
}();
$.fn.extend({CampusPopup:Campus.UI.Popup.init});
})(jQuery)
/*js*/
1.7.1,1.5.1,validate,unobtrusive,8.20,common,popup.js
[HttpGet]
public ActionResult AddCourse(ViewModel.Batch batch)
{
return PartialView("~/Views/Admin/Course.cshtml", new ViewModel.Course());
}
/*Layout*/
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/campuscommon.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/campus.ui.popup.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
/*Batch*/
@model Campus.UI.Admin.Models.Batch
@{
ViewBag.Title = "Batch";
}
<h2>Batch</h2>
@using (Html.BeginForm(Model.SubmitAction,Model.SubmitController)) {
ViewContext.FormContext.ValidationSummaryId = "valSumId";
@Html.ValidationSummary(false, "Please fix these errors.", new Dictionary<string, object> { { "id", "valSumId" } });
<fieldset>
<legend>Batch</legend>
<div class="editor-label">
@Html.LabelFor(model => model.BatchName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.BatchName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Courses)
</div>
<div class="editor-field">
@Html.DropDownListFor(model => model.CourseId,Model.Courses,"--Select a course")
</div>
<div class="editor-label">
@Html.LabelFor(model => model.BatchDescription)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.BatchDescription)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/themes/base/css")
}
/*Course*/
@model Campus.UI.Admin.Models.Course
@{
ViewBag.Title = "Course";
}
<h2>Course</h2>
@using (Html.BeginForm()) {
ViewContext.FormContext.ValidationSummaryId = "valSumId";
@Html.ValidationSummary(false, "Please fix these errors.", new Dictionary<string, object> { { "id", "valSumId" } });
<fieldset>
<legend>Course</legend>
<div class="editor-label">
@Html.LabelFor(model => model.CourseName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.CourseName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.CourseDescription)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.CourseDescription)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
【讨论】：