ASP.NET MVC BootstrapDialog

前端页面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();
            });
            //添加按钮结束
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值