Drop-down box populated with parameters provided by enumeration (server side) using Breeze

Question

I am developing an asp.net mvc solution with durandal / breeze.

I have a drop-down list in which the list is populated from Enum provided by Entity Framework Code First. Here is the server side of the model:

public enum EnumCategory { Cat1, Cat2, Cat3, Cat4 } 

Here is the table that uses this enumeration:

 public class Transport { [Key] public int Id { get; set; } public EnumCategory Category { get; set; } ... } 

My question is: how to get these values ​​for an enumeration server in order to be able to populate my drop down client side? Do I have to manually create a new side, for example:

  var categories = [ { id: '' , description: '' }, { id: 'Cat1', description: 'Category 1' }, { id: 'Cat2', description: 'Category 2' }, { id: 'Cat3', description: 'Category 3' }, { id: 'Cat4', description: 'Category 4' }]; 

My view displays this dropdown menu as follows:

 <select data-bind="options: $root.categories, optionsText: 'description', optionsValue: 'id', value: category, validationOptions: { errorElementClass: 'input-validation-error' }, valueUpdate: 'afterkeydown'"> </select> 

It seems redundant for me to have to reassemble the list of values ​​on the client side, because we already have this list of values ​​on the server side.

Any idea?

Thanks.

Answer 1

As a workaround, you can create global "enumerations" from your metadata, for example:

 manager.fetchMetadata() .then(function (data) { // extract all enums als global objects ko.utils.arrayForEach(data.schema.enumType, function (c) { window[c.name] = {}; ko.utils.arrayForEach(c.member, function (m) { window[c.name][m.name] = m.value; }); }); }); 

So, if you have an enumeration called “Status”, now you will have a global object that you can call:

 var currentStatus = Status.Done; //returns the value as defined in the server side enum 

Then they can also be associated with drop-down lists.

Answer 2

You are right to redundantly repeat the definition of an enumeration on a client for an enumeration defined on a server. Ideally, breeze metadata should include the individual enum values ​​that make up the Enum type.

Unfortunately, we have not reached yet. But this is a very reasonable function. Could you add it to Breeze User Voice . We take these suggestions very seriously to determine which features will work further.

Answer 3

Here is an option that you can consider, although it does not use Breeze at all :-(, I have not yet taken the breeze, but I'm not sure how it can help us here.

This example uses the standard WebAPI controller to populate the time zone list in the drop-down list on the V / VM knockout.

Controller:

 public class LookupController : ApiController { public IEnumerable GetTimezones() { return TimeZoneInfo.GetSystemTimeZones().Select(tz => new {tz.Id, tz.DisplayName}).ToArray(); } } 

Exit the controller (sorry for formatting, but basically it is Id, Name pairs, as well as a list of your categories):

[{Id: "Dateline Standard Time", DisplayName: "(UTC-12: 00) International Date Line West"}, {Id: "UTC-11", DisplayName: "(UTC-11: 00) Coordinated Universal Time- 11 "}, {Id:" Hawaiian Standard Time ", DisplayName:" (UTC-10: 00) Hawaii "}, {Id:" Alaskan Standard Time ", DisplayName:" (UTC-09: 00) Alaska "}, {Id: "Pacific Standard Time (Mexico)", DisplayName: "(UTC-08: 00) Baja California"}, {Id: "Pacific Standard Time", DisplayName: "(UTC-08: 00) Pacific Time (US and Canada) "}, {Id:" US Mountain Standard Time ", DisplayName:" (UTC-07: 00) Arizona "}, .... etc.

Fragment from the view model:

 $.ajax({ url: '/api/lookup/timezones', context: this }).done(function(result) { // load timezones timezones(result); // timezones is a ko.observableArray // set the default time zone timezone('Eastern Standard Time'); // timezone is a ko.observable }); 

View:

 <select class="span6" data-bind="options: timezones, optionsText: 'DisplayName', optionsValue: 'Id', value: timezone"></select> 

This gives me a drop down menu populated with objects from the server.

Answer 4

Using some of the @JohnPapa SPA course concepts, could you set an action on your Breeze controller as follows:

 [HttpGet] public object Categories() { var categories = Enum.GetNames(typeof(EnumCategory) return categories; } 

* EDIT: implemented that I used GetValues ​​(which returned int values) and not GetNames

Then in your viewmodel (or datacontext service):

 var categories = EntityQuery.from('Categories') .using(manager).execute()