Asp.Net统一前后端提示信息方案
时间:2022-04-22
本文章向大家介绍Asp.Net统一前后端提示信息方案,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
要解决的问题
- 减少弹框前后端代码量
- 增强可维护性
- 前后端提示资源统一
- 可以实现简单的多语言提示方案
- 增强重用性和易用性
... 用自定义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
扩展和整合 网页为了更好用户体验一般会选择一些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);
}
- 增加后端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;
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
}
}
示例代码(不完整)及截图
- 在页面上放置了不同的按钮响应不同的前后端代码
<%@ 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>
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");
}
}
}
示例截图
示例下载 示例代码Target Framework为:.NET Framework3.5^_^! 备注:因为是Demo有很多可优化的地方就省略了,XML文件也可以根据提示信息的多少或功能模块决定是否分开放置!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- vue.config.js的优化配置(element-ui, echarts, lodash按需加载 )
- Flutter “孔雀开屏”动画效果
- Flutter 使用Navigator进行局部跳转页面
- Flutter 动画鼻祖之CustomPaint
- 【Flutter实战】Flutter 中那么多组件,难道要都学一遍?
- 【Flutter组件终结篇】332个组件 658页PDF
- Kubernetes在pod中配置hosts解析域名
- 【Flutter 实战】简约而不简单的计算器
- Flutter 中渐变的高级用法
- 【Flutter实战】动画核心(1/2)
- 【Flutter实战】动画核心(2/2)
- Flutter 1.17 新 Material motion 规范的预构建动画
- Canonical通过Flutter启用Linux桌面应用程序支持
- Flutter 快捷开发 Mac Android Studio 篇
- TRTC Android端开发接入学习之互动直播(七)