ASP.NET MVC 多语言技术

1. 背景

公司最近做了一款产品《GPS云平台》，（这里不对这款产品多做什么介绍，毕竟和本篇文章没有什么关系。）采用的是ASP.NET MVC 5.0框架，由于产品国内和国外都有很多用户使用，所以国际化是必不可少的。下面是我来介绍我是如何实现的。

2. 首先将翻译所用到的一系列方法封装到一个公用的JS里面 copy

var dict = {};
function setLanguage(lang, path) {
setCookie("lang=" + lang + "; Path =/;");
translate(path);
}

function getCookieVal(name) {
var items = document.cookie.split(";");
for (var i in items) {
var cookie = $.trim(items[i]);
var eqIdx = cookie.indexOf("=");
var key = cookie.substring(0, eqIdx);
if (name == $.trim(key)) {
return $.trim(cookie.substring(eqIdx + 1));
}
}
return null;
}

function setCookie(cookie) {
document.cookie = cookie;
}

function translate(path) {
loadDict(path);

$("[lang]").each(function () {
switch (this.tagName.toLowerCase()) {
case "input":
$(this).val(__tr($(this).attr("lang")));
break;
default:
$(this).text(__tr($(this).attr("lang")));
}
});
}

function __tr(src) {
return (dict[src] || src);
}

function loadDict(path) {
var lang = (getCookieVal("lang") || "en");

$.ajax({
async: false,
type: "GET",
dataType: "json",
url: path + lang + ".json",
success: function (msg) {
dict = eval(msg);
}
});
}

function registerWords() {
$("[lang]").each(function () {
switch (this.tagName.toLowerCase()) {
case "input":
$(this).attr("lang", $(this).val());
break;
default:
$(this).attr("lang", $(this).text());
}
});
}
clearInput();
function clearInput() {
/*显示清除input框按钮*/
$(".Input").each(function () {
$(this).focus(function () {
$(this).parent().find(".clearInput").removeClass("hide");
});
$(this).blur(function () {
$(this).parent().find(".clearInput").addClass("hide");
});
});
$(".clearInput").on("click", function () {
$(this).parent().find(".Input").val("");
});
}

3. 引入语言包

我将翻译好的语言包封装在JSON里面，分别命名成zh.json和en.json,当然如果你还要支持其他语言，只需要再加一个json即可。





前面蓝色字体是你要翻译的项的关键字，后面红色字体是你要显示的内容。

4. 如何使用

1、首先在我们写的html界面上引用你写的公用的JS。如：

<script src="/xxx/xxx/xxx.js"></script>

2、将我们要翻译的项用JSON里面的关键值替换，并在添加lang属性。如：

<span class="bigger-110" >历史轨迹回放</span>

替换成：

<span class="bigger-110" lang>Historical track playback</span>

3、在这个html页面对应的js里面添加如下代码：

$(function () {
registerWords();/*注册关键字*/
var path = "/Language/Index/Login/";/*json语言包的路径*/
var lang = (getCookieVal("lang") || "zh");/*如果cookie里面没有值，默认显示中文*/
setLanguage(lang, path);/*翻译*/

5. 特殊情况处理

情况1：我们如何将这个请选择翻译成我们需要的英文呢？

<input type="text" id="mFNumber" name="mFNumber" placeholder="请选择" class="col-xs-10 col-sm-12 isNull" />

首先，将上面的请选择用关键字代替，如：

<input type="text" id="mFNumber" name="mFNumber" placeholder="Place Choose" class="col-xs-10 col-sm-12 isNull" />

然后在这个HTML对应的js方法里面加上这个特殊的翻译方式，如下：

$(function () {
registerWords();
var path = "/Language/Index/Login/";
var lang = (getCookieVal("lang") || "zh");
setLanguage(lang, path);

//placeholder属性值需要单独处理
$("#ManagerName").attr("placeholder", __tr("UserName"));

如果有其他属性值可用相同的方法进行处理。

情况2：如何处理js里面需要翻译的项呢？

直接调用公用js里面的__tr()函数，其中Home是你需要翻译的项的关键字。

__tr("Home")

情况3：如何处理网页的标题呢？

如：<title>登录-GPS云平台</title>

替换成：<title>Login-GPS Cloud Service Platform</title>

并在该页面对应的js里面添加如下方法，如下所示：

$(function () {
registerWords();
var path = "/Language/Index/Login/";
var lang = (getCookieVal("lang") || "zh");
setLanguage(lang, path);
//处理标题
document.title = __tr("Login-GPS Cloud Service Platform");

以上是我处理过的几种情况。

6. 结束

由于刚刚接触MVC，对JS等还不熟悉，又不足之处请指教。