在ASP.NET MVC中将资源字符串公开给JavaScript文件的最佳方法？

时间：2013-04-20 16:48:56

标签： javascript asp.net asp.net-mvc localization

在Razor视图中使用资源字符串（.resx）很容易，但是如何在JavaScript文件中使用它？目前我手动将字符串从Razor视图传递到JavaScript构造函数参数中的脚本，但我想要一种更自动地执行此操作的方法，因此我不必传递我需要的每个资源字符串。

7 个答案:

答案 0 :(得分：7)

我使用的解决方案是使用Razor创建一个json对象，该对象包含给定应用程序区域的所有资源字符串，例如“Customers”。像这样：

<script  type="text/jscript">

@{

    ResourceSet resourceSet = JsCustomersRes.ResourceManager.GetResourceSet(CultureInfo.CurrentUICulture, true, true);
    var sbInitial = " var CustomersResourceObj = {"; 
    var sb = new StringBuilder(sbInitial);
    var resEnum = resourceSet.GetEnumerator(); 
    while (resEnum.MoveNext()) 
    {
        if (sb.ToString() != sbInitial)
        {
            sb.Append(",");
        }
        sb.Append("\"" + resEnum.Key + "\":\"" + resEnum.Value.ToString().Replace("\r\n", "").Replace("\"", "\\\"") + "\"");
    } 
    sb.Append("}");
} 

@(Html.Raw( sb.ToString()));

资源文件“JsCustomersRes”可以与特定的控制器视图目录一起放置，也可以放在共享视图目录中。  它应该在文件高级属性中将“自定义工具”设置为“PublicResXFileCodeGenerator”。

然后，您可以从脚本中的json对象获取资源字符串：

var resString = CustomersResourceObj[key];

其中“key”是您想要的资源字符串的键字符串。 只需将Razor添加为您的布局页面或单个页面的部分视图，就可以了！就是这样！

答案 1 :(得分：3)

我的解决方案基于此http://codethug.com/2013/08/02/using-net-resources-in-javascript/并引用Tim Larson（作者）的话：

  

我们无需做太多工作来确定使用何种文化。网络   浏览器，当它到达服务器时，包括显示的标题信息   它支持哪些文化。 ASP.Net自动提供此信息   进入CultureInfo.CurrentUICulture。我们把它传递给了   GetResourceSet方法，然后返回该资源集   匹配当前的浏览器设置。

     

因此，如果浏览器设置为法语，则仅限法语资源   法国资源公司将被退回。

陡峭1.在App_GlobalResources文件夹中创建资源文件 RLocalizedText.resx 。并用所有字符串创建填充。

陡峭2.创建 ResourcesController 

using System.Web.Mvc;

namespace PortalACA.Controllers
{
    public class ResourcesController : Controller
    {
        // GET: Resources
        public ActionResult Index()
        {
            Response.ContentType = "text/javascript";
            return View();
        }
    }
}

Steep 3.从ResourcesController

创建 Index.cshtml 视图 
@using System.Collections
@using System.Globalization
@using System.Resources
@using Resources
@{
    Layout = null;
    // Get a set of resources appropriate to
    // the culture defined by the browser
    ResourceSet resourceSet =
      @RLocalizedText.ResourceManager.GetResourceSet
        (CultureInfo.CurrentUICulture, true, true);
}

// Define the empty object in javascript
var Resources = {};
@foreach (DictionaryEntry res in resourceSet)
{
    // Create a property on the javascript object for each text resource
    @:Resources.@res.Key = "@Html.Raw(
        HttpUtility.JavaScriptStringEncode(res.Value.ToString()))";
}

选择你想要的地方。

陡峭4A（布局）。如果你想在整个网站上使用它，那么需要把这个脚本参考放在 _Layout （共享视图）上@RenderSection 

<script src="@Url.Content("~/Resources/Index")"></script>
@RenderSection("scripts", required: false)

陡峭的4B（视图）。如果您只想在某些视图中查看。

@section Scripts
{
  <script src="@Url.Content("~/Resources/Index")"></script>
}

陡峭5.现在是时候使用它了。选择一个视图，您需要在其中查看Resources文件中的字符串并输入此代码。

@section Scripts
{
  <script>
    $(document).ready(function () {
      alert(Resources.General_Excepcion);
    });
  </script>
}

这就是所有人！希望它能帮到别人！

答案 2 :(得分：2)

我会做以下事情：

<script type="text/javascript">
    var resourceStrings = {
        @foreach (var resource in ViewBag.Resources)
        {
            { '@resource.Key' : '@resource.Value' },
        }
    };
</script>

这假定您已创建资源键/值的字典，并使用字典设置视图包属性。然后，您可以将这些资源作为javascript对象查找来访问。

$('label[name=gender]').html(resourceStrings['gender']);

如果您想按文化访问密钥，则可能会有字典词典：

$('label[name=gender]').html(resourceStrings['en_US']['gender']);

答案 3 :(得分：1)

我更喜欢创建一个将所有资源都作为属性的Javascript对象。我也避免创建局部视图。相反，我将所需的语言作为参数传递给脚本。这样，您可以在全局模板中添加脚本，而不是在每个页面中添加脚本。

基本上我有一个带有以下静态方法的辅助静态类：

    public static JavaScriptResult JavascriptResources(ResourceManager manager, string resourceObjectName, CultureInfo culture)
    {
        ResourceSet resourceSet = manager.GetResourceSet(culture, true, true);

        StringBuilder sb = new StringBuilder();

        sb.AppendFormat("var {0}=new Object();", resourceObjectName);

        var enumerator = resourceSet.GetEnumerator();
        while (enumerator.MoveNext())
        {
            sb.AppendFormat("{0}.{1}='{2}';", resourceObjectName, enumerator.Key,
                System.Web.HttpUtility.JavaScriptStringEncode(enumerator.Value.ToString()));
        }

        return new JavaScriptResult()
        {
            Script = sb.ToString()
        };
    }

在项目中，我添加了以下控制器：

public class ResourcesController : Controller
{
    [OutputCache(Duration = 36000, VaryByParam = "lang")]
    // Duration can be many hours as embedded resources cannot change without recompiling.
    // For the clients, I think 10 hours is good.
    public JavaScriptResult Index(string lang)
    {
        var culture = new CultureInfo(lang);
        return Helpers.JavascriptResources(Resources.Client.ResourceManager,
            "Client", culture);
    }
}

请注意，我添加了一个参数，为全局javascript对象提供您想要的任何名称。在上面的例子中，我可以在JS中访问这样的翻译：

alert(Client.Info_Message);

现在要调用此脚本，我在默认模板中注册它（例如在~/Shared/_layout.cshtml中）

<script type="text/javascript" src="~/resources/?lang=@(ViewBag.Language)"></script>

此方法的最佳工作方式是创建一个动作过滤器，以自动在ViewData中输入语言。这可以这样做：

public class LanguageInViewBagAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        var controller = filterContext.Controller;
        if (controller != null)
            controller.ViewBag.Language = Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName;
    }
}

然后，您可以在适用的情况下使用它来装饰控制器或操作，例如：

[LanguageInViewBag]
public class HomeController : Controller

或在/App_start/Filters.cs

中注册为全局过滤器

注意：我的实现假定您为每个请求设置Thread.CurrentThread.CurrentCulture到用户的文化。这样，actionfilter就知道当前选择的语言。

答案 4 :(得分：1)

创建一个将资源集公开给json的操作

public class HomeController: Controller {

   [Route("localization.js")]
   public ActionResult Localization()
   {
       ResourceSet resourceSet = Globalization.Resources.ResourceManager.GetResourceSet(
                                       CultureInfo.CurrentUICulture, true, true);
       var result = resourceSet.Cast<DictionaryEntry>()
           .ToDictionary(x => x.Key.ToString(),
                    x => x.Value.ToString());

       return View((object)(JsonConvert.SerializeObject(result)));
   }

}

添加包含内容的~/Views/Home/localization.cshtml文件

@model string
@{ 
    Layout = null;
}
var Resources = @Html.Raw(Model);

在Web.config中，添加localization.js的处理程序

 <system.webServer>
   <handlers>
     <add name="Localization" path="*/localization.js" verb="GET" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
   </handlers>
 </system.webServer>

在您的_Layout.cshtml或您希望公开资源的任何地方调用该操作

<script type="text/javascript">
    @(Html.Action("Localization", "Home"))
</script>

结果

<script type="text/javascript">
    var Resources = {"HelloWorld" : "こんにちは世界", "NiceJob": "いいね！" };
    //Sample usage
    console.log(Resources.HelloWorld);
    console.log(Resources.NiceJob);
</script>

答案 5 :(得分：0)

你可以使用AJAX和JSON ActionResult以更优雅的方式做到这一点。

<button />
<label for="gender"></label>

<script type="text/javascript">
    $("button").click(function () {
        $('label[for=gender]').load('@Url.Action("ResourceLabel", new { labelKey = "Gender" })');
    });
</script>

服务器方面，大大简化了，但你明白了：

public ContentResult ResourceLabel(string labelKey) {
    return Content(ResourceClass.GetString(labelKey));
}

答案 6 :(得分：0)

已经提到了所有解决方案，无论好坏。 为了完成，我想提出另一个解决方案： 不要在Javascript中设置文本。

将Javascript中的单词添加到未直接从服务器加载的页面，就像在html文件中编写css一样。

相关问题
最新问题