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

后台 弹窗调用改一下

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

然后看看效果：完美实现