javascript - 使用 jQuery get 动态加载时，单击按钮后部分 View 未得到验证

Question

我正在使用 MVC4 创建一个项目，在该项目中我正在使用 jQuery 对话框 向用户显示弹出窗口以编辑数据。

当用户点击编辑操作链接时，它会显示一个弹出窗口，其中包含用于编辑用户值的表单。

 <a href="#" class="edit" data-url="@Url.Action("EditResource", "Resources", new { id=item.EmployeeId})">Edit</a>

这是我向用户显示弹出窗口的代码。

 $('.edit').click(function () {
    $.get($(this).data('url'), function (data) {
        $('#dialogEdit').dialog({
            modal: true,
            autoResize: true,
            resizable: true,
            position: {
                my: "center top",
                at: "center top",
                of: window
            },

            autoOpen: true,
            bgiframe: true,
            open: function () {

                document.getElementById('dialogEdit').innerHTML = data;
            },
            close: function () {
                document.getElementById('dialogEdit').innerHTML = "";
                document.getElementById('dialogEdit').innerText = "";
                $("#dialogEdit").empty().hide();
            }
        });
    });
});

这是局部 View

@model PITCRoster.ViewModel.LookupTblUserViewModel

@using (Html.BeginForm("SaveChangesResources", "Resources"))
{ 
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
         Html.RenderPartial("_CreateNewResource", Model.tblUser);
         Html.RenderPartial("_LookUpDropDowns", Model.LookUpViewModel);
        <br />
            <input type="submit" value="Save"/>
        }

_CreateNewResource.cshtml

@model PITCRoster.tblUser

    <fieldset>
        <legend>tblUser</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.UserId)
        </div>
               <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

       <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

    </fieldset>

_lookupDropDowns.cshtml

@model PITCRoster.ViewModel.LookUpViewModel

@Html.LabelFor(model => model.SelectedLocation)
@Html.DropDownListFor(m => m.SelectedLocation, Model.LocationList, "-Please select-")
@Html.ValidationMessageFor(m => m.SelectedLocation)


@Html.LabelFor(m => m.SelectedStream)
@Html.DropDownListFor(m => m.SelectedStream, Model.StreamList, "-Please select-")
@Html.ValidationMessageFor(m => m.SelectedStream)

@Html.LabelFor(m => m.SelectedDepartment)
@Html.DropDownListFor(m => m.SelectedDepartment, Model.DepartmentList, "-Please select-")
@Html.ValidationMessageFor(m => m.SelectedDepartment)

@Html.LabelFor(m => m.SelectedGlobalLocation)
@Html.DropDownListFor(m => m.SelectedGlobalLocation, Model.GlobalLocationList, "-Please select-")
@Html.ValidationMessageFor(m => m.SelectedGlobalLocation)

我试过用

$('form').removeData('validator');
$('form').removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse('form');

还有一些其他选项，但它并没有帮助我解决问题。

你能帮我解决这个问题吗？

谢谢^_^

Answer 1

您需要确保在将新内容添加到 DOM 后重新解析验证器

$('.edit').click(function () {
  $.get($(this).data('url'), function (data) {
    $('#dialogEdit').dialog({
      ....
      open: function () {
        document.getElementById('dialogEdit').innerHTML = data;
        // reparse the validator here
        var form = $('form');
        form.data('validator', null);
        $.validator.unobtrusive.parse(form);
      },
      ....
    });
  });
});