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

@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; }        
}

在我把它变成模态对话之前......一切正常，但现在我不知道如何修复它。如何使用对话框进行验证？显然，我不想在客户端脚本上重写验证规则..我希望从视图模型开始工作..谢谢。

Answer 1

由于页面加载时表单未添加到页面中，因此不引人注意的验证将不会提取它。有两种方法可以解决这个问题。

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

Answer 2

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

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

Answer 3

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

Answer 4

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

<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>

Answer 5

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

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

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

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

5 个答案: