基于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,当然还有很多优化深入的地方。

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

 

posted on 2019-01-18 16:16  潇潇@暮雨  阅读(471)  评论(0编辑  收藏  举报

导航