客户端表单验证不适用于 MVC 中的模式对话框答案

【问题标题】：Client form validation not working with modal dialog in MVC客户端表单验证不适用于 MVC 中的模式对话框
【发布时间】：2014-05-27 12:45:32
【问题描述】：

我正在将创建表单更改为模式对话框，并且 jquery 不显眼的验证停止工作并且不知道如何修复它。

Index.cshtml 有一个链接可以触发一个模式对话框。

<a href="#" id="createCustomer">Create</a>
@section scripts{
<script type="text/javascript">
$('#createCustomer').on('click', function () {
        $.get('/Customer/Create', function (data) {
            $('#modalContainer').html(data);
            $('#myModal').modal({});
        });
    });

Create.cshtml 是一个局部视图。

@model Demo.Web.Models.CustomerVm
@using (Html.BeginForm("Create", "Customer", FormMethod.Post, new { @id="createForm" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Customer</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")        
}

控制器上有一个actionmethod，它返回创建表单的部分视图。

public ActionResult Create()
    {
        return PartialView("Create");
    }

查看模态

public class CustomerVm
{
    [Required]
    public int Id { get; set; }
    [Required]
    public string Name { get; set; }        
}

在我将其更改为模态对话框之前 .. 一切正常，但现在我不知道如何修复它。如何使验证与对话框一起使用？显然，我不想重写客户端脚本上的验证规则..我想让它从视图模型中工作..谢谢。

【问题讨论】：

标签： asp.net-mvc data-annotations unobtrusive-validation asp.net-mvc-viewmodel

【解决方案1】：

由于页面加载时表单没有添加到页面中，所以不显眼的验证不会将其拾取。有两种方法可以解决此问题。

在初始加载期间将表单包含在页面上。这将导致表单被识别并进行验证。您可以将部分视图放在隐藏的 div 中。然后您的 JavaScript 将只显示模式对话框。
在将表单添加到页面后，手动注册带有不显眼验证的表单。类似$.validator.unobtrusive.parse("#id-of-the-form");

【讨论】：

感谢 cadrell0 .. 我应该把 $.validator.unobtrusive.parse 放在哪里？
是的，这确实工作得很好。第三个选项：如果对话框正在加载（单独的）页面，则在对话框页面中加载 jquery、验证和不显眼的库。
你得到了我的支持，这也为我解决了问题。再次感谢。
FML 在不知不觉中浪费了 6 个月。
答案是在链接的博客文章之前一年发布的。可能正好相反。

【解决方案2】：

如果您要动态加载对话框，只需在包含元素的更改事件中注册不显眼的验证：

$('#modal-container').change(
    function() {
        $.validator.unobtrusive.parse("#your-form-id");
});

【讨论】：

没有。接受的答案是“在初始加载期间在页面上包含表单。”我的建议是将更改事件侦听器添加到动态注入时将包含对话框的元素。如果您从局部视图动态注入表单，这将更合适，这就是问题所在。

【解决方案3】：

只需在创建表单视图中添加以下脚本：

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" 
    type="text/javascript">
</script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" 
    type="text/javascript">
</script>

【讨论】：

【解决方案4】：

在创建页面的部分视图中 -> modal-header、model-body、modal-footer 和 javascript 代码在 <script>your code </script> - 不要将 <script>your code</script> 放在 @section Scripts{} 中，它会起作用。

【讨论】：

【解决方案5】：

添加新评论以分享更现代的解决方案：

在MVC 项目的App_Start 文件夹中使用BundleConfig.cs。

namespace MySolution
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/Site.min.css",
                "~/Content/bootstrap.min.css"));

            bundles.Add(new ScriptBundle("~/Scripts/js").Include(
                "~/Scripts/jquery-3.3.1.min.js",
                "~/Scripts/jquery.validate.min.js",
                "~/Scripts/jquery.validate.unobtrusive.min.js"));
        }
    }
}

【讨论】：