Regrettably, the server side code is not processed by the server within an external JS file. Nevertheless, there exists a workaround where you can input your translated values into hidden fields on the webpage. This approach allows your JavaScript to access and read these values.

For instance:

 <%-- Insert this in your page --%>
 <input type="hidden" id="translatedField" name="translatedField" value="<%=Resources.Resources.translatedText %>" />

Then, use this in your JavaScript file:

 // JavaScript file
 $(document).ready(function() {
  alert($("#translatedField").attr("value"));
 });

By following this method, you can segregate the values and still have visibility of them in your external JS file.

Another workaround involves creating a .aspx file that exclusively outputs Javascript rather than HTML. Review the following link for more information:

Using server side method in an external JavaScript file

It's important to keep functionality separate from user-facing text.

For those developing jQuery plugins, consider passing an array of localized strings as a parameter when calling various jQuery functions. This array can be defined inline in the page's JavaScript code or loaded from an external resource using a format like

/scripts/localization/strings.js?ci=en-US

. You can also register a Generic ASP.Net Handler in the web.config file to handle requests for scripts/localization/strings.js

The DatePicker control provides a great example of how to localize text for the jQuery datepick control - this JavaScript file is generated dynamically from resource files (resx) and ensures that the calendar control displays Danish text when included on a page.

Develop a HttpHandler (.ashx file) to serve JSON containing your text resource strings.

You can also make it available in the global namespace, for example:

Response.Write("window.Resources=");
Response.Write((new JavaScriptSerializer()).Serialize(strings));

Set up your HTML as follows:

<script src="Resx.ashx?lang=en-US" />

<button class="LogoutButtonResourceId OtherButtonClasses">(generic logout text)</button>
<a href="#"><span class="SomeLinkTextResourceId OtherClasses">
     (generic link text)
</span></a>

Apply the texts using this approach:

$(document).ready(function() {
  for(var resId in Resources){
    $("."+resId).html(Resources[resId]); 
  }
});

If utilizing ASP.NET for generating your primary JavaScript doesn't suit you, consider these alternatives:

1. Generate a script file with variable-to-string assignments using ASP.NET, like var mystring = 'my value';. Your main script can then reference the localized text through variable names rather than embedded values. If this approach still seems messy, you could encode the strings as JSON instead of variable assignments by employing an HttpHandler rather than a direct .aspx method.

2. Implement an Ajax call in your JavaScript code to fetch an array or list of localized strings from the server. The server-side component of the call would retrieve the text from your resx files.

Have you thought about using the `$.ajax` function along with ASP.NET WebMethods? It's challenging to provide a specific solution without understanding how your JavaScript/jQuery will handle the resources. If the resources are organized into logical groups, you could potentially return multiple resource strings for a single page.

If that is the case, you could create a simple C# class or utilize a `Dictionary` to retrieve data from your ASP.NET WebMethod. The code snippet would resemble something like this:

[WebMethod]
public Dictionary<string, string> GetPageResources(string currentPage)
{
    // ... Organizational logic goes here.
}

I always prefer separating my AJAX calls into separate .js files or objects. An example of the code structure would be:

function GetPageResources(page, callback) {
    $.ajax({
        data: "{ 'currentPage':'" + page + "' }",
        url: /Ajax/Resources.asmx/GetPageResources,
        success: function (result) {
            callback(result.d);
        }
    });
}

When executing the .js on the page, you can consume the data as follows:

// Initial function call when loading a page and its associated JS files
GetPageResources(document.location, SetPageResources);

function SetPageResources(resources) {
    for (currentResource in resources) {
        $("#" + currentResource.Key).html(currentResource.Value);
    }
}

Although it may be past the deadline, I wanted to share my experience with this task.

I have found that using AjaxMin is a great tool for inserting resx key values into a js file during the build event. This approach may not be common, but it helps keep HTML clean without unnecessary script blocks, and can even be integrated into the minification process if needed.

Here's how it works:

ajaxmin.exe test.js -RES:Strings resource.resx -o test.min.js

If you have multiple locales, make sure to do the same for each one. The syntax for writing resource keys in JS (and CSS) can be found here for JS localization and here for CSS localization.

One method I use is integrating it during the initialization of a javascript control. Here's how I do it:

I created a self-contained javascript control called CRMControl, with an init method named setupCRMControl that takes a settings object as a parameter. During initialization, I provide an object containing all the necessary resources in javascript like this:

CRMControl.setupCRMControl({
numOfCRMs: 3,
maxNumOfItems: 10,

// Resources object with required strings
Resources: {
   Cancel: '@Resources.Cancel',
   Done: '@Resources.Done',
   Title: '@Resources.Title'
 }
});

Within this javascript control:

var crmSettings = {};
this.setupCRMControl(settings) {
    crmSettings = settings;
};

To display a resource (e.g., show an alert stating 'Done'), I simply use:

alert(crmSettings.Resources.Done);

You could shorten it to "R" or something similar, but this is my preferred approach. It may not be suitable for large amounts of strings, but works well for smaller cases.