asp.net-mvc - 客户端表单验证不适用于 MVC 中的模态对话框

Question

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

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 是一个局部 View 。

@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")        
}

在 Controller 上有一个 actionmethod，它返回创建表单的部分 View 。

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

查看模态

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

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

Answer 1

因为页面加载时表单没有添加到页面中，所以不显眼的验证不会把它捡起来。有两种方法可以解决这个问题。

在初始加载期间在页面上包含表单。这将导致表单被识别并进行验证。您可以将局部 View 扔到隐藏的 div 中。然后您的 JavaScript 将只显示模态对话框。

将表单添加到页面后，使用不显眼的验证手动注册表单。类似 $.validator.unobtrusive.parse("#id-of-the-form");