问题
I have a partial view which gets rendered within a jQuery UI dialog. Because it's dynamic content, unobrusive clientside validation wouldn't work. In order to get it, I have to force validator to parse form's content calling $.validator.unobtrusive.parse();. But it doesn't work. My browser reports that unobtrusive object is undefined.
Why it's happening? Maybe there were some changes in jQuery library and now entire thing works differently. I'm using jquery-1.6
回答1:
You might find the following blog post useful.
回答2:
(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")
}
来源：https://stackoverflow.com/questions/6103160/unobtrusive-client-validation-in-partial-views