ASP.NET MVC BootstrapDialog

标签: asp.net  mvc  javascript

前端页面Index.cshtml使用BootstrapDialog制作消息对话框,实现效果:
这里写图片描述
实现过程:
1.引入bootstrap-dialog.js到Scripts文件夹,bootstrap-dialog.css到Content文件夹;
2.在Index.cshtml中添加JavaScript代码:

//工具栏
            //添加按钮
            $("#btn_add").click(function () {
                var addDialog = new BootstrapDialog(
                {
                    title: "<span class='glyphicon glyphicon-plus'></span>添加管理员",
                    message: function (dialog) {
                        var $message = $('<div></div>');
                        var pageToLoad = dialog.getData('pageToLoad');
                        $message.load(pageToLoad);
                        return $message;
                    }, data: {
                        'pageToLoad': '@Url.Action("AddPartialView")'
                    },
                    buttons: [
                    {
                        icon: "glyphicon glyphicon-plus",
                        label: "添加",
                        action: function (dialogItSelf) {
                            $.post($("form").attr("action"), $("form").serializeArray(), function (data) {
                                if (data.Code == 1) {
                                    BootstrapDialog.show({
                                        message: data.message,
                                        buttons: [
                                            {
                                                icon: "glyphicon glyphicon-ok",
                                                label: "确定",
                                                action: function(dialogItSelf) {
                                                    $table.bootstrapTable("refresh");
                                                    dialogItSelf.close();
                                                    addDialog.close();
                                                }
                                            }
                                        ]
                                    });
                                }
                                else BootstrapDialog.alert(data.Message);
                            }, "json");
                            $("form").validate();
                        }
                    }, {
                        icon: "glyphicon glyphicon-remove",
                        label: "关闭",
                        action:function(dialogItSelf) {
                            dialogItSelf.close();
                        }
                    }]
                });
                addDialog.open();
            });
            //添加按钮结束
版权声明:本文为Gary_888原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Gary_888/article/details/73245094