专栏首页Porschev[钟慰]的专栏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

扩展和整合 网页为了更好用户体验一般会选择一些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文件也可以根据提示信息的多少或功能模块决定是否分开放置!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • C# AD(Active Directory)域信息同步,组织单位、用户等信息查询

    接上篇 Windows Server 2008 R2 配置AD(Active Directory)域控制器 对AD域结合常见需求用C#进行一些读取信息的操作...

    Porschev
  • Nodejs学习笔记(十一)--- 数据采集器示例(request和cheerio)

    写在之前   很多人都有做数据采集的需求,用不同的语言,不同的方式都能实现,我以前也用C#写过,主要还是发送各类请求和正则解析数据比较繁琐些,总体来说没啥不好的...

    Porschev
  • 项目中对图片的缩放和水印效果

    ///<summary> /// 获取一个图片按等比例缩小后的大小。 ///</summary> ///<param name="maxWidth">需要缩小到...

    Porschev
  • C#目录文件复制、创建操作

    跟着阿笨一起玩NET
  • 免费开源的DotNet任务调度组件Quartz.NET(.NET组件介绍之五)

        很多的软件项目中都会使用到定时任务、定时轮询数据库同步,定时邮件通知等功能。.NET Framework具有“内置”定时器功能,通过System.Tim...

    彭泽0902
  • 我在工作中使用的自己实现的超简易ORM工具

    我在7月份到了家新公司,要维护一个在原来.net1.1上的系统。我进去一看代码就傻了眼了,满屏的SQL语句,看得脑袋嗡嗡的.但是苦于.net1.1,又不敢大动直...

    用户1687945
  • 用于RichTextBox控件记录日志信息

    跟着阿笨一起玩NET
  • 《Learning ELK Stack》10 扩展ELK

    yeedomliu
  • RxJava2 入门详细笔记(1)

    在 RxJava 中,一个实现了 Observer 接口的对象可以订阅一个 Observable 类的实例。订阅者对 Observable 发射的任何数据或数据...

    叶应是叶
  • Asp.NetCoreWebApi图片上传接口(二)集成IdentityServer4授权访问(附源码)

    上一篇文章中,给大家讲解了如何通过 Asp.Net Core Web Api实现图片上传的接口,具体的可以[点这里查看][https://www.cnblogs...

    依乐祝

扫码关注云+社区

领取腾讯云代金券