下拉菜单中填充了由枚举(服务器端)提供的选项

我用durandal/breeze开发了一个asp.net mvc解决方案。

我有一个下拉列表从实体框架代码首先提供的枚举填充。下面是模型服务器端:

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

下面是使用这个enum的表:

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

我的问题:如何检索枚举服务器端的这些值才能填充我的下拉客户端?我是否必须像这样在客户端手动创建一个新的数组:

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

我的视图是这样显示这个下拉列表的:

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

对我来说，重新创建一个客户端值列表似乎是多余的，因为我们已经有了这个服务器端值列表。

任何想法?

谢谢。

您是对的，对于在服务器上定义的枚举，必须在客户端重复枚举定义是多余的。理想情况下，微风元数据应该包括组成枚举类型的单个枚举值。

不幸的是，我们还没有到那一步。但这是一个非常合理的特性。你能把它添加到微风用户语音吗?我们非常认真地考虑这些建议，以决定下一步要开发哪些功能。

作为解决方法，您可以从元数据中创建全局"枚举"，如下所示:

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;
            });
        });
});

如果你有一个名为"Status"的enum，你现在就有了一个全局对象，你可以调用:

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

这些也可以绑定到下拉菜单

这里有一个你可以考虑的选项，虽然它根本不使用Breeze:-(，我还没有采用Breeze，所以不确定它如何在这里帮助我们。

这个示例使用一个标准的WebAPI控制器将一个时区列表填充到一个knockout V/VM上的下拉列表中。

控制器:

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

控制器的输出(抱歉格式化，但它基本上是Id，名称对，很像你的类别列表):

[{Id: "Dateline Standard Time"， DisplayName: "(UTC-12:00)]国际日期变更线西部"}，{Id: "UTC-11"， DisplayName:"(UTC-11:00)协调世界时-11"}，{Id: "夏威夷语， DisplayName: "(UTC-10:00) Hawaii"}， {Id: " alaska .标准时间"，DisplayName: "(UTC-09:00) Alaska"}， {Id: "Pacific标准时间(墨西哥)"，DisplayName: "(UTC-08:00) Baja California"}，{Id: "Pacific Standard Time"， DisplayName: "(UTC-08:00) Pacific Time .(美国,加拿大)"}， {Id: "美国山区标准时间"，DisplayName:"(UTC-07:00) Arizona"}， ....等

视图模型中的代码片段:

$.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
    });

视图:

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

在我的表单上有一个下拉菜单，由来自服务器的对象填充。

使用一些来自@JohnPapa 's SPA课程的概念，您可以不暴露在您的微风控制器上的操作如下:

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

*编辑:意识到我已经使用了GetValues(这将返回int值)而不是GetNames

然后在视图模型(或数据上下文服务)中:

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

相关内容

最新更新

热门标签：