A way to display enum property as a string using handlebars

Question

everyone. Could you help me, or at least show a way? In my Asp.Net MVC project I have list of objects (cars). Each of them has enum type property (car state). I'm passing list to my view and using handlebars.js template in my view to get a list of my cars and display each car`s state. Template displays all the data i need, but unfortunately it displays enum property data as numeric values. Currently i'm trying to find a way to force template to display it as some sort of string description. Is there a way to do this? (Recently i've used regular @foreach and custom helper, so values where displayed using Resources, but now i need to use handlebars template and have no idea how to make something similar).

Handlebars template code:

@model IEnumerable<Model.DTO.CarDTO>
<script id="carListRow" type="text/x-handlebars-template">
{{#each cars}}
<tr>
    <td>
        {{CarName}}
    </td>
    <td>
        {{CarNickName}}
    </td>
    <td>
        {{CarNumber}}
    </td>
    <td>
        {{CarState}}
    </td>
    <td>
        <a class="btn btn-danger" href="#" data-cars-id="{{Id}}" data-cars-name="{{CarName}}" role="button" onclick="carController.deleteCar(this)">@Resources.Resource.deleteString</a>
    </td>
</tr>
{{/each}}

Enum

public enum CarStateEnum
{
    Working = 1,
    Repairing = 2
}

Car model:

public class Car
{
    [Key]
    public int Id { get; set; }
    [Required]
    [StringLength(50, MinimumLength = 2)]
    public string CarName { get; set; }
    [Required]
    [StringLength(12, MinimumLength = 3)]
    public string CarNumber { get; set; }
    [Required]
    [Range(2,20)]
    public int CarOccupation { get; set; }
    [Required]
    public CarClassEnum CarClass { get; set; }
    [Required]
    public CarPetrolEnum CarPetrolType { get; set; }
    [Required]
    [Range(1, 100)]
    public int CarPetrolConsumption { get; set; }
    [Required]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:dd'/'MM'/'yyyy}", ApplyFormatInEditMode = true)]
    public DateTime CarManufactureDate { get; set; }
    [Required]
    public CarStateEnum CarState { get; set; }
    [Required]
    [StringLength(16, MinimumLength = 2)]
    public string CarNickName { get; set; }

    [ForeignKey("UserId")]
    public virtual User User { get; set; }
    public int UserId { get; set; }
}

And that how Car State is displayed: Car State is numeric

P.S.: Please excuse me for my grammar and other mistakes.

As far as Javascript is concerned that enum is just a number. Gabriel's answer shows how to add the text of it simply by adding a derived property. — Corey, Oct 15 '15 at 23:41

score 1 · Accepted Answer · edited May 23 '17 at 10:27

You could use one of the methods described here, but in your case I would go for a simpler approach:

public class Car
{
    // ...
    // Other properties
    // ...

    [Required]
    public CarStateEnum CarState { get; set; }

    public string CarStateDescription
    {
        get
        {
            switch (CarState)
            {
                case CarStateEnum.Working:
                    return "Working";
                // ...
                // All other enum values
                //...
                default:
                    return CarState.ToString();
            }
        }
    }
}

Use {{CarStateDescription}} instead of {{CarState}} and that's it.

This is amazing! And simple. And solves some of my other issues. Thank you so much. — Zinodust, Oct 16 '15 at 01:20

score 0 · Answer 2 · answered May 26 '22 at 13:44

You could create an extension for attribute:

[AttributeUsage(AttributeTargets.Enum | AttributeTargets.Class | AttributeTargets.Property)]
public class GraphHelpAttribute : Attribute {
    public GraphHelpAttribute(string text) {
        Text = text;
    }

    public string Text { get; }
}

Here would be your usage: [GraphHelp("1 = working, 2 = something, 3 = draft")]

A way to display enum property as a string using handlebars

2 Answers2