使用jQuery get动态加载按钮后，部分视图没有得到验证

Partial view not getting validated after button click when dynamically loaded using jQuery get

本文关键字：视图验证 get jQuery 动态加载按钮使用更新时间：2023-09-26

我使用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();
            }
        });
    });
});

这是部分视图

@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');

和一些更多的选项，但它没有帮助我解决问题。

你能帮我一下吗?

谢谢你^_^

您需要确保在新内容添加到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);
      },
      ....
    });
  });
});