将警报消息改为吐司消息

alert警报信息，用户需要去点击确定，警报提示框才关闭。
而confirm提示框。某些操作警报给用户确认，是否继续操作。必须让用户确认或取消。

写些示例来说明，

 <table style="width: 65%;">
     <tr>
         <td>HTML Button</td>
         <td>HTML Button</td>
         <td>Server Button</td>
         <td>Server Button</td>
     </tr>
     <tr>
         <td>
             <input id="ButtonHtmlAlertButton" type="button" value="alert button" onclick="alertbutton_click();" /></td>
         <td>
             <input id="ButtonHtmlConfirmButton" type="button" value="confirm button" onclick="confirmbutton_click();" /></td>
         <td>
             <asp:Button ID="ButtonServerAlertButton" runat="server" Text="Alert Button" OnClick="ButtonServerAlertButton_Click" /></td>
         <td>
             <asp:Button ID="ButtonServerConfirmButton" runat="server" Text="Confirm Button" OnClick="ButtonServerConfirmButton_Click" /></td>
     </tr>
 </table>

 

 

<script type="text/javascript">
    function alertbutton_click() {
        alert("hi 点击了html alert按钮。");
    }

    function confirmbutton_click() {
        if (confirm("确认操作继续，确认后状态无法退回。") == true)
            return true;
        else
            return false;
    }
</script>

 

Server Button cs代码，

 protected void Page_Load(object sender, EventArgs e)
 {
     if (!IsPostBack)
     {
         Data_Binding();
     }
     this.ButtonServerConfirmButton.Attributes["OnClick"] = "return confirm('确认操作继续，确认后状态无法退回。')";
 }

 protected void ButtonServerAlertButton_Click(object sender, EventArgs e)
 {
     string message = "Hi 点击Alert服务按钮。";
     AlertMessage(message);
 }

 protected void ButtonServerConfirmButton_Click(object sender, EventArgs e)
 {
     
 }

 private void AlertMessage(string message)
 {
     System.Text.StringBuilder sb = new System.Text.StringBuilder();
     sb.Append("<script type = 'text/javascript'>");
     sb.Append("window.onload=function(){");
     sb.Append("alert('");
     sb.Append(message);
     sb.Append("')};");
     sb.Append("</script>");
     ScriptManager.RegisterStartupScript(this, this.GetType(), Guid.NewGuid().ToString(), sb.ToString(), false);
 }

 

 

Confirm Button上面有提及，保留其必须用户点击。

为提示效率，减少用户点击鼠标操作频率。我们把这些Alert信息改为吐司信息。
先修改html alert button功能，

 function alertbutton_click() {
     /* alert("hi 点击了html alert按钮。");*/

     showMessage("hi 点击了html alert按钮。", false);
 }

 //function showMessage(msg, isError) {
 //    let toast = document.getElementById('dynamicToast');
 //    if (!toast) {
 //        toast = document.createElement('div');
 //        toast.id = 'dynamicToast';
 //        toast.style.cssText = `
 //        position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
 //        background: #333; color: #fff; padding: 8px 16px; border-radius: 4px;
 //        z-index: 10000; font-size: 14px; opacity: 0; transition: opacity 0.2s;
 //        pointer-events: none; font-family: sans-serif;
 //    `;
 //        document.body.appendChild(toast);
 //    }
 //    toast.textContent = msg;
 //    toast.style.backgroundColor = isError ? '#d9534f' : '#5cb85c';
 //    toast.style.opacity = '1';
 //    setTimeout(() => { toast.style.opacity = '0'; }, 2000);
 //}

有在js代码中，添加一个方法，showMessage(msg,IsError)。
然后在alertbutton_click事件中，把
alert("hi 点击了html alert按钮。");
修改为
showMessage("hi 点击了html alert按钮。", false);

这样子，警报信息将在页面顶部呈现2000毫秒自动消失。
显示时长，可自行修改setTimeout值。

如果你项目中，多处页面共用这个功能，可以把showMessage写成一个js库，页面需要用到的地方，引用即可。
如下面javascript代码，另存成一个js文件，放在你的项目中。

 

(function () {
    let toast = null;

    function ensureToast() {
        if (!toast) {
            toast = document.createElement('div');
            toast.id = 'dynamicToast';
            toast.style.cssText = `
                position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
                background: #333; color: #fff; padding: 8px 16px; border-radius: 4px;
                z-index: 10000; font-size: 14px; opacity: 0; transition: opacity 0.2s;
                pointer-events: none; font-family: sans-serif;
            `;
            document.body.appendChild(toast);
        }
    }

    window.showMessage = function (msg, isError) {
        ensureToast();
        toast.textContent = msg;
        toast.style.backgroundColor = isError ? '#d9534c' : '#5cb85c';
        toast.style.opacity = '1';
        clearTimeout(window.toastTimeout);
        window.toastTimeout = setTimeout(() => {
            toast.style.opacity = '0';
        }, 2000);
    };
})();

 

参考下面代码，修改程序，

 

接下来，我们修改Server Alert Button功能，希望在C#端应用到javascript的showMessage()方法。

写成一个静态方法，

 

namespace Insus.NET
{
    public static class ToastHelper
    {       
        public static void ShowMessage(Page page, string message, bool isError = false, Control updatePanel = null)
        {
            //  string script = $"showMessage('{EscapeJsString(message)}', {isError.ToString().ToLower()});";   //C# 6.0 or above.
            string script = string.Format("showMessage('{0}', {1});", EscapeJsString(message), isError.ToString().ToLower());

            // 尝试获取 ScriptManager
            ScriptManager sm = ScriptManager.GetCurrent(page);

            if (sm != null && updatePanel != null)
            {
                // 有 ScriptManager 且指定了 UpdatePanel，注册到该 UpdatePanel 范围内
                ScriptManager.RegisterStartupScript(updatePanel, updatePanel.GetType(), Guid.NewGuid().ToString(), script, true);
            }
            else if (sm != null)  
            {
                // 有 ScriptManager 但未指定 UpdatePanel，注册到页面（适用于普通异步回发）
                ScriptManager.RegisterStartupScript(page, page.GetType(), Guid.NewGuid().ToString(), script, true);
            }
            else
            {
                // 没有 ScriptManager，使用传统方式（适用于普通回发）
                page.ClientScript.RegisterStartupScript(page.GetType(), Guid.NewGuid().ToString(), script, true);
            }
        }

        private static string EscapeJsString(string s)
        {
            if (string.IsNullOrEmpty(s)) return string.Empty;
            return System.Web.HttpUtility.JavaScriptStringEncode(s);
        }
    }
}

 修改代码，

 

 最后看看alert按钮呈现效果(留意绿色警报信息)，