C# enum in Knockout component

I needed to use the same C# enum in Knockout component view model to keep them both consistent. Also, this means less code duplication and no hardcoded values. The Knockout’s view model was in a component, therefore I decided to pass enum as a parameter from Razor view.

To illustrate this example I will be using a simplified code version in a newly created .NET Core Web Application project in Visual studio 2017.

First, let’s say our enum is as follows.

public enum Color
{
    None = 0,
    Red = 1,
    Blue = 2,
    Yellow = 3
}

And just as a note, I always include “None” for 0 (zero) value, since this would be a default enum value if not assigned to a different one.

In JavaScript the enum would look like following – see code snippet below.

var color = {
    None : 0,
    Red : 1,
    Blue : 2,
    Yellow : 3
}

To convert C# enum to such Javascript one we can convert enum into a dictionary with string key and int value, and serialize the dictionary into JSON string. To keep code cleaner and more reusable, let’s make an extension method for this.

public static class EnumExtensions
{
    public static string ConvertToJsonDictionary<T>()
    {
        var dictionary = Enum.GetValues(typeof(T)).Cast<object>()
            .ToDictionary(item => item.ToString(), item => (int)item);

        return JsonConvert.SerializeObject(dictionary);
    }
}

We can get all enum values using Enum.GetValues(), and casting them into an objects allows to use ToDictionary() method. Then use NewtonSoft Json serializer to convert dictionary object into JSON string. NewtonSoft was already available in the project.

Now we can convert and serialize our enum to a JSON string in a controller.

Model.

public class HomeViewModel
{
    public string ColorJson { get; set; }
}

Controller’s action.

public IActionResult Index()
{
    var model = new HomeViewModel
    {
        ColorJson = EnumExtensions.ConvertToJsonDictionary<Color>()
    };

    return View("Index", model);
}

And Razor view with a Knockout component would look like following.

@model WebApplication6.Models.HomeViewModel

<color-list params="colorEnum: @Model.ColorJson"></color-list>;

Note. I omitted RequireJS call to register Knockout, jQuery, and ColorList component to make code snippet shorter.

And finally, you can use the same C# enum in Knockout component view model.

function colorListViewModel(params) {
    var self = this;

    console.log(params.colorEnum); // Outputs all enum values
    console.log(params.colorEnum.Red); // Outputs 1
    console.log(params.colorEnum.Blue); // Outputs 2
    console.log(params.colorEnum.Yellow); // Outputs 3
}

Screenshot from browser’s console below.

The tricky part here was to convert all enum values into a dictionary and serialize it into JSON string. Once this is ready, passing that string as a parameter into Knockout component’s view model is easy, and the JSON string is converted into an object, which is the Javascript enum we were after.