Personal Blog
Client Side Resource File Values
2010-10-16
Need to get .resx value in .js code?
When programming ASP.NET websites with extensive use of JavaScript I often came to the frustrating situation of having resources or constants both in the server and client side code. Most of the times the logic requires us to work with resource files, and it's quite handy to be able to read the resource files' values from within JavaScript code.
This is, of course, not supported "as is", but there are ways to accomplish it, and here is one example.
What you need to do is create:
Although I used jQuery to get values and assign event handlers, it is not required for the task to be done.
So, let's get started!
Any questions or recommendations - let me know!
Author: Angel Petrov
Comments: Here!
This is, of course, not supported "as is", but there are ways to accomplish it, and here is one example.
What you need to do is create:
- a resource file (.resx)
- a generic handler (.ashx)
- an ASP.NET web page (.aspx)
Although I used jQuery to get values and assign event handlers, it is not required for the task to be done.
So, let's get started!
1. Create a web page and put the following controls in it:
<asp:TextBox runat="server" ID="tbResourceName"></asp:TextBox>
<asp:HyperLink runat="server" ID="hlClientGet" Text="Get Resource" NavigateUrl="#"></asp:HyperLink>
<asp:Label runat="server" ID="lblValue"></asp:Label>
<asp:HyperLink runat="server" ID="hlClientGet" Text="Get Resource" NavigateUrl="#"></asp:HyperLink>
<asp:Label runat="server" ID="lblValue"></asp:Label>
2. Paste this JavaScript code somewhere inside the body of the page
<script type="text/javascript">
$(document).ready(
function()
{
$('#<%= hlClientGet.ClientID %>').click(
function()
{
var resourceName = $('#<%= tbResourceName.ClientID %>').val();
$('#<%= lblValue.ClientID %>').text(getResourceValue(resourceName));
});
});
function getResourceValue(name)
{
return GlobalResources[name];
}
</script>
$(document).ready(
function()
{
$('#<%= hlClientGet.ClientID %>').click(
function()
{
var resourceName = $('#<%= tbResourceName.ClientID %>').val();
$('#<%= lblValue.ClientID %>').text(getResourceValue(resourceName));
});
});
function getResourceValue(name)
{
return GlobalResources[name];
}
</script>
3. Create a resource file, name it "Resource". It will be placed in the "App_GlobalResources" folder by default.
4. Put some values in it. For the purposes of this demo I just put the following values:
| Name | Value |
|---|---|
| HW | Hello World! |
| JR | JavaScript Rullz! |
5. Create a generic handler, name it "JSResources.ashx". Paste the code below inside:
public class JSResources : IHttpHandler
{
public void ProcessRequest (HttpContext context)
{
context.Response.ContentType = "text/javascript";
StringBuilder sb = new StringBuilder();
sb.AppendLine("var GlobalResources = {");
ResourceSet resourceSet = Resource.ResourceManager.GetResourceSet( CultureInfo.CurrentUICulture, true, true);
foreach (DictionaryEntry entry in resourceSet)
{
sb.AppendLine(String.Format("{0}: '{1}',", entry.Key, entry.Value));
}
sb.AppendLine("Key: 'Value'");
sb.AppendLine("};");
context.Response.Write(sb.ToString());
}
public bool IsReusable { get { return false; } }
}
{
public void ProcessRequest (HttpContext context)
{
context.Response.ContentType = "text/javascript";
StringBuilder sb = new StringBuilder();
sb.AppendLine("var GlobalResources = {");
ResourceSet resourceSet = Resource.ResourceManager.GetResourceSet( CultureInfo.CurrentUICulture, true, true);
foreach (DictionaryEntry entry in resourceSet)
{
sb.AppendLine(String.Format("{0}: '{1}',", entry.Key, entry.Value));
}
sb.AppendLine("Key: 'Value'");
sb.AppendLine("};");
context.Response.Write(sb.ToString());
}
public bool IsReusable { get { return false; } }
}
6. In your web page register the handler as a javascript reference, by typing the following in the "head" section.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="JSResources.ashx"></script>
<script type="text/javascript" src="JSResources.ashx"></script>
7. Test your application!
As you can see, just using a simple handler that iterates the resource file and generates a javascript object is enough to get all your resources in the client side of the application.Any questions or recommendations - let me know!
Author: Angel Petrov
Comments: Here!