MVC Ajax Beginform 不执行客户端模型验证

Question

非常感谢您在此问题上的任何帮助。

尝试使用客户端验证在 MVC 中创建简单的 Ajax 表单。 这是我到目前为止所做的。

@using (Ajax.BeginForm("CreateAsync", "Page", new AjaxOptions() { HttpMethod = "POST" , OnComplete= "", OnSuccess= "P3Functions.onCreateSuccess()" }))
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        @Html.Partial("~/Views/Shared/Partial/_createPageCore.cshtml", Model)
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
                <input type="button" value="Close" class="btn btn-default" onclick="P3Functions.closeCreate()" />
            </div>
        </div>
    </div>
}

这是一个加载带有表单内容的局部视图的表单。 （我也试过直接把代码插入页面，没区别）

这个表单使用 Ajax.ActionLink 加载到一个 div 中。

    <div class="pageItem_control">
        @Ajax.ActionLink("Add New Page", "PartialCreate", new { controller = "Page" },
            new AjaxOptions
            {
                UpdateTargetId = "createFormDivId",
                InsertionMode = InsertionMode.Replace,
                HttpMethod = "GET"
            },
            new { @class = "btn btn-default", @onclick = "P3Functions.displayCreate()" })
    </div>

其他配置：

    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />

捆绑配置

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

_Layout.cshtml

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/CustomScript")
    @Scripts.Render("~/bundles/jqueryval")

PageModel.cs

    [Required(ErrorMessage ="Title is required")]
    public string DisplayTitle { get; set; }

_createPageCore.cshtml

<h4>Create New Page</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
    @Html.LabelFor(model => model.DisplayTitle, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.DisplayTitle, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.DisplayTitle, "", new { @class = "text-danger" })
    </div>
</div>

目前它直接进入服务器而没有任何客户端验证。但是在服务器端 ModelState 无效。

任何想法或帮助将不胜感激。

Answer 1

对于遇到相同问题的任何人：

进入

<script type="text/javascript">
    jQuery.validator.unobtrusive.parse();
    jQuery.validator.unobtrusive.parse("#formId");
</script>

您在哪里加载表单内容。这会解析新添加的 DOM 字段。