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>
View Code
<script type="text/javascript">
function alertbutton_click() {
alert("hi 点击了html alert按钮。");
}
function confirmbutton_click() {
if (confirm("确认操作继续，确认后状态无法退回。") == true)
return true;
else
return false;
}
</script>
View Code
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); }
View Code
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); //}
View Code
有在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); }; })();
View Code
参考下面代码，修改程序，
接下来，我们修改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); } } }
View Code
修改代码，
最后看看alert按钮呈现效果(留意绿色警报信息)，
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。