• Asp.Net统一前后端提示信息方案


    Asp.Net统一前后端提示信息方案

     
    目录
    要解决的问题
    1. 减少弹框前后端代码量
    2. 增强可维护性
    3. 前后端提示资源统一
    4. 可以实现简单的多语言提示方案
    5. 增强重用性和易用性

          ...

    用自定义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: { '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: { '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文件
     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: {{ ""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
    }
    }

    AlertHelper.cs 【展开查看详细】

      

    示例代码(不完整)及截图
    •  在页面上放置了不同的按钮响应不同的前后端代码
     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 【展开查看详细】

     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");
    }

    }
    }

    Default.aspx.cs 【展开查看详细】

    示例截图

    示例下载

     示例下载:http://files.cnblogs.com/zhongweiv/AlertTipSamples.zip

     示例代码Target Framework为:.NET Framework3.5^_^!

    备注:因为是Demo有很多可优化的地方就省略了,XML文件也可以根据提示信息的多少或功能模块决定是否分开放置!         

    作   者:   Porschev[钟慰] 
    出   处:   http://www.cnblogs.com/zhongweiv/ 
    微   博:     http://weibo.com/porschev 
    欢迎任何形式的转载,但请务必注明原文详细链接

     
    分类: ASP.NETJS & jQuery
    标签: 帮助类
  • 相关阅读:
    About Spring
    execle导入后 数据 无刷新 显示在 输入页面
    前端小神龟 -- 分页导航栏
    如何在mysql命令窗口获取到程序正在执行的sql语句
    div+css(ul li)实现图片上文字下列表布局
    C#异常之(已有打开的与此 Command 相关联,已有打开的与此命令相关联的 DataReader,必须首先将它关闭。)
    台灣VR內容產業聯盟_技術推廣中心
    2014新的一年到来,祝大家新年快乐
    matlab 提取文件路径名称,用于实现遍历读取文件(我的目的是遍历图像)
    无监督学习一些算法的简要概括(一)-稀疏自编码
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3247124.html
Copyright © 2020-2023  润新知