- 减少弹框前后端代码量
- 增强可维护性
- 前后端提示资源统一
- 可以实现简单的多语言提示方案
- 增强重用性和易用性
...
- 为了实现前后端提示资源的统一,把提示信息放入自定义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文件
/*-------------------------------------------------------------------------------------------
功能:通过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 【展开查看详细】
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文件
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;
< |
请发表评论