Question

所以我花了最近3天的时间阅读并寻找解决此问题的方法并且没有找到。所以我伸手去拿一些帮助。

我有一个非常复杂的View，它有多个局部视图，但概念很简单。我点击“创建”的链接，然后打开一个由部分视图填充的引导模态。在这个局部视图中，我使用ajax.beginForm进行发布。但是，客户端验证不起作用。此外，当服务器以modelstate.isvalid响应为false时，验证摘要也不会显示。这是代码......

这是我在模态中加载的部分视图

@using (Ajax.BeginForm("CreateBox",
                                new AjaxOptions
                                {
                                    HttpMethod = "post",
                                    InsertionMode = InsertionMode.Replace,
                                    UpdateTargetId = "myCellarLocations",
                                    OnBegin="ValidateForm",
                                    OnSuccess = "CloseBoxModal"
                                }))
{
@Html.AntiForgeryToken()
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Create Box</h4>
    </div>
    <div class="modal-body">
        <div class="form-horizontal">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(a => a.CellarLocationId)
            <div class="form-group">
                @Html.LabelFor(model => model.DisplayValue, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.DisplayValue, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.DisplayValue, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <input type="submit" value="Create" class="btn btn-default" />
    </div>

}

这是我的控制器代码

[HttpGet]
    [Route("Cellar/CreateBox/{Id?}")]
    public ActionResult CreateBox(int id)
    {
        CreateBoxViewModel model = new CreateBoxViewModel();
        model.CellarLocationId = id;

        return PartialView("_CreateBox", model);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    [Route("Cellar/CreateBox/{Id?}")]
    public ActionResult CreateBox(CreateBoxViewModel viewModel)
    {
        if (ModelState.IsValid)
        {
            var userId = User.Identity.GetUserId();

            //Create Box
            Box box = new Box();
            box.CellarLocationId = viewModel.CellarLocationId;
            box.DisplayValue = viewModel.DisplayValue;
            vd.CreateBox(box);

            //Get Cellar Locations
            List<CellarLocation> model = vd.GetCellarLocationsByUserId(userId).ToList();
            return PartialView("_CellarLocations", model);
        }

        Response.StatusCode = (int)HttpStatusCode.BadRequest;
        return PartialView("_CreateBox", viewModel);

    }

以下是主视图上的脚本

function CloseBoxModal(data) {
        alert("close");
        $("form").removeData("validator");
        $("form").removeData("unobtrusiveValidation");
        $.validator.unobtrusive.parse("form");
        $('#Box').modal('hide');
    }



    function ValidateForm() {
        alert("here");
        return $.validator.unobtrusive.parse($('form'));
    }

我的webconfig已经

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

我的捆绑包中有以下内容

 bundles.Add(new ScriptBundle("~/bundles/cbt").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/jquery-ui-{version}.js",
                "~/Scripts/jquery.validate*",
                "~/Scripts/jquery.unobtrusive*",
                "~/scripts/custom-validators.js"));

有人可以告诉我我做错了什么。必须有一种更简单，更清晰的方法在部分视图表单上进行客户端验证并显示验证错误

Answer 1

所以我找到了答案。在将内容加载到模态后，您需要删除数据并在验证程序上调用解析。

function CreateBox(id) {
        var url = "/Cellar/CreateBox"; // the url to the controller
        $.get(url + '/' + id, function (data) {
            $('#box-modal-content').html(data);
            $('#Box').modal('show');
            $('#createBoxForm').removeData("validator");
            $('#createBoxForm').removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse('#createBoxForm');

        });
    }

使用Ajax.Beginform的MVC5部分视图ClientSide验证不起作用

1 个答案: