Unobtrusive client verification in partial views

I have a partial view that appears in the jQuery interface dialog box. Since this is dynamic content, force client validation will not work. To get it, I have to force the validator to analyze the contents of the form by calling $.validator.unobtrusive.parse();. But that will not work. My browser reports that the unobtrusive object is undefined. Why is this happening? There may have been some changes in the jQuery library, and now everything works differently. I am using jquery-1.6

+3
source share
2 answers

You can find the following blog post .

+5
    (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")
}
0

All Articles