.Net自定義后台可用的提示(alert,confirm)控件


從不會到會,這是一個累而充實的過程;從會到精,這是一個有收獲的過程;從精到簡化,到自動化,這是一個普普通通的過程。但這只是一個短暫的過程,他有盡頭,有終點。
一份可以讓我為之貢獻一生的事業應該是——可以讓我不斷追求完美,追求高效率,逐漸簡化,然后實現自動化。換言之就是太懶,需要用不斷學習新東西,打發時間,以維持生存。

言歸正傳,之前寫了一篇文章:用js和css重寫alert和Confirm提示窗口,支持服務器控件調用。主要是供前端代碼調用,這篇文章寫通過建立后台控件來實現前台的alert和confirm提示窗口。即后台直接使用alert和confirm方法后,在頁面加載完后會自動彈出提示框。
先上調用頁面.aspx的前台代碼

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InfoPromptLayer.aspx.cs" Inherits="WebApplication1.InfoPromptLayer" %>

<%@ Register TagPrefix="Promt" TagName="PromtLayer" Src="~/Controls/PromptLayer1.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery-1.12.1.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <Promt:PromtLayer ID="ucPromtLayer" runat="server"></Promt:PromtLayer>
    <div>
        test alert control
    </div>
    <div>
        <asp:Button ID="btnConfirm" runat="server" Text="test Confirm" onclick="btnConfirm_Click"/>
    </div>
     <div>
        <asp:Button ID="btnAlert" runat="server" Text="test Alert" onclick="btnAlert_Click" />
    </div>
    </form>

</body>
</html>

其中<Promt:PromtLayer ID="ucPromtLayer" runat="server"></Promt:PromtLayer>是控件的調用代碼,記得添加頭部的引用。
調用頁面的后台.cs代碼:

using System;

namespace WebApplication1
{
    public partial class InfoPromptLayer : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            btnConfirm.OnClientClick = ucPromtLayer.ConfirmForClientClick("提示消息", "是否確認刪除!", 240, 200, btnConfirm.ClientID);
        }

        protected void btnConfirm_Click(object sender, EventArgs e)
        {
            string callback = @"function (r) { if (r) { PlusAlert('模擬Alert彈窗', '你單擊了確定'); } else { PlusAlert('模擬Alert彈窗', '你單擊了取消'); } }";
            ucPromtLayer.Confirm("test title", "test message", 240, 200, callback);
        }
        protected void btnAlert_Click(object sender, EventArgs e)
        {
            string callback = @"function (r) { if (r) { PlusAlert('模擬Alert彈窗', '你單擊了確定'); } else { PlusAlert('模擬Alert彈窗', '你單擊了取消'); } }";
            ucPromtLayer.Alert("test title", "test message", 240, 200, callback);
        }

    }
}

這里定義了兩個.net的前台按鈕的單擊事件,頁面加載時還給按鈕添加了OnClientClick事件,這在很多表格的事件綁定上用到。callback這個參數是用js寫的一個回調方法。
接下來是控件的前台.ascx代碼:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PromptLayer1.ascx.cs" Inherits="WebApplication1.Controls.PromptLayer1" %>
<script src="<%=HttpRoot%>/js/promotLayer.js" type="text/javascript"></script>

其中HttpRoot變量主要是用於獲取js路徑用
控件后台.cs代碼:

using System;
using System.Web.UI;

namespace WebApplication1.Controls
{
    public partial class PromptLayer1 : System.Web.UI.UserControl
    {
        public string HttpRoot
        {
            get
            {
                return Request.ApplicationPath;
            }
        }

        protected void Page_Load(object sender, EventArgs e)
        {

        }
        /// <summary>
        /// 后台alert
        /// </summary>
        /// <param name="str_title"></param>
        /// <param name="str_message"></param>
        /// <param name="str_width"></param>
        /// <param name="str_height"></param>
        /// <param name="str_callback">完整的前台js返回函數的字符串</param>
        public void Alert(string str_title, string str_message, int str_width, int str_height, string str_callback) {
            string strScript = "PlusAlert('" + str_title + "', '" + str_message + "', " + str_width + "," + str_height + "," + str_callback + ")";
            strScript = "<script type=\"text/javascript\">\n" + strScript + "\n</script>";
            Page.ClientScript.RegisterStartupScript(GetType(),"alert",strScript);
        }
        /// <summary>
        /// 后台Confirm
        /// </summary>
        /// <param name="str_title"></param>
        /// <param name="str_message"></param>
        /// <param name="str_width"></param>
        /// <param name="str_height"></param>
        /// <param name="str_callback">完整的前台js返回函數的字符串</param>
        public void Confirm(string str_title, string str_message, int str_width, int str_height, string str_callback)
        {
            string strScript = "PlusConfirm('" + str_title + "', '" + str_message + "', " + str_width + "," + str_height + "," + str_callback + ")";
            strScript = "<script type=\"text/javascript\">\n" + strScript + "\n</script>";
            Page.ClientScript.RegisterStartupScript(GetType(), "alert", strScript);
        }
        /// <summary>
        /// 后台控件標簽內直接添加confirm
        /// </summary>
        /// <param name="str_title"></param>
        /// <param name="str_message"></param>
        /// <param name="str_width"></param>
        /// <param name="str_height"></param>
        /// <param name="controlId">使用onClientClick事件的控件id</param>
        public string ConfirmForClientClick(string str_title, string str_message, int str_width, int str_height, string controlId)
        {
            string strScript = "return ConfirmForClientClick('" + str_title + "', '" + str_message + "', " + str_width + "," + str_height + ",'" + controlId + "')";
            return strScript;
        }
    }
}

最后是提示窗體的實際生成代碼:

//后台控件調用自定義confirm窗口時,需要單擊控件后先返回false,當點擊確定時,再次模擬點擊控件。
var IsOk = false;
function ConfirmForClientClick(title, message, width, height, controlId) {
    if (IsOk) {
        return true;
    }
    PlusConfirm(title, message, width, height, function (r) {
        if (r) {
            IsOk = true;
            document.getElementById(controlId).click();
        } else {
            IsOk = false;
        }
    });
    return false;
}
//css樣式
var strStyle = "<style type='text/css'>"; strStyle += ".confirmPop{width:350px; height:170px;border:#64a64b solid 1px; position:absolute;background:#fff;z-index: 9999;left: 0px;right: 0px;top: 0px; bottom: 0px;margin:auto;font-family:Microsoft Yahei;}"; strStyle += ".confirmTitle{ background-color:#69ae4e; position:relative;}"; strStyle += ".confirmTitle span{line-height: 30px;margin-left: 6px;font-size: 13px;color: white;}"; strStyle += ".confirmTitle .btnclose{float: right;font-size: 19px;color: rgba(255, 255, 255, 0.88);height: 30px;width: 30px;cursor: pointer;text-align: center;}"; strStyle += ".confirmText{ margin:30px 40px;text-align: center;}.confirmText span{ font-size: 15px;}"; strStyle += ".confirmBtnBox{ text-align:center; margin:30px 0 28px 0;font-size: 15px;}"; strStyle += ".confirmBtnBox .btn{ display:inline-block; padding:0 25px; height:30px; line-height:30px; color:#fff; background-color: #64a64b;margin: 0 10px;}"; strStyle += ".confirmBtnBox .btn:hover{ background-color:#509236;}"; strStyle += ".confirmGlobal{display: block; position: fixed; clear: both; z-index: 9999; left: 0px; top: 0px; bottom: 0px;border: 0px solid rgb(255, 255, 255); width: 100%; height: 100%; opacity: 0.5; background: rgb(255, 255, 255);}"; strStyle += "</style>";
$("head").append(strStyle)
//js事件
$.alerts = {
    alert: function (title, message, width, height, callback) {
        if (title == null) title = 'Alert';
        $.alerts._show(title, message, width, height, 'alert', callback);
    },
    confirm: function (title, message, width, height, callback) {
        if (title == null) { title = 'Confirm'; }
        return $.alerts._show(title, message, width, height, 'confirm', callback);
    },
    _show: function (title, msg, width, height, type, callback) {
        renderHtml(title, msg, width, height, type);
        switch (type) {
            case 'alert':
                $("#confirmBtnSure").click(function () {
                    $.alerts._hide();
                    if (callback) {
                        callback(true);
                    }
                });
                $("#confirmBtnSure").focus().keypress(function (e) {
                    if (e.keyCode == 13 || e.keyCode == 27) {
                        $("#confirmBtnSure").trigger('click');
                    }
                });
                break;
            case 'confirm':
                $("#confirmBtnSure").click(function () {
                    $.alerts._hide();
                    if (callback) {
                        return callback(true);
                    }
                });
                $("#confirmBtnCancel").click(function () {
                    $.alerts._hide();
                    if (callback) {
                        return callback(false);
                    }
                });
                $("#confirmBtnCancel").focus();
                $("#confirmBtnSure, #confirmBtnCancel").keypress(function (e) {
                    if (e.keyCode == 13) {//回車
                        $("#confirmBtnSure").trigger('click');
                    }
                    if (e.keyCode == 27) {//ESC
                        $("#confirmBtnCancel").trigger('click');
                    }
                });
                break;
        }
    },
    _hide: function () {
        $("#confirmId,#confirmGlobal").remove();
    }
}
//修改Alert彈層提示框
//標題-title,提示信息-altInfo,確認按鈕函數-callback,寬度-width
PlusAlert = function (title, message, width, height, callback) {
    $.alerts.alert(title, message, width, height, callback);
}
//修改Confirm彈層提示框
PlusConfirm = function (title, message, width, height, callback) {
    $.alerts.confirm(title, message, width, height, callback);
};
//生成html並渲染樣式
function renderHtml(title, msg, width, height, type) {
    var strPrompt = "<div id='confirmId' style='"; if (width) { strPrompt += "width: " + width + "px;"; } if (height) { strPrompt += "height: " + height + "px;"; } strPrompt += "'>";
    strPrompt += "<div id='confirmTitleDiv'><span id='confirmTitle'>" + title + "</span><a class='btnclose'>X</a></div><div id='confirmTextDiv'><span id='confirmInfo'>";
    strPrompt += msg + "</span></div><div id='confirmBtnBox'>";
    strPrompt += "<a class='btn' href='javascript:void(0)' id='confirmBtnSure'>確 認</a>";
    if (type == "confirm") {
        strPrompt += "<a class='btn' href='javascript:void(0)' id='confirmBtnCancel'>取 消</a>";
    }
    strPrompt += "</div></div>";
    $("body").append(strPrompt)
    //遮罩層
    $("#confirmId").before("<div id='confirmGlobal'></div>")
    //手動渲染樣式
    $("#confirmId").attr("class", "confirmPop");
    $("#confirmTitleDiv").attr("class", "confirmTitle");
    $("#confirmTextDiv").attr("class", "confirmText");
    $("#confirmBtnBox").attr("class", "confirmBtnBox");
    $("#confirmBtnSure").attr("class", "btn");
    $("#confirmBtnCancel").attr("class", "btn");
    $("#confirmGlobal").attr("class", "confirmGlobal");
    $(".btnclose").click(function () {
        $.alerts._hide();
    });
}

寫代碼的時候養成一個習慣,再簡單的代碼能加注釋就加注釋。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com