How do i show enum value using AngularJs - angularjs

Question

I have created an enum in my mode.
public enum Color
{
Green,
Black,
Red,
Silver,
Yellow,
White,
Grey,
}
I used thus enum in my main class.
public class MotorDetails
{
public int Id { get; set; }
public string Name { get; set; }
public string Make { get; set; }
public string Model { get; set; }
public string Year { get; set; }
public string Kilometers { get; set; }
public Color Color { get; set; }
}
I then seed data like
context.MotorDetails.AddOrUpdate(x => x.Id, new MotorDetails()
{
Name = "Accord",
Make = "Honda",
Model = "Accord",
Year = r.Next(1980,2016).ToString(),
Kilometers = r.Next(50000, 200000).ToString(),
Color = (Color)r.Next(1,7),
}
So,in database any value b/w 1,7 is saved for color. Which is fine.
Now i am return this data to my view from controller
public List<MotorDetails> getByMake(string make, int minPrice, int maxPrice)
{
List<MotorDetails> motor = db.MotorDetails.Where(x => x.Make == make && x.Price >= minPrice && x.Price <= maxPrice).ToList();
return motor;
}
Problem:
It returns an integer for color to my view and hence number is showing on view.
I want to show color name for given number.
I am using angularJs and here is my code.
<div>
<table class="table">
<tr>
<th>Name</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
<th>Kilometers</th>
<th>Price</th>
<th>Color</th>
</tr>
<tr ng-repeat="m in motors">
<td>{{m.Name}}</td>
<td>{{m.Make}}</td>
<td>{{m.Model}}</td>
<td>{{m.Year}}</td>
<td>{{m.Kilometers}}</td>
<td>{{m.Price}}</td>
<td>{{m.Color}}</td>
</tr>
</table>
</div>

Answer 1

JSON.NET (the default json serializer for ASP.NET) has an attribute for this [JsonConverter(typeof(StringEnumConverter))]
So
public class MotorDetails
{
public int Id { get; set; }
public string Name { get; set; }
public string Make { get; set; }
public string Model { get; set; }
public string Year { get; set; }
public string Kilometers { get; set; }
[JsonConverter(typeof(StringEnumConverter))]
public Color Color { get; set; }
}
Will serialize the Color as the string value.

Answer 2

I handle this by having a similar object on the client that represents the enum on the server.
Something like:
vm.lookups.colors = [];
vm.lookups.colors.push({ id: 1, value: 'Green' });
vm.lookups.colors.push({ id: 2, value: 'Black' });
// etc.
Then in my view I will render a select and bing the ng-model of the select to the value from the server:
<select ng-options="color.id as color.value for color in vm.lookups.colors"
ng-model="m.Color" disabled>
</select>

Answer 3

An alternative to adding the [JsonConverter(typeof(StringEnumConverter))] attribute on your model property is to add a formatter in your WebApiConfig:
config.Formatters.JsonFormatter.SerializerSettings.Converters.Add(new StringEnumConverter());

Answer 4

Not sure if this is still of interest. I solved this problem differently:
1) Load json data just as before. Serialize enums as Integers, not as strings.
2) Load list of enums as pairs of {Id, Name} from an ApiController. The Name properties are filled with language-specific strings.
3) Lookup the localized Name for each enum Id in the list by a simple javascript method call to your AngularJS controller. (Alternatively you could use a filter here, but thats up to you)
4) Hookup the $rootScope.$On('translateChangeSuccess',...) event to reload the localized enums if the language has been changed.
Let me know if this was not clear enough and/or you need a code example.