Web项目——国际化实践

国际化是指设计的软件项目能够适应各种区域和语言环境。一般来说满足中英文的切换。

下面的例子是C#的MVC项目。

这里我们将web项目分为两部分：前端国际化和后端国际化

• 前端国际化包括：js文件国际化
• 后端国际化包括：后端服务国际化和cshtml页面的国际化

前端国际化：

使用的是 jQuery.i18n.properties，国际化英文单词为：Internationalization，又称 i18n，“i”为单词的第一个字母，“18”为“i”和“n”之间单词的个数，而“n”代表这个单词的最后一个字母。这是一款轻量级的jQuery国际化插件。

接下来介绍使用步骤：

首先建立i18n要使用的资源文件

包括中文和英文两个js 文件

大概的内容格式如下：

英文：

; $.i18n().load({
    en: {
        "test": "test?",
        "test1": "test1?",
        "noContainAllChar": "noContainAllChar"
    }
});

中文：

; $.i18n().load({
    'zh-cn': {
        "test": "测试?",
        "test1": "测试1?",
        "myFile": "我的文件",
        "noContainAllChar": "文件名不能包含下列任何字符"
    }
});

然后引入该国际化插件对应的js文件

在页面的布局页面_layout.cshtml中

 <!-- 前端国际化 i18n -->
    @Scripts.Render("~/Scripts/jquery.i18n.js")
    @Scripts.Render("~/Scripts/i18n/zh.js")
    @Scripts.Render("~/Scripts/i18n/en.js")
    <script>
        $.i18n({
            locale:  '@ConfigurationManager.AppSettings["Language"]'
        });
    </script>

通过配置文件中配置

注意这里的调用那个资源文件

当然也可以通过是使用浏览器当前的语言或是页面传入。

  <appSettings>
 <!--前端显示语言设置-->
    <add key="Language" value="zh-cn" />
  </appSettings>

注意这里的value值要和两个资源js文件的配置一致，否则无法找到对应的资源文件。

在js文件中替换所有的中文

 alert($.i18n('test'))

后端国际化：

使用资源文件.resx

如果后端服务层和数据访问层没有相关需要国际化的代码，则可以直接在web层建立资源文件

web项目右键 :添加->添加ASP.NET文件夹->App_GlobalResources，然后再添加两个资源文件在该文件夹下。

但是如后端服务层或数据访问层有需要国际化的内容，则需要将资源文件独立出来。

这里单独建立一个类库项目，用来存放资源文件。

新建两个资源文件

分别用来存储中文资源和英文资源，这里需要注意资源的命名也是需要满足语言编码规则的。

ISO-639 指定的语言编码（如：“en”表示英文、“zh”表示中文），或同时使用 ISO-639 指定的语言编码和 ISO-3166 指定的国家编码（如：“en_US”，“zh_CN”等）。如果不指定，则采用浏览器报告的语言编码。

如果设定在单独的项目中，为了使得其他地方都能够调用，需要设定为public

默认是internal
也是通过配置文件来切换中英文

 <system.web>
    <!--国际化语言区域设置-->
    <globalization fileEncoding="utf-8" requestEncoding="utf-8" responseEncoding="utf-8" culture="zh-CN" uiCulture="zh" />
     </system.web>

英文设置 :

 cuture="en-US" 

 uiCulture="en"

接下来在项目调用

后端服务代码调用如下：

在调用的地方引入资源文件所在项目

 throw new Exception(Resource.Service_Share_Failure);

cshtml文件调用

在cshtml页面中也需要引入资源文件所在项目的程序集

<div class="layer-btn-group tc">
        <button class="btn btn-blue" id="moveToConfirm">@*确定*@ @Resource.Mind_Confirm</button>
        <button class="btn" id="moveToCancel">@*取消*@ @Resource.Mind_Cancel</button>
    </div>