jquery 使用 ajax 调用验证在 asp.net mvc 的部分视图弹出窗口中不工作

Question

我有两个页面，一个是主页，第二个是 PartialView 页面，使用 jquery get 方法在弹出窗口中显示

我的主页

@model CT.SmartQueue.Entity.QueueModel
@{
ViewBag.Title = "AdminPanel";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Queue Lists</h2>
<div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>For Service Centre Only: </h5>
                        <div class="ibox-tools">

                        </div>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-striped">
                            <tr>
                                <th>
                                    Code
                                </th>
                                <th>
                                    Name
                                </th>
                                <th>
                                    Description
                                </th>
                                <th>
                                    IsActive
                                </th>
                                <th>
                                    Edit
                                </th>
                            </tr>

                            @foreach (var item in Model.ClientQueueModel)
                            {
                                <tr>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Code)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Name)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Description)
                                    </td>
                                    <td>
                                        <div class="switch">
                                            <div class="onoffswitch">
                                                @Html.CheckBoxFor(modelItem => item.IsActive, new { @class = "onoffswitch-checkbox", @id = item.Id, onclick = "changeQueueStatus(this.checked, this.id)" })
                                                <label class="onoffswitch-label" for="@item.Id">
                                                    <span class="onoffswitch-inner"></span>
                                                    <span class="onoffswitch-switch"></span>
                                                </label>
                                            </div>
                                        </div>
                                    </td>
                                    <td> <a href="javascript:void(0)" onclick="return fn_Load_Add('@Url.Action("AddQueue", "QueueSetup", new { id = @item.Id })')" class="btn btn-primary btn-xs ">Edit</a></td>
                                    <td> <a href="javascript:void(0)" onclick="return fn_Load_AddDetail('@Url.Action("ClientQueueDetail", "QueueSetup", new { id = @item.Id })')" class="btn btn-primary btn-xs ">Edit QueueDetail</a></td>
                                </tr>
                            }
                        </table>
                    </div>
                </div>
            </div>

局部视图的弹出窗口

<div class="modal fade in" id="id_Modal_Add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-content-custom ">
    <div class="modal-content">
        <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal">&times;</button>
            <center>  <h2 class="modal-title"><b>Client Queue </b> </h2></center>
                       </div>
        <div class="modal-body" id="id_Modal_Add_Body" style="overflow: auto;">
            ...
        </div>

    </div>
</div>

主页脚本

@section Scripts {
 @Scripts.Render("~/plugins/validate")
<script type="text/javascript">

        function fn_Load_AddDetail(var_URL) {
        debugger;
       $("#id_Modal_Add_BodyDetail").html('');
       $('#id_Modal_AddDetail').modal('show');

    $.get(var_URL, function (response) {
        debugger;
        $("#id_Modal_Add_BodyDetail").html(response);
        //$("#zz").removeData("validator");
        //$("#zz").removeData("unobtrusiveValidation");
        //$.validator.unobtrusive.parse("form");
        //$.validator.unobtrusive.parse($("#zz"));
              })
      }
 </script>
}

我的 PrtialViewPage

@model CT.SmartQueue.Entity.QueueModel
@{
ViewBag.Title = "ClientQueueDetail";
//Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="row">
@using (Html.BeginForm("ClientQueueDetail", "QueueSetup", FormMethod.Post, new { @class = "form-horizontal" ,@id="zz"}))
{
       @Html.ValidationSummary()
    <div class="col-lg-8">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>Queue Details:</h5>

                <div class="ibox-tools">

                    @Html.HiddenFor(x => x.ClientQueueDetailModel.Id)
                    @Html.HiddenFor(x => x.ClientQueueDetailModel.ClientQueueId)
                    @Html.HiddenFor(x => x.QueueFieldSettingTemplateModel.Id)
                    @Html.HiddenFor(x => x.ClientQueueDetailModel.ClientId)
                    @Html.HiddenFor(x => x.QueueFieldSettingTemplateModel)
                </div>
            </div>
            <script type="text/javascript">
                function ValidateNumber(event) {

                    var theEvent = event || window.event;
                    var key = theEvent.keyCode || theEvent.which;
                    key = String.fromCharCode(key);
                    var regex = /[0-9]|\./;

                    if (!regex.test(key)) {
                        theEvent.returnValue = false;
                        if (theEvent.preventDefault) theEvent.preventDefault();
                    }
                }
            </script>
            <div class="ibox-content">
                <div class="form-group">
                    <label class="col-lg-6 control-label">Total number of queue for day</label>
                    <div class="col-lg-3">
                        @Html.TextBoxFor(model => model.ClientQueueDetailModel.MaxQueueCountForTheDay, new { @class = "form-control input-sm", @onkeypress = "ValidateNumber(event);" })
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-6 control-label">Average time take/queue</label>
                    <div class="col-lg-3">
                        @Html.TextBoxFor(model => model.ClientQueueDetailModel.AverageTimeTakenPerQueue, new { @class = "form-control input-sm", @onkeypress = "ValidateNumber(event);" })
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-6 control-label">Notification Type</label>
                    <div class="col-lg-3">
                        @Html.DropDownListFor(model => model.ClientQueueDetailModel.NotificationType, new List<SelectListItem>() { new SelectListItem { Text = "Minutes Before", Value = "5" }, new SelectListItem { Text = "In Queue", Value = "6" } }, new { @class = "form-control", @placeholder = "Select Status Type", @required = "" })
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-6 control-label">Notification to user in advance</label>
                    <div class="col-lg-3">
                        @Html.TextBoxFor(model => model.ClientQueueDetailModel.NotificationToUserinAdvance, new { @class = "form-control input-sm", @onkeypress = "ValidateNumber(event);" })
                    </div>
                </div>
                @*@if (Model.QueueFieldSettingTemplateModel.IsEmergencyQueueVisible == true)
                    {*@
                <div class="form-group">
                    <label class="col-lg-6 control-label">Emergency queue</label>
                    <div class="col-lg-3">

                        <div class="switch">
                            <div class="onoffswitch">
                                @Html.CheckBoxFor(model => model.ClientQueueDetailModel.IsEmergencyQueueOn, new { @class = "onoffswitch-checkbox", @checked = Model.ClientQueueDetailModel.IsEmergencyQueueOn, @id = "editIsEmergencyQueueOn" })
                                <label class="onoffswitch-label" for="editIsEmergencyQueueOn">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                @*}*@
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>Queue Preferences: </h5>
                <div class="ibox-tools">

                </div>
            </div>
            <div class="ibox-content">
                @*@if (Model.QueueFieldSettingTemplateModel.IsNameVisible == true)
                    {*@
                <div class="setings-item">
                    <span>
                        Name
                    </span>
                    <div class="switch">
                        <div class="onoffswitch">
                            @Html.CheckBoxFor(model => model.ClientQueueDetailModel.IsNameRequired, new { @checked = Model.ClientQueueDetailModel.IsNameRequired, @class = "onoffswitch-checkbox", @id = "editIsNameRequired" })
                            <label class="onoffswitch-label" for="editIsNameRequired">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>
                </div>
                @*}
                    @if (Model.QueueFieldSettingTemplateModel.IsNRICVisible == true)
                    {*@
                <div class="setings-item">
                    <span>
                        NRIC
                    </span>
                    <div class="switch">
                        <div class="onoffswitch">
                            @Html.CheckBoxFor(model => model.ClientQueueDetailModel.IsNRICRequired, new { @checked = Model.ClientQueueDetailModel.IsNRICRequired, @class = "onoffswitch-checkbox", @id = "editIsNRICRequired" })
                            <label class="onoffswitch-label" for="editIsNRICRequired">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>
                </div>
                @*}
                    @if (Model.QueueFieldSettingTemplateModel.IsPhoneNumberVisible == true)
                    {*@
                <div class="setings-item">
                    <span>
                        Phone Number
                    </span>
                    <div class="switch">
                        <div class="onoffswitch">
                            @Html.CheckBoxFor(model => model.ClientQueueDetailModel.IsPhoneNumberRequired, new { @class = "onoffswitch-checkbox", @id = "editIsPhoneNumberRequired" })
                            <label class="onoffswitch-label" for="editIsPhoneNumberRequired">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="setings-item">
                    <span>
                        Date of Birth
                    </span>
                    <div class="switch">
                        <div class="onoffswitch">
                            @Html.CheckBoxFor(model => model.ClientQueueDetailModel.IsDOBRequired, new { @class = "onoffswitch-checkbox", @id = "editIsDOBRequired" })
                            <label class="onoffswitch-label" for="editIsDOBRequired">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>
                </div>
                @*}
                    @if (Model.QueueFieldSettingTemplateModel.IsAddressVisible == true)
                    {*@
                <div class="setings-item">
                    <span>
                        Address
                    </span>
                    <div class="switch">
                        <div class="onoffswitch">
                            <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example4">
                            @Html.CheckBoxFor(model => model.ClientQueueDetailModel.IsAddressRequired, new { @class = "onoffswitch-checkbox", @id = "editIsAddressRequired" })
                            <label class="onoffswitch-label" for="editIsAddressRequired">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>
                </div>
                @*}
                    @if (Model.QueueFieldSettingTemplateModel.IsNoOfPaxVisible == true)
                    {*@
                <div class="setings-item">
                    <span>
                        No. of Pax
                    </span>
                    <div class="switch">
                        <div class="onoffswitch">
                            <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example5">
                            @Html.CheckBoxFor(model => model.ClientQueueDetailModel.IsNoOfPaxRequired, new { @class = "onoffswitch-checkbox", @id = "editIsNoOfPaxRequired" })
                            <label class="onoffswitch-label" for="editIsNoOfPaxRequired">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="setings-item">
                    <span>
                        Gender
                    </span>
                    <div class="switch">
                        <div class="onoffswitch">
                            @Html.CheckBoxFor(model => model.ClientQueueDetailModel.IsGenderRequired, new { @class = "onoffswitch-checkbox", @id = "editIsGenderRequired" })
                            <label class="onoffswitch-label" for="editIsGenderRequired">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>
                </div>
                @*}*@
                <div class="form-group">
                    <label class="col-md-6"></label>
                    @*<div class="col-lg-3">
                            <button type="submit" class="btn btn-primary pull-right">Cancle</button>
                        </div>*@


                </div>

            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="pull-right">
            @*<a class="btn btn-danger" href="#">Cancel</a>*@
            <button type="submit" class="btn btn-primary" onclick="return Validation();">Save</button>
            <button type="button" class="btn btn-default" data-dismiss="modal" id="normalClose">Close</button>
        </div>
    </div>
}
</div>
  @section Scripts {

@Scripts.Render("~/plugins/validate")

<script type="text/javascript">
    $.validator.unobtrusive.parse($("#zz"));
        $("#zz").validate({
            rules: {
                'ClientQueueDetailModel.MaxQueueCountForTheDay': {
                    required: true,
                },
                'ClientQueueDetailModel.AverageTimeTakenPerQueue': {
                    required: true
                },
                'ClientQueueDetailModel.NotificationToUserinAdvance': {   
                    required: true,
                    //number: true
                }
           }         
        });

</script>

}

我使用 jquery $get 调用在主页面的弹出窗口中显示部分视图页面，但 jquery 验证未触发，同样的事情不起作用，可能其他部分视图页面我知道本期的很多文章但不为我工作任何想法然后请帮助我谢谢

Answer 1

当您使用 Ajax 加载局部视图时，您会更改 DOM。

在页面加载时进行不显眼的验证解析 DOM 并添加一些事件监听器。

当您更改 DOM 不显眼的验证时，问题是不知道新添加的元素。这就是为什么您应该在 ajax 调用后取消注释（和修改选择器）行。

或者我建议你放在那里的东西：

$("#id_Modal_Add_BodyDetail").html(response);
$('#id_Modal_Add_BodyDetail form').data('validator', null); 
$.validator.unobtrusive.parse('#id_Modal_Add_BodyDetail form');

jquery 使用 ajax 调用验证在 asp.net mvc 的部分视图弹出窗口中不工作

jquery validate not working in partial view popup in asp.net mvc with ajax call

asp.net-mvc

jquery

jquery-validate

razor

unobtrusive-validation