Share constants between C# and Javascript in MVC Razor

Question

I'd like to use string constants on both sides, in C# on server and in Javascript on client. I encapsulate my constants in C# class

namespace MyModel
{
        public static class Constants
        {
            public const string T_URL = "url";
            public const string T_TEXT = "text";
     . . .
        }
}

I found a way to use these constants in Javascript using Razor syntax, but it looks weird to me:

@using MyModel
        <script type="text/javascript">

            var T_URL = '@Constants.T_URL';  
            var T_TEXT = '@Constants.T_TEXT';
     . . .
            var selValue = $('select#idTagType').val();
            if (selValue == T_TEXT) { ...

Is there any more "elegant" way of sharing constants between C# and Javascript? (Or at least more automatic, so I do not have to make changes in two files)

This is the best way I've found. Are you wanting something that will scrape your .cs files for public const string and automatically recreate those values as var in the javascript for you? I can't imagine that would be inherently useful all the time. — jcolebrand
– jcolebrand, Commented Jun 2, 2011 at 16:03
An addendum to my last comment. I failed to notice these were constants. That, on the other hand, is useful. — jcolebrand
– jcolebrand, Commented Jun 2, 2011 at 16:58

Darin Dimitrov · Accepted Answer · 2011-06-02 16:13:18Z

81

The way you are using it is dangerous. Imagine some of your constants contained a quote, or even worse some other dangerous characters => that would break your javascripts.

I would recommend you writing a controller action which will serve all constants as javascript:

public ActionResult Constants()
{
    var constants = typeof(Constants)
        .GetFields()
        .ToDictionary(x => x.Name, x => x.GetValue(null));
    var json = new JavaScriptSerializer().Serialize(constants);
    return JavaScript("var constants = " + json + ";");
}

and then in your layout reference this script:

<script type="text/javascript" src="@Url.Action("Constants")"></script>

Now whenever you need a constant in your scripts simply use it by name:

<script type="text/javascript">
    alert(constants.T_URL);
</script>

edited Jun 2, 2011 at 16:13

answered Jun 2, 2011 at 16:07

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Patrick Over a year ago

The javascript file get cached on the client side?

Patrick Over a year ago

For every JS file I have to do this? And if I want to separate Constants for each JS/View ?

Darin Dimitrov Over a year ago

@Patrick, since the js is cached on the client why care? Simply put your constants in a single script.

Patrick Over a year ago

And can I have a resource based constant for Multi-Language front-end like this: public static string centerButtonTitle = HeelpResources.MapCenterButtonTitle; ? centerButtonTitle is the label of a google map that is put by javascript.

Saharsh Over a year ago

nice trick! does this work with MVC's minification? Since this is not a js file that we can specify within a bundle, and the constants from this may be getting used in js files that are specified within a bundle, will there be a variable name mismatch?

|

Jay · Accepted Answer · 2011-06-02 16:16:17Z

5

You can use an HTML helper to output the script necessary, and use reflection to grab the fields and their values so it will automatically update.

    public static HtmlString GetConstants(this HtmlHelper helper)
    {
        System.Text.StringBuilder sb = new System.Text.StringBuilder();

        sb.AppendLine("<script type=\"text/javascript\">");

        foreach (var prop in typeof(Constants).GetFields())
        {
            sb.AppendLine(string.Format("    var {0} = '{1}'", prop.Name, prop.GetValue(null).ToString()));
        }

        sb.AppendLine("</script>");
        return new HtmlString(sb.ToString());
    }

answered Jun 2, 2011 at 16:16

Jay

6,3044 gold badges22 silver badges23 bronze badges

Comments

Raynos · Accepted Answer · 2011-06-02 17:53:29Z

2

Rather then storing your constant data in a C# class, store it in a static config/constants file.

// Constants.json
{
    "T_URL": "url",
    "T_TEXT": "text"
}

// Constants.cs

// load the json from a file stream into a constants object

// Constants.js

window.Constants = $.getJSON(url);

Simply store it as some file format (json, xml, cvs, whatever) then load it up from both the client & server.

This means your either creating a class in the C# on the fly at runtime using black magic reflection or just have a hashtable / dictionary containing your constants under keys.

jQuery.getJSON, JsonReaderWriterFactor

edited Jun 2, 2011 at 17:53

answered Jun 2, 2011 at 16:06

Raynos

170k57 gold badges359 silver badges399 bronze badges

7 Comments

jcolebrand Over a year ago

close but not close enough. He needs something to use reflection (more or less) on the server to generate things for the client.

Raynos Over a year ago

@jcolebrand where the constants are is arbitary if there in a class or in a file. I prefer to keep them in a file.

jcolebrand Over a year ago

but you would still have to duplicate effort to keep .cs, .json, .js in sync.

Raynos Over a year ago

@jcolebrand the .cs & .js are static write once files. The .json is dynamic

Shagglez Over a year ago

@Raynos I am trying to set up a unified format for constants that could be used across several languages to store error codes. Ideally I'd like to have them strongly typed for C#, would would mean parsing the file (JSON probably) and creating a DLL that could be used in my application. Is that a bad idea? What's an alternative?

|

bigbadmad · Accepted Answer · 2015-03-12 15:28:19Z

My version to create a namespaced javascript object from my C# constants that is immutable:

public static HtmlString GetConstants<T>()
        {
            StringBuilder jsConstant = new StringBuilder();
                jsConstant.Append("myApp." + typeof(T).Name + " = Object.freeze({");
            foreach(var item in typeof(T).GetFields())
            {
                jsConstant.Append(string.Format("{0}:'{1}'",item.Name,item.GetValue(null).ToString()) + ",");
            }
            jsConstant.Remove(jsConstant.Length - 1, 1);
            jsConstant.Append("})");
            return new HtmlString(jsConstant.ToString());
        }

Used like this in Razor:

@(HtmlHelpers.GetConstants<MyApp.Infrastructure.ApplicationConstants.SomeConstants>())

Jonathan E. Landrum · Accepted Answer · 2022-02-17 22:06:11Z

2

Another option is to add the constant as a data- value to the button/link calling the JavaScript code.

Your view:

<button data-url="@T_URL" ...>

Your script:

$('button').click(function(event) {
    var url = $(this).data('url');
    ...

answered Feb 17, 2022 at 22:06

Jonathan E. Landrum

3,2414 gold badges38 silver badges50 bronze badges

Collectives™ on Stack Overflow

Share constants between C# and Javascript in MVC Razor

5 Answers 5

7 Comments

Comments

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related