提交后引导模式表单不关闭答案

【问题标题】：Bootstrap modal form does not close after submit提交后引导模式表单不关闭
【发布时间】：2017-10-26 20:23:28
【问题描述】：

我需要做的是显示一个弹出窗口来向我的数据库添加一条新记录，我使用的是 bootstrap 3，我喜欢它，因为我没有使用一行 jquery，而且我的表单非常好（显然它们是基于jquery）。

我正在通过 ajax 验证我的表单，但现在的问题是我的模态永远不会关闭，当我尝试重定向到一个动作时，动作被加载到我的模态中，所以我的问题是如何停止我的模态？

这是这段代码的一个例子：

我的表格：

验证后我的表单：

这段代码完美无缺：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add Car</h4>
        </div>
        <div class="modal-body">
            @using (Ajax.BeginForm("ModalAdd", new AjaxOptions() {UpdateTargetId = "mymodalform"}))
            {
                <div id="mymodalform">
                    @Html.Partial("CreatePartialView", new Car())
                </div>
            }
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

和我的部分：

@model ControliBootstrap.Models.Car

    <div class="form-horizontal" >
    @Html.ValidationSummary(true)

    <div class="form-group">
        @Html.LabelFor(model => model.Model, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Model)
            @Html.ValidationMessageFor(model => model.Model)
        </div>
    </div>

    <!--More fields-->

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

现在的问题是，当模型在我的控制器中有效时，我转到加载在我的模态中的索引操作，所以我的问题再次是如何关闭我的模态？

这是我的控制器：

public ActionResult ModalAdd(Car car)
    {
        if (ModelState.IsValid)
        {
            db.Cars.Add(car);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return PartialView("CreatePartialView",car);
    }

【问题讨论】：

标签： asp.net-mvc modal-dialog twitter-bootstrap-3

【解决方案1】：

仅作记录，我找到了我的答案，希望对其他人有所帮助，真的很难找到完整的文章。

我不得不使用更多的 jquery，但这是一个干净的答案（我认为）。

在我的模型中使用数据注释：

[Required]
public string Name { get; set; }

[Required]
public string Phone { get; set; }

然后我在包含我的模态表单的共享文件夹中创建了一个部分，因此我可以将其设为全局。

@model Controli.Models.Provider

<!-- Modal -->
<div class="modal fade" id="mdlnewprovider" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        @using (Html.BeginForm("Add", "Providers", FormMethod.Post, new { id = "frmnewprovider" }))
        {
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Nuevo Proveedor</h4>
        </div>
        <div class="modal-body">
            <div class="form-group">
                @Html.TextBoxFor(u => u.Name, new { @class = "form-control", @placeholder = HttpUtility.HtmlDecode(@Html.DisplayNameFor(u => u.Name).ToHtmlString()) })
                @Html.ValidationMessageFor(u => u.Name)
            </div>
            <!--More Textboxes and Validaton Messages-->
        </div>
        <div class="modal-footer">
            <input type="submit" value="Agregar" class="btn btn-primary" />
        </div>
        }
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

还有脚本：

var frmnewprovider = $("#forms-providers-new");
$(document).ready(function () {
frmnewprovider.submit(function (e) {
    e.preventDefault();
    frmnewprovider.validate();
    if (frmnewprovider.valid()) {
        $.ajax({
            url: "/Providers/Add",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                Name: frmnewprovider.find('#Name').val(),
                Phone: frmnewprovider.find('#Phone').val(),
                Email: frmnewprovider.find('#Email').val(),
                Country: frmnewprovider.find('#Country').val(),
                State: frmnewprovider.find('#State').val(),
                Address: frmnewprovider.find('#Address').val()
            }),
            success: function (result) {
                //if record was added to db, then...
                window.location.replace('/Providers/Index'); //we can redirect
                //or simply close our modal.
                //$('#mdlnewprovider').modal('hide');
            },
            error: function(result) {
                alert('error');
            }
        });
    }
});
});

现在我要做的就是在需要的地方渲染表单：添加以下行：

<button class="btn btn-primary" data-toggle="modal" data-target="#mdlnewprovider">
    Nuevo
</button>

@Html.Partial("Modals/Providers/FrmNew", new Provider())

@section scripts
{
<script src="~/Scripts/Modals/Providers/NewProvider.js"></script>
<!--Where this script is the one above-->
}

最后~~因为我的模型经过客户端验证~~我只是将我的模型添加到我的数据库中，~~并重定向到索引视图，而 ajax 调用隐藏了活动模式~~ 更新： 我建议在 ajax 调用时决定是重定向还是隐藏模式。喜欢评论。

    public ActionResult Add(Provider provider)
    {
        if (ModelState.IsValid) //Validate in server side too!
        {
            db.Providers.Add(provider);
            db.SaveChanges();
            return Json(new{ success = true}); //return a dummy json, you can pass what
                                               //ever parameter you need. if code reach
                                               //this point. it will always hit success 
                                               //in our ajax call
        }
    }

确保您的 web.config 包含：

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

我也在使用这些脚本：

<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

如果有更好的地方请告诉我。

【讨论】：

“由于我的模型经过客户端验证，我只需将模型添加到我的数据库中”NO NO NO NO NO！ 客户端验证是为了创造更好的用户体验。它绝对不保证任何安全性或发布的数据实际上有效且仅限于您所期望的（例如：只是一个 Provider，不包括 Provider 属性指向的对象链）。您绝对仍然必须实现服务器端验证，否则会发生可怕的事情。
感谢您的回答@bto.rdz。我想知道您是否可以标记您的代码 sn-ps 以显示代码的去向。另外，还有几个问题：1.你把你的javascript放在哪里了？在偏？ 2. 我正在对我的字段进行验证。当它们仍然是验证问题时，如何防止模式发布或关闭？谢谢。
这一行成功了： //$('#mdlnewprovider').modal('hide');

【解决方案2】：

你将不得不写一些 jquery - 对不起

@using (Ajax.BeginForm("ModalAdd", new AjaxOptions() {UpdateTargetId = "mymodalform", OnSuccess= "$('#myModal').modal('hide');"}))

但它只是一行

【讨论】：

据我所知，这是行不通的，因为返回部分，虽然我们认为是“失败”，但实际上是 200 OK 响应，因此会导致模式隐藏，因为它会触发OnSuccess.
不工作，当表单未正确填写时，我的模态关闭，当它正确时，它会在我的模态中加载索引视图。是否有另一种方法可以通过更多的 jquery 来实现这一点？
这对我有用，尽管我没有使用部分...AjaxOptions 中的小 jQuery sn-p 关闭了我的输入表单，我的控制器重新打开了我的结果表单。

【解决方案3】：

这是这种方法很常见的基本问题。

我们有一个 AJAX 表单，如果表单处理失败，那么部分会重新渲染并返回给浏览器，以便可以用新表单替换原始表单。如果表单成功，您希望浏览器重定向到新页面，但问题是浏览器期望返回的页面可以插入到模式中。

问题在于方法是dichotomy。也就是说，您需要进行整页刷新或 AJAX 请求，但不是两者都需要，其中适当的逻辑由服务器确定。

这个问题的一个解决方案：

我能想到的一件事是在您返回部分内容时更改服务器对错误请求 (400) 的响应，以表明尽管您返回了一些 HTML，但该过程并未成功完成。

这意味着您可以利用OnFailure AjaxOption。如果结果是失败，则获取响应数据并将其正常插入到模态中。

但是，如果状态为 200 OK，则返回一个 URL 并利用 OnSuccess 并执行一个简单的 javascript 重定向到该 URL。

【讨论】：

我明白你的意思，听起来不错，问题是我不知道如何将你的解决方案翻译成代码

【解决方案4】：

我使用 JavaScript 来控制页面重定向和重新加载。

我使用的选项是：

当控制器操作成功时，返回一个 JavaScript 函数来刷新主机页面，而不是一个 RedirectToAction。

return this.Content("location.reload()");
返回一个 JavaScript 函数以将客户端重定向到页面。
How to redirect to another webpage in JavaScript/jQuery?
在视图中具有所需的 JavaScript 重定向或重新加载逻辑的 RedirectToAction

【讨论】：