DTCMS:后台执行JS弹窗


需求

dtcms 后台开发

dtcms 有后台弹出消息的方法

JscriptMsg($"删除失败以下软件名称已经被使用:{String.Join(",", ids)}", "");

使用如下:

代码截图

效果:

效果

 

这种提示框过几秒就会消失,体验不太好,想实现那种直接弹窗,点击确定按钮关闭那样,就像删除提示框

 

分析

分析后台 JsCriptMsg 方法执行内容,在 DTCMS.Web.UI.ManagePage.cs 中

/// <summary>
/// 添加编辑删除提示
/// </summary>
/// <param name="msgtitle">提示文字</param>
/// <param name="url">返回地址</param>
protected void JscriptMsg(string msgtitle, string url)
{
	string msbox = "parent.jsprint(\"" + msgtitle + "\", \"" + url + "\")";
	ClientScript.RegisterClientScriptBlock(Page.GetType(), "JsPrint", msbox, true);
}

代码截图

就是让前台执行一段JS代码,没什么好讲的,既然是这样,我们把 JS 代码中的 parent.jsprint 改成 dialog 什么的不就可以了吗?

 

分析 前台删除按钮的事件

<asp:LinkButton ID="btnDelete" runat="server" OnClientClick="return ExePostBack('btnDelete','本操作会删除数据库类型,是否继续?');" OnClick="btnDelete_Click"><i class="iconfont icon-delete"></i><span>删除</span></asp:LinkButton></li>

确定弹窗 是在 ExePostBack 这个 js 方法中执行的,项目中搜素一下 ExePostBack ,在 dtcms.Web.admin.js.common.js 中

//执行回传函数
function ExePostBack(objId, objmsg) {
    if ($(".checkall input:checked").size() < 1) {
        parent.dialog({
            title: '提示',
            content: '对不起,请选中您要操作的记录!',
            okValue: '确定',
            ok: function () { }
        }).showModal();
        return false;
    }
    var msg = "删除记录后不可恢复,您确定吗?";
    if (arguments.length == 2) {
        msg = objmsg;
    }
    parent.dialog({
        title: '提示',
        content: msg,
        okValue: '确定',
        ok: function () {
            __doPostBack(objId, '');
        },
        cancelValue: '取消',
        cancel: function () { }
    }).showModal();

    return false;
}

代码截图

 

找到了,parent.dialog 就是我们要的 js 弹窗方法,修改后台代码

 

解决方案

在 Dtcms.Web.UI.ManagePage.cs 中新增一个弹窗方法

 protected void JscriptDialogMsg(string title, string message)
{
    /*
      title: '提示',
    content: msg,
    okValue: '确定',
    ok: function () { }
     */
    string msbox = "parent.dialog({" +
        $"title: '{title}'," +
        $"content: '{message}'," +
        "okValue: '确定'," +
        "ok: function() { }"
        + "}).showModal()";
    ClientScript.RegisterClientScriptBlock(Page.GetType(), "JsDialog", msbox, true);
}
GarsonZhang www.yesdotnet.com

 

后台 弹窗调用改一下

if (ids.Count > 0)
{
    //JscriptMsg($"删除失败以下软件名称已经被使用:{String.Join(",", ids)}", "");
    JscriptDialogMsg("删除失败", $"以下软件名称已经被使用:{String.Join(",", ids)}");
    return;
}
GarsonZhang www.yesdotnet.com

代码截图

然后看看效果:完美实现

最终效果

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
YES开发框架
上一篇:支付宝:网页获得用户信息
下一篇:SQL Server 数据库类型和.NET数据类型映射关系
评论列表

发表评论

评论内容
昵称:
关联文章

DTCMS:后台执行JS
Bootstrap JS组件封装
页面提醒
如何关掉
DTCMS:html模板中格式化时间
.NET MVC加载从后台加载JS代码块
Python暂停程序执行
DevExpress RibbonControl 自定义右键出菜单
js Copy剪切板
体GridView布局自定义
Devexpress 运行时会出注册或试用日期窗口
体状态
体权限
javascript js等待几秒执行,休眠几秒中
three.js
gulp处理LESS,以及js压缩
C# 执行Javascript脚本
Node.js历史下载
bat批处理中执行gulp界面一闪而过,执行完后cmd窗口就会关闭的解决办法
Electron edge.js配置

联系我们
联系电话:15090125178(微信同号)
电子邮箱:garson_zhang@163.com
站长微信二维码
微信二维码