Select Page

If you’re working on an ASP.NET MVC app, chances are you’re dealing with a Web.config file to manage your app config settings. If you’re using the latest MVC (6 at the time of this writing), you’re probably using a json file to manage that. Either way, at some point you’re managing application configs from the server side and you may want to be able to pass on some of those settings to a front-end piece of code.

Let’s assume you’re dealing with a Web.config for now (although most of this also applies to other cases as well). The typical way to handle this involves using the System.Configuration.ConfigurationManager to pull the settings from the Web.config to your C# code. From then, you could have your cshtml files read those values to make logic decisions in your views. That’s all very easy, but now let’s assume you have a piece of JavaScript code that needs to have access to these configs, and you have that piece of code living on a separate .js file. Here’s an easy and elegant way to handle it.

To simplify this article, let’s assume you have a single cshtml file in your web app, which gets loaded on the first request to the server (btw, that’s probably the case if you’re using an SPA framework like Angular). And to make it even simpler, let’s assume you have a single config value you need to deal with (e.g., Foo) and it’s in the appSettings section of your Web.config.

First: pull your settings from the Web.config file to your cshtml

Here’s what your config value would look like in your Web.config:

<!-- other stuff here -->
<appSettings>
    <add key="Foo" value="true"/>
</appSettings>
<!-- other stuff here -->

Now, this is what you need to do (or something very similar) to pull this into your cshtml file and make it available to your HTML markup:

<!-- Use proper script tags ... the square brackets are a workaround to stop WP's parsing engine from messing this up -->
[script type="text/javascript" 
        src="@Url.Content('~/Scripts/configs.js')" 
        data-foo="@ConfigurationManager.AppSettings["Foo"]"]
// only for JS configs
[/script]

As you may notice, we’re using the conventional HTML data attributes to initiate the transfer of this config value to the JavaScript environment.

Second: expose your settings to the JavaScript runtime

There’s one more step to complete this transfer. If you notice in the previous snippet we have a config.js files in the Scripts folder to do so. Here’s what that file could look like:

(function(window) {
    "use strict";

    var scripts = document.getElementsByTagName("script"),
        lastScript = scripts[scripts.length - 1];

    window.configs = {
        foo: JSON.parse(lastScript.getAttribute("data-foo"))
    };
})(window);

What this is doing is using JavaScript trickery to grab the data attributes in that script tag from the DOM. Then finally, it’s creating a JavaScript object with the proper setting, and making it available globally via the window.configs property.

Conclusion

I find this approach pretty clean/elegant. It could be modified by:

  • making it more dynamic/reusable (e.g., the HTML data attributes could be dynamically created by the cshtml engine, and the properties in the window.configs object could also be created dynamically).
  • extending the window.config object to manually set up your own Front-End only config values.
  • integrating it with built-in mechanisms within any Front-End frameworks you may be using.

In any case, it’s a good start.