不引人注目的JQuery验证在弹出的PartialViews中不起作用

Question

我在asp.net 5 mvc 6 project中有以下局部视图。部分视图显示为jquery ui对话框，当用户单击父视图页面中的按钮时将动态加载该部分视图。问题在于，输入无效的整数并单击提交后，Unobtrusive JQuery Validation无效。

我已经完成了使不引人入胜的JQuery验证工作所需的所有过程，并且可以在非局部视图中工作。

这是我的代码

我的局部视图名称EquipmentEditTemplate。cshtml

    @model MyProject.Models.EquipmentViewModel  

@*<form role="form" name="FormPost" asp-controller="Asset" method="post" asp-action="SaveEq" data-ajax="true" id="FrmGrid_grdLocation1" class="FormGrid form-horizontal" style="width:477px;height:703px;">*@
    @*<form asp-controller="Asset" asp-action="SaveEq" method="post" style="width:600px;height:703px;" class="form-horizontal" >*@
    <div class="FormError bg-danger" style="display:none;"></div><div class="tinfo topinfo"></div><div class="modal-body">
        <div style="margin-left:15px;">

            <div class="form-group">
                <label asp-for="EquipmentID" class="col-sm-2 control-label">Equipment ID:</label>
                <div class="col-sm-10">
                    <input asp-for="EquipmentID" class="FormElement form-control" />
                    <span asp-validation-for="EquipmentID" class="text-danger"></span>
                </div>

            </div>

        <div class="form-group">
            <label asp-for="Email" class="col-sm-2 control-label">Email:</label>
            <div class="col-sm-10">
                <input asp-for="Email" class="FormElement form-control" />
            </div>
        </div>

        <div class="form-group">
            <label asp-for="Department" class="col-sm-2 control-label">Department:</label>

            <div class="col-sm-10">
                <input type="text" id="Department" name="Department" value="@Model.Department" role="textbox" class="FormElement form-control">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Sign in</button>
            </div>
        </div>

    </div>
</form>

我在主视图中有以下代码，如图所示，我已经在其中包含了equipment.cshtml的验证脚本

 @{
    ViewData["Title"] = "Equipment";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

@section scripts{
 @{await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
    <script src="~/js/equipment.js" type="text/javascript"></script>

}

我的模型类定义如下

public class EquipmentViewModel
    { 
        [Required]
        public int EquipmentID { get; set; }

        [EmailAddress]
        public string Email{ get; set; }

        public int Description{ get; set; }
    }
}

Answer 1

将表单动态加载到DOM中后，请在部分视图的末尾添加以下行。

$(document).ready(function() {

     $.validator.unobtrusive.parse($('#yourform'));
});