使用敲除将枚举绑定到组合框答案

【问题标题】：Bind an enum to a combo box using knockout使用敲除将枚举绑定到组合框
【发布时间】：2014-08-11 16:58:27
【问题描述】：

我还没有设置我的组合框；

        <tr>
            <td class="leftCell">
                <label class="control-label" for="Title">Status</label>
            </td>
            <td class="rightCell">
                <select id="TenderStatus">
                </select>
            </td>
        </tr>

Tender Status 是实体框架中设置的枚举；

    public enum TenderStatus
    {
        Open,
        Successful,
        Unsuccessful
    }

   public class Tender : IAuditInfoCreated, IAuditInfoModified, IUpdateTender
    {
        public int TenderId { get; set; }

        public string EstimateNumber { get; set; }

        public string Title { get; set; }

        public TenderStatus Status { get; set; }

        public DateTime Created { get; set; }

        public int CreatedBy { get; set; }

        public DateTime? LastModified { get; set; }

        public int LastModifiedBy { get; set; }

        public virtual List<Quote> Quotes { get; set; }

        public override string ToString()
        {
            return string.Format("{0} - {1}", this.Title, this.EstimateNumber);
        }
    }

组合框允许用户更改状态。我如何将其与淘汰赛绑定？我正在使用淘汰赛版本 3

编辑我的淘汰赛视图模型如下所示。但是我无法将 SelectList 绑定到我的视图模型。

var Tender = function () {
    this.tenderId = ko.observable("@Model.Tender.TenderId");
    this.title = ko.observable("@Html.Raw(Model.Tender.Title)");
    this.estimateNumber = ko.observable("@Model.Tender.EstimateNumber");
    this.status = ko.observable("@Model.Tender.Status");
    this.tenderStatusChoices = ko.observable("@Model.TenderStatusChoices");
};

@Model.TenderStatusChoices 不会作为可以绑定到组合的项目集合返回。相反，我得到一串“System.Web.Mvc.SelectList”

【问题讨论】：

标签： asp.net-mvc knockout.js

【解决方案1】：

您不能将枚举直接发送到您的 JavaScript，因为它的结构未公开。传递给视图的只是它设置的当前值，而不是所有潜在值。为此，您需要从枚举中构造一些其他数据结构。有很多不同的方法可以做到这一点，但我发现发送一个实际的 SelectList 是最简单的，所以它已经是相当可用的格式了。

我使用了两种枚举扩展方法：

public static SelectList ToSelectList(this Enum en)
{
    var list = (from Enum d in Enum.GetValues(en.GetType())
                select new SelectListItem { Value = Enum.GetName(en.GetType(), d), Text = d.GetDisplayName() }).ToList();

    var selectedValue = Enum.Parse(en.GetType(), Enum.GetName(en.GetType(), en));

    return new SelectList(list, "Value", "Text", selectedValue);
}

public static string GetDisplayName(this Enum en)
{
    Type type = en.GetType();
    System.Reflection.MemberInfo[] memInfo = type.GetMember(en.ToString());

    if (memInfo != null && memInfo.Length > 0)
    {
        object[] attrs = memInfo[0].GetCustomAttributes(typeof(System.ComponentModel.DataAnnotations.DisplayAttribute), false);

        if (attrs != null && attrs.Length > 0)
            return ((System.ComponentModel.DataAnnotations.DisplayAttribute)attrs[0]).GetName();
    }

    return en.ToString();
}

然后您可以通过向您的视图模型添加一个属性来使用它（您应该使用视图模型），例如：

public SelectList TenderStatusChoices
{
    get { return TenderStatus.ToSelectList(); }
}

然后，通过 Knockout，您可以使用绑定：

options: TenderStatusChoices, optionsText: 'Text', optionsValue: 'Value', value: Status

【讨论】：

我相信这是正确的答案。但是我无法将选择列表绑定到我的 viewModel
为什么不呢？如果您还没有，您应该对模型进行 JSON 编码以与 Knockout 一起使用。它使访问底层数据结构变得更加容易。您可以手动迭代 TenderStatusChoices.Items 并构造一个 JavaScript 数组，但处理 JSON 会更容易。
我刚刚制定了一个 JSON 解决方案。我是 Knockout 的新手，看起来工作量很大。我使用服务器上的 JavaScriptSerializer 和客户端上的 JSON.parse 将字符串转换为数组。现在我知道我可以更快地再次执行此操作，但我想知道这是否是最佳方式？
所以在你的服务器上 SelectList getter，我有；公共字符串 TenderStatusChoices { get { var list = Tender.Status.ToSelectList(); var oSerializer = new JavaScriptSerializer();返回 oSerializer.Serialize(list); } }
不，这不是最佳方式。你实际上可以做类似var model = @Html.Raw(Json.Encode(Model)) 的事情。或者您可以选择仅对模型的一部分进行 JSON 编码。但是，通过将其原始放到页面上，它实际上变成了一个原生 JavaScript 对象（JSON 毕竟只是 JavaScript），因此不需要解析。

【解决方案2】：

试试下面的方法
在页面的 jquery 就绪函数中，您可以对其中一种方法进行 ajax 调用，以将枚举值作为 JSON 对象返回。由此，您可以通过将对象适当地解析为 Viewmodel 的属性来绑定对象。
接下来，您可以使用带有选项绑定的 select 标签将数据加载到下拉列表中

【讨论】：