返回 ajax 调用时未显示验证消息答案

【问题标题】：Validation messages not showing when return to ajax call返回 ajax 调用时未显示验证消息
【发布时间】：2017-11-14 07:28:08
【问题描述】：

我有一个模态表单，用户可以在其中输入一条新狗。表单通过 $.ajax 调用发布到控制器，当 model.isvalid() = true 时，它将狗保存到数据库并关闭模式表单。那工作正常。问题是当 model.isvalid() != true 时。我可以让错误消息显示出来。

模态形式：

<div class="modal fade modal-dialog-center col-md-12" tabindex="0" role="dialog" id="modalAddHond" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog ">
        <div class="modal-content-wrap">
            <div class="modal-content">
                <div class="modal-title">
                    <h4>Nieuwe hond toevoegen of bewerken</h4>
                </div>
                <div class="modal-body">
                    <div id="addHondContainer"></div>
                </div>
                <div class="modal-footer">
                    press esc or <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
                    <button class="btn btn-warning" type="button" id="saveandclosehond">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>

这是概览页面的一部分。在该页面上，我有一个调用以下脚本的按钮：

addhondmodal: function () {
        $.ajax({
            type: "POST",
            url: "Honden/AddNewHond",
            success: function (data) {
                if (data.success) {
                    $("#modalAddHond .modal-body").html(data.html);
                    $("#modalAddHond").modal();
                }
                else {
                    alert("No modal form");
                }
            }
        });
}

这将打开模态表单并进行一些初始化，例如构建下拉列表。模态形式为：

@model HtbGpWebApp.Models.Honden.HondenModel

@Scripts.Render("~/bundles/js")
@Scripts.Render("~/assets/jqueryval")
@Scripts.Render("~/assets/addhondjs")

@section PageScripts {
    @Styles.Render("~/Content/css")
}

<form id="addhondform" method="Post" class="container">
    <div class="col-md-pull-8">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    </div>
    <div class="row padding-top-10">
        <div class="col-md-2">
            @Html.LabelFor(model => model.Naam)
        </div>
        <div class="col-md-6">
            @Html.TextBoxFor(model => model.Naam, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Naam, "", new { @class = "text-danger" })
        </div>
        <div class="col-md-4">

        </div>
    </div>
    <div class="row padding-top-10">
        <div class="col-md-2">
            @Html.LabelFor(model => model.RoepNaam)
        </div>
        <div class="col-md-5">
            @Html.TextBoxFor(model => model.RoepNaam, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.RoepNaam, "", new { @class = "text-danger" })
        </div>
        <div class="col-md-2">
            @Html.LabelFor(model => model.GeboorteDatum)
        </div>
        <div class="col-md-3">
            <div class="input-group date" data-provider="datepicker" id="GeboorteDatum">
                @if (Model.GeboorteDatum == DateTime.MinValue)
                {
                    @Html.TextBoxFor(model => model.GeboorteDatum, "{0:dd/MM/yyyy}", new { @class = "form-control", @Value = "" })
                }
                else
                {
                    @Html.TextBoxFor(model => model.GeboorteDatum, new { htmlAttributes = new { @class = "form-control" } })
                }
                <div class="input-group-addon" id="buttonGeboorteDatum">
                    <span class="glyphicon glyphicon-th"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="row padding-top-10">
        <div class="col-md-2">
            @Html.LabelFor(model => model.Kennel)
        </div>
        <div class="col-md-5">
            @Html.TextBoxFor(model => model.Kennel, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Kennel, "", new { @class = "text-danger" })
        </div>
        <div class="col-md-2">
            @Html.LabelFor(model => model.GeslachtId)
        </div>
        <div class="col-md-3">
            <div id="geslachtendropdown"></div>
        </div>
    </div>

    <div class="row padding-top-10">
        <div class="col-md-2">
            @Html.LabelFor(model => model.RasId)
        </div>
        <div class="col-md-3">
            <div id="rassendropdown"></div>
        </div>
        <div class="col-md-2">
            @Html.LabelFor(model => model.GeleiderId)
        </div>
        <div class="col-md-5">
            <div id="geleidersdropdown"></div>
        </div>
    </div>

    <div class="row padding-top-10">
        <div class="col-md-2">
            @Html.LabelFor(model => model.ChipNummer)
        </div>
        <div class="col-md-5">
            @Html.TextBoxFor(model => model.ChipNummer, new { @class = "form-control" })
        </div>
        <div class="col-md-2">
            @Html.LabelFor(model => model.Stamboom)
        </div>
        <div class="col-md-3">
            @Html.TextBoxFor(model => model.Stamboom, new { @class = "form-control" })
        </div>
    </div>

    <div class="row padding-top-10">
        <div class="col-md-2">
            @Html.LabelFor(model => model.SpeeltVoorClubId)
        </div>
        <div class="col-md-5">
            <div id="clubsdropdown"></div>
        </div>
        <div class="col-md-2">
        </div>
        <div class="col-md-3">
        </div>
    </div>
</form>

注意：这是模态表单的一部分，还有一些额外的文本框和下拉菜单。

用户按下“保存”按钮时的脚本如下：

savenewhond: function () {
        var data = $("#addhondform").serialize();

        $.ajax({
            type: "POST",
            url: window.framework.fqurl(window.constants.url.honden.savehond),
            data: data,
            success: function (data) {
                if (data.success) {
                    $("#modalAddHond").modal("hide");
                    window.overzichthonden.overzicht.inittable();
                }
                else {
                    //window.overzichthonden.overzicht.addhondmodal(data.returnmodel);
                    $("#addhondform").html(data.html);
                }
            }
        });
    }

在这个 ajax 调用中调用的控制器/方法如下所示：

[HttpPost]
        public ActionResult SaveHond(HondenModel model)
        {
            if (ModelState.IsValid)
            {
                IHondenRepository hondenRepo = new HondenRepository();

                Hond hond = new Hond()
                {
                    ChipNummer = model.ChipNummer,
                    GeboorteDatum = model.GeboorteDatum,
                    GeleiderId = model.GeleiderId,
                    GeslachtId = model.GeslachtId,
                    Kennel = model.Kennel,
                    Naam = model.Naam,
                    RasId = model.RasId,
                    RoepNaam = model.RoepNaam,
                    SpeeltVoorClubId = model.SpeeltVoorClubId,
                    StamBoom = model.Stamboom
                };

                var hondId = hondenRepo.Create(hond);
                return Json(new { success = true, selectedid = hondId });
            }
            else
            {
                //var html = RenderPartialViewToString("Honden/AddNewHond", model);
                //return Json(new { success = false, html, returnmodel = model });
                return PartialView("Honden/AddNewHond", model);
            }
        }

我已经在其他类似的帖子中尝试过一些答案，但我似乎没有得到正确的答案。

我哪里出错了？我错过了什么吗？

亲切的问候彼得

【问题讨论】：

这背后的模型有一些数据注释，如：Required(ErrorMessage ="Naam van de hond is verplicht")] public string Naam { get;放; }
是您的 Web 服务 JSON 的返回类型吗？
@EdisonTrutwein：成功时确实是JSON类型，否则返回部分视图。我在另一篇文章中发现了这一点，因为当我返回 Json 时，我的模态表单会初始化（该代码在控制器/方法的 else 部分的注释中）
能否尝试将ajax调用中的dataType指定为json dataType:"json"
我试过了，它只适用于输入字段，但不适用于下拉菜单（但我认为我可以管理）。但问题是我现在有 2 个同名的表单。因此，如果我重新发布模型是空的（因为我在 Jquery 中使用 .Serialize() 并且很困惑我想序列化哪个选择器。

标签： javascript jquery ajax twitter-bootstrap

【解决方案1】：

我发现有两个问题：表单和元素的命名（必须是唯一的），其次我没有包含 jquery 库 jqueryval。当我添加这个时：

@Scripts.Render("~/assets/jqueryval")

在模态表单的顶部，一切正常。

【讨论】：