使用knockout将枚举绑定到组合框

时间:2014-08-11 16:58:27

标签: asp.net-mvc knockout.js

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

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

投标状态是在实体框架中设置的枚举;

    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

EDIT 我的淘汰视图模型看起来像这样。但是我无法将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不会作为可绑定到组合的项目集合返回。相反,我得到了一个&#34; System.Web.Mvc.SelectList&#34;

的字符串

2 个答案:

答案 0 :(得分:3)

您无法将枚举直接发送到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

答案 1 :(得分:0)

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