不引人注目的JQuery验证无法在弹出窗口PartialViews

时间:2015-12-16 18:55:08

标签: asp.net-mvc asp.net-core-mvc unobtrusive-validation

我在 asp.net 5 mvc 6项目中有以下部分视图。部分视图显示为jquery ui对话框,并在用户单击父视图页面中的按钮时动态加载。问题是,在输入无效的entires并单击提交后,Unobtrusive JQuery Validation不起作用。

我已经完成了使Unobtrusive JQuery Validation工作所需的所有程序,并且它在非局部视图中工作。

这是我的代码

我的部分视图名称 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; }
    }
}

1 个答案:

答案 0 :(得分:4)

当您将表单动态加载到DOM中时,请在局部视图的末尾添加以下行。

$(document).ready(function() {

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