更改 Bootstrap Modal 的内容 - BootBox JS答案

【问题标题】：Change content of Bootstrap Modal - BootBox JS更改 Bootstrap Modal 的内容 - BootBox JS
【发布时间】：2015-06-11 11:54:56
【问题描述】：

我正在使用 bootbox JS 来显示模态对话框：http://bootboxjs.com/documentation.html

我正在尝试在模态对话中显示一个表格。此表单处于部分视图中。

这很好用，我可以使用下面的代码加载部分视图并在模态中显示。

HTML：

    <button type="button" class="btn btn-labeled btn-primary pull-right"
            data-modal-title="Create Workshop" data-action="OpenPartialViewDialog" 
            data-action-url="@Url.Action("CreateWorkshop", "Workshops")">
        <span class="btn-label"><i class="glyphicon glyphicon-plus"></i></span>Create
    </button>

jQUERY

$("body").on("click", '*[data-action="OpenPartialViewDialog"]', function (e) {

    e.stopPropagation();

    var btn = $(this);
    var title = btn.data("modal-title");
    $.ajax({
        url: btn.data("action-url"),
        type: "GET",
        success: function (response) {

            bootbox.dialog({
                message: response,
                title: title,
                buttons: {
                    success: {
                        label: "Save",
                        className: "btn-success",
                        callback: function () {
                            $.ajax({
                                url: btn.data("action-url"),
                                type: "POST",
                                data: $("form").serialize(),
                                success: function (response) {

                                },
                                error: function (response) {
                                    return false;
                                }

                            });

                            return false;
                        }
                    },
                    danger: {
                        label: "Cancel",
                        className: "btn-danger"
                    }
                }
            });
        }
    });
});

正如您在上面的代码中看到的，当用户单击Save 按钮时，我正在发送一个 Ajax 请求。

//EXTRACTED CODE FROM ABOVE
callback: function () {
$.ajax({
    url: btn.data("action-url"),
    type: "POST",
    data: $("form").serialize(),
    success: function (response) {

    } 
});

这就是我想要做的，

这是我的控制器中的代码，我在其中发布表单：

    [HttpPost]
    public ActionResult CreateWorkshop(WorkshopDTO model)
    {
        if (ModelState.IsValid)
        {

        }
        return PartialView(model);
    }

当用户提交表单时，控制器会检查服务器端验证。

如果验证失败，控制器将返回 HTML（带有验证消息的部分视图）

我想刷新我的模态内容以显示验证。

我在文档中看不到任何与此相关的内容：http://bootboxjs.com/documentation.html#bb-custom-dialog

总结：这是我需要做的。这就是模态的样子，当用户单击“如果验证失败时保存”时，更新模态消息内容

【问题讨论】：

标签： jquery ajax asp.net-mvc bootbox

【解决方案1】：

您可以在初始模式的回调函数中使用自己的参数进行另一个引导箱调用。禁用第二个模态上的动画，以便用户看起来第一个模态刚刚改变。

bootbox.dialog({
    message: response,
    title: title,
    buttons: {
        success: {
            label: "Save",
            className: "btn-success",
            callback: function () {
                bootbox.dialog({
                    animate: false,
                    message: newresponse,
                    title: newtitle,
                    etc...

【讨论】：

听起来是个好主意。会试一试，看看结果。
当我点击提交按钮时，屏幕上仍然出现故障。