| 目錄 |
| 要解決的問題 |
- 減少彈框前后端代碼量
- 增強可維護性
- 前后端提示資源統一
- 可以實現簡單的多語言提示方案
- 增強重用性和易用性
...
| 用自定義XML匯總提示信息 |
- 為了實現前后端提示資源的統一，把提示信息放入自定義XML文件中，初步想法如下（alerttip節點表提示信息節點）
<?xml version="1.0" encoding="utf-8" ?> <tiplist> <alerttip> <id>1</id> <chinese>成功</chinese> </alerttip> <alerttip> <id>-1</id> <chinese>失敗</chinese> </alerttip> </tiplist>
- 進一步為了實現簡單支持多語言版本和語言設置進一步修改XML結構，修改后如下（增加language節點控制項目語言版本，每個alerttip節點下增加其它語言提示信息）
<?xml version="1.0" encoding="utf-8" ?> <tiplist> <language> <value>chinese</value> </language> <alerttip> <id>1</id> <chinese>成功</chinese> <english>success</english> </alerttip> <alerttip> <id>-1</id> <chinese>失敗</chinese> <english>fail</english> </alerttip> </tiplist>
| 前端彈框實現 |
- Jquery解析XML文件，通過ID節點，返回對應的提示信息
function getTip(tipId) { var returnVal = ""; $.ajax({ url: 'xml/tip.xml', type: 'get', dataType: 'xml', timeout: 1000, cache: true, async: false, error: function(xml) { returnVal = 'Loading Error!'; }, success: function(xml) { var language = $(xml).find('language:first').children("value").text(); $(xml).find("alerttip").each(function(i) { var idVal = $(this).children("id").text(); if (idVal == tipId) { returnVal = $(this).children(language).text(); return false; } }); } }); return returnVal; }
- 提取彈框提示方法
/*------------------------------------------------------------------------------------------- 功能：Windows彈框，通過傳入XML文件中ID節點的text查找提示正文 參數：tipId表示XML中ID節點的text ---------------------------------------------------------------------------------------------*/ function alertXml(tipId) { alert(getTip(tipId)); } /*------------------------------------------------------------------------------------------- 功能：Windows彈框，通過傳入提示正文 參數：tips表示提示正文 destUrl表示要跳轉的目的路徑 ---------------------------------------------------------------------------------------------*/ function alertGo(tips, destUrl) { alert(tips); location.href = destUrl; } /*------------------------------------------------------------------------------------------- 功能：Windows彈框，通過傳入XML文件中ID節點的text查找提示正文 參數：tipId表示XML中ID節點的text destUrl表示要跳轉的目的頁面路徑 ---------------------------------------------------------------------------------------------*/ function alertGoXml(tipId, destUrl) { alertGo(getTip(tipId), destUrl); }
| 后端彈框實現 |
- C#解析XML文件，存入Dictionary，並添加XML文件依賴緩存
//提示信息字典
private static Dictionary<string, string> tipDic = null;
#region## 根據ID從XML文件中獲取提示信息 /// <summary> /// 根據ID從XML文件中獲取提示信息 /// 進行XML文件依賴緩存 /// </summary> /// <param name="filePath">XML提示文件路徑</param> /// <param name="tipId">XML文件中ID節點</param> /// <returns>提示信息</returns> private static string GetTipDic(string filePath, string tipId) { string tipStr = string.Empty; if (HttpRuntime.Cache["TipCache"] == null) { tipDic = new Dictionary<string, string>(); string xmlPath = HttpContext.Current.Server.MapPath(filePath); XDocument doc = XDocument.Load(xmlPath); var language = doc.Descendants("language").First().Element("value").Value; var tipList = doc.Descendants("alerttip"); foreach (var item in tipList) { string id = item.Element("id").Value; if (!tipDic.ContainsKey(id)) { tipDic.Add(id, item.Element(language).Value); } } CacheDependency dep = new CacheDependency(xmlPath); HttpRuntime.Cache.Insert("TipCache", tipDic, dep, System.Web.Caching.Cache.NoAbsoluteExpiration, System.Web.Caching.Cache.NoSlidingExpiration); } else { tipDic = HttpRuntime.Cache["TipCache"] as Dictionary<string, string>; } if (tipDic.ContainsKey(tipId)) { tipStr = tipDic[tipId]; } return tipStr; } #endregion
- 提取彈框方法
//提示XML文件 private const string tipXmlPath = "xml/tip.xml"; #region## Windows彈框 /// <summary> /// 功能：Windows彈框 /// </summary> /// <param name="content">提示正文</param> public static void Alert(string content) { AlertBase(content, null, null); } /// <summary> /// 功能：Windows彈框,從XML中得到提示信息 /// </summary> /// <param name="tipId">XML文件中ID節點值</param> public static void AlertXml(string tipId) { AlertBase(GetTipDic(tipXmlPath, tipId), null, null); } /// <summary> /// 功能：彈框並跳轉 /// </summary> /// <param name="content">提示正文</param> /// <param name="url">跳轉的URL</param> public static void AlertGo(string content, string url) { AlertBase(content, url, null); } /// <summary> /// 功能：彈框並跳轉,從XML中得到提示信息 /// </summary> /// <param name="tipId">XML文件中ID節點值</param> /// <param name="url">跳轉的URL</param> public static void AlertGoXml(string tipId, string url) { AlertBase(GetTipDic(tipXmlPath, tipId), url, null); } /// <summary> /// 功能：Windows彈框 /// </summary> /// <param name="alertContext">提示正文</param> /// <param name="url">跳轉跳徑</param> /// <param name="otherScripts">腳本</param> private static void AlertBase(string alertContext, string url, string otherScripts) { Page page = HttpContext.Current.Handler as Page; System.Text.StringBuilder sb = new System.Text.StringBuilder(); if (!string.IsNullOrEmpty(alertContext)) { sb.AppendFormat("alert(\"{0}\");", alertContext); } if (!string.IsNullOrEmpty(url)) { sb.AppendFormat("location.href=\"{0}\";", url); } if (!string.IsNullOrEmpty(otherScripts)) { sb.AppendFormat("{0};", otherScripts); } page.ClientScript.RegisterStartupScript(page.GetType(), "", sb.ToString(), true); } #endregion
| 擴展和整合 |
網頁為了更好用戶體驗一般會選擇一些JS插件形式的彈出提示，我這里也用擴展一個JQuery彈出插件 jQuery BlockUI Plugin
插件API或DEMO：http://malsup.com/jquery/block/#demos
- 增加前端BlockUI提示並提取各方法到一個JS文件
alert.js 【展開查看詳細】/*------------------------------------------------------------------------------------------- 功能：通過XML中的ID節點text返回提示信息 參數：tipId表示XML中ID節點的text ---------------------------------------------------------------------------------------------*/ function getTip(tipId) { var returnVal = ""; $.ajax({ url: 'xml/tip.xml', type: 'get', dataType: 'xml', timeout: 1000, cache: true, async: false, error: function(xml) { returnVal = 'Loading Error!'; }, success: function(xml) { var language = $(xml).find('language:first').children("value").text(); $(xml).find("alerttip").each(function(i) { var idVal = $(this).children("id").text(); if (idVal == tipId) { returnVal = $(this).children(language).text(); return false; } }); } }); return returnVal; } /*------------------------------------------------------------------------------------------- 功能：Windows彈框，通過傳入XML文件中ID節點的text查找提示正文 參數：tipId表示XML中ID節點的text ---------------------------------------------------------------------------------------------*/ function alertXml(tipId) { alert(getTip(tipId)); } /*------------------------------------------------------------------------------------------- 功能：Windows彈框，通過傳入提示正文 參數：tips表示提示正文 destUrl表示要跳轉的目的路徑 ---------------------------------------------------------------------------------------------*/ function alertGo(tips, destUrl) { alert(tips); location.href = destUrl; } /*------------------------------------------------------------------------------------------- 功能：Windows彈框，通過傳入XML文件中ID節點的text查找提示正文 參數：tipId表示XML中ID節點的text destUrl表示要跳轉的目的頁面路徑 ---------------------------------------------------------------------------------------------*/ function alertGoXml(tipId, destUrl) { alertGo(getTip(tipId), destUrl); } /*------------------------------------------------------------------------------------------- 功能：BlockUI彈框，提示正文直接由參數傳入 參數：tips表示提示正文 ---------------------------------------------------------------------------------------------*/ function alertBlockUi(tips) { $.blockUI({ message: '<br/><h1>' + tips + '</h1><br/>', css: { width: '600px' }, timeout: 2000 }); } /*------------------------------------------------------------------------------------------- 功能：BlockUI彈框，通過傳入XML文件中ID節點的text查找提示正文 參數：tipId表示XML中ID節點的text ---------------------------------------------------------------------------------------------*/ function alertBlockUiXml(tipId) { alertBlockUi(getTip(tipId)); } /*------------------------------------------------------------------------------------------- 功能：BlockUI彈框並跳轉，提示正文直接由參數傳入 參數：tips表示提示正文 destUrl表示要跳轉的目的頁面路徑 ---------------------------------------------------------------------------------------------*/ function alertBlockUiGo(tips, destUrl) { $.blockUI({ message: '<br/><h1>' + tips + '</h1><br/>', css: { width: '600px' }, timeout: 2000 }); setTimeout(function() { $.unblockUI({ onUnblock: function() { location.href = destUrl; } }); }, 2000); } /*------------------------------------------------------------------------------------------- 功能：BlockUI彈框並跳轉，通過傳入XML文件中ID節點的text查找提示正文 參數：tipId表示XML中ID節點的text destUrl表示要跳轉的目的頁面路徑 ---------------------------------------------------------------------------------------------*/ function alertBlockUiGoXml(tipId, destUrl) { alertBlockUiGo(getTip(tipId), destUrl); }
alert.js 函數說明 函數名 說明 getTip(tipId) 方法：
從XML中獲取提示信息
參數：
tipId：XML文件中提示信息的對應的ID節點
alertXml(tipId) 方法：
Windows彈框（提示信息從XML中獲取）
參數：
tipId：XML文件中提示信息的對應的ID節點
alertGo(tips, destUrl) 方法：
Windows彈框並跳轉
參數：
tips：提示正文
destUrl：跳轉目的路徑
alertGoXml(tipId, destUrl) Windows彈框並跳轉提示信息從XML中獲取）
參數：
tipId：XML文件中提示信息的對應的ID節點
destUrl：跳轉目的路徑
alertBlockUi(tips) BlockUI插件彈框
參數：
tips：提示正文
alertBlockUiXml(tipId) BlockUI插件彈框（提示信息從XML中獲取）
參數：
tipId：XML文件中提示信息的對應的ID節點
alertBlockUiGo(tips, destUrl) BlockUI插件彈框並跳轉
參數：
tips：提示正文
destUrl：跳轉目的路徑
alertBlockUiGoXml(tipId, destUrl) BlockUI插件彈框並跳轉(提示信息從XML中獲取）
參數：
tipId：XML文件中提示信息的對應的ID節點
destUrl：跳轉目的路徑
- 增加后端BlockUI提示並提取各方法到一個.cs文件
AlertHelper.cs 【展開查看詳細】using System.Collections.Generic; using System.Linq; using System.Text; using System.Web; using System.Web.Caching; using System.Web.UI; using System.Xml.Linq; namespace Utils { /// <summary> /// 功能： 彈框幫助類 /// 創建人： Wilson /// 時間： 2013-08-07 /// 描述： 添加 System.Web 引用 /// </summary> public class AlertHelper { //提示信息字典 private static Dictionary<string, string> tipDic = null; //提示XML文件 private const string tipXmlPath = "xml/tip.xml"; #region## Windows彈框 /// <summary> /// 功能：Windows彈框 /// </summary> /// <param name="content">提示正文</param> public static void Alert(string content) { AlertBase(content, null, null); } /// <summary> /// 功能：Windows彈框,從XML中得到提示信息 /// </summary> /// <param name="tipId">XML文件中ID節點值</param> public static void AlertXml(string tipId) { AlertBase(GetTipDic(tipXmlPath, tipId), null, null); } /// <summary> /// 功能：彈框並跳轉 /// </summary> /// <param name="content">提示正文</param> /// <param name="url">跳轉的URL</param> public static void AlertGo(string content, string url) { AlertBase(content, url, null); } /// <summary> /// 功能：彈框並跳轉,從XML中得到提示信息 /// </summary> /// <param name="tipId">XML文件中ID節點值</param> /// <param name="url">跳轉的URL</param> public static void AlertGoXml(string tipId, string url) { AlertBase(GetTipDic(tipXmlPath, tipId), url, null); } /// <summary> /// 功能：Windows彈框 /// </summary> /// <param name="alertContext">提示正文</param> /// <param name="url">跳轉跳徑</param> /// <param name="otherScripts">腳本</param> private static void AlertBase(string alertContext, string url, string otherScripts) { Page page = HttpContext.Current.Handler as Page; System.Text.StringBuilder sb = new System.Text.StringBuilder(); if (!string.IsNullOrEmpty(alertContext)) { sb.AppendFormat("alert(\"{0}\");", alertContext); } if (!string.IsNullOrEmpty(url)) { sb.AppendFormat("location.href=\"{0}\";", url); } if (!string.IsNullOrEmpty(otherScripts)) { sb.AppendFormat("{0};", otherScripts); } page.ClientScript.RegisterStartupScript(page.GetType(), "", sb.ToString(), true); } #endregion #region## Jquery彈框 (BlockUI） /// <summary> /// 功能:Jquery插件彈框 /// </summary> /// <param name="alertContext">提示正文</param> public static void JQAlert(string alertContext) { JQAlertBase(alertContext, null); } /// <summary> /// 功能：Jquery插件彈框，從XML中得到提示信息 /// </summary> /// <param name="tipId">XML文件中ID節點值</param> public static void JQAlertXml(string tipId) { JQAlert(GetTipDic(tipXmlPath, tipId)); } /// <summary> /// 功能:Jquery插件彈框並跳轉 /// </summary> /// <param name="alertContext">提示正文</param> /// <param name="url">跳轉URL</param> public static void JQAlertGo(string alertContext, string url) { JQAlertBase(alertContext, url); } /// <summary> /// 功能:Jquery插件彈框並跳轉，從XML中得到提示信息 /// </summary> /// <param name="tipId">XML文件中ID節點值</param> /// <param name="url">跳轉URL</param> public static void JQAlertGoXml(string tipId, string url) { JQAlertGo(GetTipDic(tipXmlPath, tipId), url); } /// <summary> /// 功能:Jquery插件彈出 /// </summary> /// <param name="alertContext">提示正文</param> /// <param name="url">跳轉URL</param> private static void JQAlertBase(string alertContext, string url) { Page page = HttpContext.Current.Handler as Page; StringBuilder sb = new StringBuilder(); sb.Append("$(function(){{"); if (!string.IsNullOrEmpty(alertContext)) { sb.AppendFormat(@"$.blockUI({{ message: '<br/><h1>{0}</h1><br/>',css: {{ width: ""600px"" }}, timeout: 2000 }});", alertContext); } if (!string.IsNullOrEmpty(url)) { sb.AppendFormat("setTimeout(function() {{ $.unblockUI({{onUnblock: function(){{ location.href='{0}';}} }}); }}, 2000);", url); } sb.Append("}});"); page.ClientScript.RegisterStartupScript(page.GetType(), "", sb.ToString(), true); } #endregion #region## 根據ID從XML文件中獲取提示信息 /// <summary> /// 根據ID從XML文件中獲取提示信息 /// 進行XML文件依賴緩存 /// </summary> /// <param name="filePath">XML提示文件路徑</param> /// <param name="tipId">XML文件中ID節點</param> /// <returns>提示信息</returns> private static string GetTipDic(string filePath, string tipId) { string tipStr = string.Empty; if (HttpRuntime.Cache["TipCache"] == null) { tipDic = new Dictionary<string, string>(); string xmlPath = HttpContext.Current.Server.MapPath(filePath); XDocument doc = XDocument.Load(xmlPath); var language = doc.Descendants("language").First().Element("value").Value; var tipList = doc.Descendants("alerttip"); foreach (var item in tipList) { string id = item.Element("id").Value; if (!tipDic.ContainsKey(id)) { tipDic.Add(id, item.Element(language).Value); } } CacheDependency dep = new CacheDependency(xmlPath); HttpRuntime.Cache.Insert("TipCache", tipDic, dep, System.Web.Caching.Cache.NoAbsoluteExpiration, System.Web.Caching.Cache.NoSlidingExpiration); } else { tipDic = HttpRuntime.Cache["TipCache"] as Dictionary<string, string>; } if (tipDic.ContainsKey(tipId)) { tipStr = tipDic[tipId]; } return tipStr; } #endregion } }
| 示例代碼（不完整）及截圖 |
- 在頁面上放置了不同的按鈕響應不同的前后端代碼
Default.aspx 【展開查看詳細】<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AlertTipSamples._Default" %> <!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.7.2.min.js" type="text/javascript"></script> <script src="!js/jquery.blockUI.js" type="text/javascript"></script> <script src="!js/alert.js" type="text/javascript"></script> <style type="text/css"> h1 { margin: 0; padding: 0; } </style> </head> <body> <form id="form1" runat="server"> <div> <hr /> <input id="btnFrontend" type="button" value="前端提示（Windows）" /> <br /> <br /> <input id="btnFrontendGo" type="button" value="前端提示並跳轉（Windows）" /> <br /> <br /> <asp:Button ID="btnbackend" runat="server" Text="后端提示（Windows）" OnClick="btnbackend_Click" /> <br /> <br /> <asp:Button ID="btnbackendGo" runat="server" Text="后端提示並跳轉（Windows）" OnClick="btnbackendGo_Click" /> <br /> <br /> <br /> <hr /> <input id="btnJQFrontend" type="button" value="前端提示（Jquery）" /> <br /> <br /> <input id="btnJQFrontendGo" type="button" value="前端提示並跳轉（Jquery）" /> <br /> <br /> <asp:Button ID="btnJQbackend" runat="server" Text="后端提示（Jquery）" OnClick="btnJQbackend_Click" /> <br /> <br /> <asp:Button ID="btnJQbackendGo" runat="server" Text="后端提示並跳轉（Jquery）" OnClick="btnJQbackendGo_Click" /> <br /> <br /> <br /> <hr /> </div> </form> </body> </html> <script type="text/javascript"> $(function() { $('#btnFrontend').click(function() { alertXml(1); }); $('#btnFrontendGo').click(function() { alertGoXml(1, "Dest.aspx"); }); $('#btnJQFrontend').click(function() { alertBlockUiXml(1); }); $('#btnJQFrontendGo').click(function() { alertBlockUiGoXml(-1, "Dest.aspx"); }); }) </script>
Default.aspx.cs 【展開查看詳細】using System; using Utils; namespace AlertTipSamples { public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } /// <summary> /// Windows彈框提示 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void btnbackend_Click(object sender, EventArgs e) { AlertHelper.AlertXml("-1"); } /// <summary> /// Windows彈框提示並跳轉 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void btnbackendGo_Click(object sender, EventArgs e) { AlertHelper.AlertGoXml("-1", "Dest.aspx"); } /// <summary> /// Jquery彈框提示 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void btnJQbackend_Click(object sender, EventArgs e) { AlertHelper.JQAlertXml("-1"); } /// <summary> /// Jquery彈框提示並跳轉 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void btnJQbackendGo_Click(object sender, EventArgs e) { AlertHelper.JQAlertGoXml("-1", "Dest.aspx"); } } }
示例截圖
| 示例下載 |
示例下載：http://files.cnblogs.com/zhongweiv/AlertTipSamples.zip
示例代碼Target Framework為：.NET Framework3.5^_^!
備注：因為是Demo有很多可優化的地方就省略了，XML文件也可以根據提示信息的多少或功能模塊決定是否分開放置！