将警报消息改为吐司消息

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;elsereturn 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());// 尝试获取 ScriptManagerScriptManager 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按钮呈现效果(留意绿色欧警报信息)，