客户端表单验证不适用于MVC中的模式对话框 [英] Client form validation not working with modal dialog in MVC

问题描述

我正在将创建表单更改为模式对话框，并且jQuery非侵入式验证停止工作，并且不知道如何解决该问题.

I am changing a create form to become a modal dialog and jquery Unobtrusive validation stops working and don't know how to fix it.

Index.cshtml具有触发模式对话框的链接.

Index.cshtml has a link to trigger a modal dialog.

<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是局部视图.

Create.cshtml is a partial 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")        
}

在控制器上，有一个操作方法可以返回创建表单的局部视图.

On the controller there is an actionmethod which returns a partial view for create form.

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

查看模式

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

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

before i changed it to be a modal dialog .. everything was working but now i don't know how to fix it. How can i make validation work with dialog? Obviously, I don't want to rewrite validation rules on client script .. i want to get it working from view model .. thanks.

推荐答案

由于在页面加载时未将表单添加到页面中，因此不打扰的验证将不会对其进行处理.有两种方法可以解决此问题.

Because the form is not added to the page when the page loads, the unobtrusive validation will not pick it up. There are two ways to fix this.

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

1. Include the form on the page during the initial load. This will cause the form to be recognized and validation will occur. You can throw the partial view in a hidden div. Then your JavaScript will just show the modal dialog.
2. Manually register the form with the unobtrusive validation after adding it to the page. Something like $.validator.unobtrusive.parse("#id-of-the-form");

这篇关于客户端表单验证不适用于MVC中的模式对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！