zoukankan      html  css  js  c++  java
  • 基于MVC简单实现多语言DEMO

    这里说的实现多语言切换,主要是谈的网站UI界面实现语言的切换,不包括网站内容。

    如果,要实现其内容也要支持多语言,那么数据库的数据的存放,也要根据语言的不同,分门别类。在读取数据时,根据参数,切换访问的数据源,来实现内容的切换。

    好了,扯远了,今天主要谈谈基于MVC实现UI多语言的切换。由于MVC有很多可以扩展的点,实现起来也比较方便。

    第一种通过扩展HtmlHelper类,根据参数的不同,读取不同的资源文件,通过Key返回对应的Value.

    第二种可以根据不同的参数,跳转不同的视图。比如:准备中英文两份视图文件。这种是最简单粗暴的。优点是速度比较快,缺点逻辑代码要写两次。

    第三种可以在controller中重写OnResultExecuting事件。这是视图返回之前执行的事件,在这儿我们可以拦截HTML数据,重新处理,二次加工.根据选择的语言,加载资源,将HTML中的标记,替换。再重新返回给前端。

    当然,还有很多方法.。下面给出第一种方式的DEMO演示。

    1.首先准备语言资源文件。

    2.封装一个语言上下文类,用于设置和切换语言,具体代码如下:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.IO;
    using System.Xml.Linq;
    namespace MultLang.Extends
    {
        /// <summary>
        /// 语言上下文
        /// </summary>
        public class LangContext
        {
            private LangContext() { }
    
            private static LangContext _instance;
            public static LangContext Instance{
                get
                {
                    if (_instance == null)
                        _instance = new LangContext();
                    return _instance;
                }
            }
            /// <summary>
            /// 当前语言
            /// </summary>
            public LangEnum CurrentLang { get; set; }
    
            #region 获取值
            public string Resouce(string key)
            {
                //获取文件路径
                var filePath = HttpContext.Current.Server.MapPath(GetRoucesPath());
                // 加载文件
                var xe = XElement.Load(filePath, LoadOptions.None);
                var node = xe.Elements().FirstOrDefault(x => x.Attribute("name").Value.Equals(key));
                return node == null ? "" : node.Value;
            }
            #endregion
    
            #region 获取文件路径
            private string GetRoucesPath()
            {
                string ext = "lang_";
                switch (this.CurrentLang)
                {
                    case LangEnum.中文:
                        ext += "zh.xml";
                        break;
                    case LangEnum.英文:
                        ext += "en.xml";
                        break;
                    case LangEnum.日文:
                        ext += "japan.xml";
                        break;
                    default:
                        break;
                }
                return Path.Combine("~/App_Data/", ext);
            }
            #endregion
    
        }
    
        public enum LangEnum {
           中文,
           英文,
           日文
        }
    }
    View Code

    3.针对HtmlHelper扩展一个方法,方便前端调用.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using MultLang.Extends;
    namespace System.Web.Mvc.Html
    {
        public static class HtmlExtend
        {
            /// <summary>
            ///  通过Key获取对应值(多语言)
            /// </summary>
            /// <param name="helper"></param>
            /// <param name="key"></param>
            /// <returns></returns>
            public static MvcHtmlString Lang(this HtmlHelper helper, string key) {
                return MvcHtmlString.Create(LangContext.Instance.Resouce(key));
            }
    
        }
    }
    View Code

    4.写测试Action和View

     [HttpPost]
            public ActionResult SetLang(MultLang.Extends.LangEnum lang) {
                MultLang.Extends.LangContext.Instance.CurrentLang = lang;
                return RedirectToAction("Index");
                 
       
    @{
        ViewBag.Title = "Home Page";
    
        var currentLang = MultLang.Extends.LangContext.Instance.CurrentLang.ToString();
    }
    
    <div class="jumbotron">
        <h1>多语言测试</h1>
    </div>
    
    <div class="row">
    <p style="background-color:burlywood"> 测试: @Html.Lang("Name") @Html.Lang("Title") </p>
      <form action="@Url.Action("SetLang")" method="post">
          <select name="lang">
              <option value="中文" @(currentLang == "中文"? "selected":"")>中文</option>
              <option value="英文"  @(currentLang == "英文" ? "selected":"")>英文</option>
              <option value="日文"  @(currentLang == "日文" ? "selected":"")>日文</option>
          </select>
          <input type="submit" value="切换语言"/>
          <button onclick="test()">JS测试</button>
      </form>
    </div>
    <script type="text/javascript">
        function test(){
            alert("@Html.Lang("Name")");
        }
    </script>

    5.测试效果

    这就实现了中,英,日三国语言的切换。这里只是一个简单的DEMO,当然还有很多优化深入的地方。

    比如:在加载搜索词之后可以放入内存中缓存,这样,在下次读取时,速度更快些。等等....

  • 相关阅读:
    SQL左右连接中的on and和on where的区别
    Eclipse项目左侧调整显示或者不显示路径
    Java中 Tomcat 是干什么的?
    深入理解SQL的四种连接-左外连接、右外连接、内连接、全连接
    Oracle中判断(case when),截取(substr),位置(instr)用法
    Eclipse 隐藏已关闭的项目
    项目关闭和开启
    提交代码有冲突,解决方法
    OC基础:Date 分类: ios学习 OC 2015-06-22 19:16 158人阅读 评论(0) 收藏
    OC基础:block.字面量 分类: ios学习 OC 2015-06-22 19:08 155人阅读 评论(0) 收藏
  • 原文地址:https://www.cnblogs.com/paulcode/p/10288249.html
Copyright © 2011-2022 走看看