Question

我有一个模态表单，用户可以输入新的狗。表单通过$ .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);
            }
        }

我已经在其他帖子中尝试了一些答案，但我似乎没有做对。

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

亲切的问候彼得

Answer 1

我发现有两个问题：表单和元素的命名（需要是唯一的），第二个我没有包含jquery库jqueryval。当我添加这个：

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

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

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

1 个答案: