Question

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

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

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

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);
    }

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

如果验证失败，则Controller返回HTML（带有验证消息的部分视图）

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

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

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

enter image description here

Answer 1

您可以在初始模式的回调函数中使用自己的参数进行另一个bootbox调用。在第二个模态上禁用动画，这样对于用户来说它看起来就像刚改变的第一个模态。

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

更改Bootstrap Modal的内容 - BootBox JS

1 个答案: