MVC 3 +敲除：在使用布尔字段的Editorfor时添加数据结合属性

Question

使用 @Html.EditorFor(model =>model.IsClient), ，isclient是一个布尔值，将下拉列表与 Not Set, Yes and No 作为选项。

一切都很好。

现在，我想将quignoutjs与由此产生的下拉列表一起使用，我喜欢，如何使用 @html.editorfor添加数据绑定属性，我需要敲门junkoutjs才能使用此下拉菜单？

我努力了：

@Html.EditorFor(model => model.IsClient, new Dictionary<string, object> { { "data-bind", "value: Account.IsClient" } })

但是，这使用对象附加viewData参数，并且不会呈现数据绑定属性。这可能是很自然的，因为此参数可能与渲染标签的HTML属性无关。

但是，找不到任何合理的文档，并且其他任何超负荷都没有看起来我想要的候选人。

提出任何建议。

Answer 1

布拉德·威尔逊 博客 关于ASP.NET MVC 2中的显示和编辑器模板。因此，您可以修改布尔值的默认模板，并添加所需的属性（~/Views/Shared/EditorTemplates/MyTemplate.cshtml):

@{
    bool? value = null;
    if (ViewData.Model != null) 
    {
        value = Convert.ToBoolean(ViewData.Model, System.Globalization.CultureInfo.InvariantCulture);
    }

    var triStateValues = new List<SelectListItem> 
    {
        new SelectListItem 
        { 
            Text = "Not Set",
            Value = String.Empty,
            Selected = !value.HasValue 
        },
        new SelectListItem 
        { 
            Text = "True",
            Value = "true",
            Selected = value.HasValue && value.Value 
        },
        new SelectListItem 
        { 
            Text = "False",
            Value = "false",
            Selected = value.HasValue && !value.Value 
        },
    };
}

@if (ViewData.ModelMetadata.IsNullableValueType) 
{
    <!-- TODO: here you can use any attributes you like -->
    @Html.DropDownList(
        "", 
        triStateValues, 
        new { 
            @class = "list-box tri-state", 
            data_bind="value: " + ViewData.TemplateInfo.GetFullHtmlFieldName("") // you could also use ViewData.ModelMetadata.PropertyName if you want to get only the property name and not the entire navigation hierarchy name
        }
    )
} 
else 
{
    @Html.CheckBox("", value ?? false, new { @class = "check-box" })
}

最后：

@Html.EditorFor(model => model.IsClient, "MyTemplate")

或使用视图模型上的isclient属性使用 UIHint 属性：

[UIHint("MyTemplate")]
public bool? IsClient { get; set; }

接着：

 @Html.EditorFor(x => x.IsClient)

将自动选择自定义编辑器模板。

Answer 2

敲除用户的附录：

@darin dimitrov的答案很棒，但是太刚性了，无法与QuintOutJS一起使用，其中复杂的视图可能导致视图模型并非完全映射到@model参数。

因此，我使用了对象附加浏览data参数。要从您的自定义EditorteMplate访问额外的ViewData参数，请参见以下问题：

访问自定义编辑式代码的访问额外视图

离题：附加视图数据参数令人困惑，因为它与默认编辑器无能为力。它仅使用自定义编辑器模板自行融入其中。

无论如何，我对达林代码的修正案如下：

@if (ViewData.ModelMetadata.IsNullableValueType) 
{
    var x = ViewData["koObservablePrefix"];
    if ((x != "") && (x != null)) { x = x + "."; }
    @Html.DropDownList(
        "", 
        triStateValues, 
        new { 
            @class = "list-box tri-state", 
            data_bind="value: " + x + ViewData.TemplateInfo.GetFullHtmlFieldName("") // or you could also use ViewData.ModelMetadata.PropertyName if you want to get only the property name and not the entire navigation hierarchy name
        }
    )
} 
else 
{
    @Html.CheckBox("", value ?? false, new { @class = "check-box" })
}

注意行：

var x = ViewData["koObservablePrefix"];
if ((x != "") && (x != null)) { x = x + "."; }

在那里，KoobservablePrefix可以在我的ViewModel Ko.Observable中添加任意前缀。如果您选择的话，您可以做其他事情。

我使用变量X如下：

data_bind="value: " + x + ViewData.TemplateInfo.GetFullHtmlFieldName("")

这样，如果我不传递额外的viewdata“ koobservableprefix”，那仍然可以正常工作。

所以，现在我可以写：

@Html.EditorFor(model => model.IsClient, "koBoolEditorFor", new { koObservablePrefix = "Account" })

这将呈现为：

<select class="list-box tri-state" data-bind="value: Account.IsBank" id="IsBank" name="IsBank">

注意 “价值：account.isbank” 数据结合属性值。

例如，如果您的视图强烈键入的模型是类型帐户，但是在您的页面上的accountViewModel中，您需要更复杂的结构，因此您需要在帐户对象中包装可观察到的内容。例如：

function account(accountId, personId, accountName, isClient, isProvider, isBank) {

    this.AccountId   = ko.observable(accountId);
    this.PersonId    = ko.observable(personId);
    this.AccountName = ko.observable(accountName);
    this.IsClient    = ko.observable(isClient);
    this.IsProvider  = ko.observable(isProvider);
    this.IsBank      = ko.observable(isBank);
}

function accountViewModel() { 

    var self = this;

    this.selectedCostCentre = ko.observable('');            
    this.Account = new account(@Model.AccountId, @Model.PersonId, '@Model.AccountName', '@Model.IsClient','@Model.IsProvider', '@Model.IsBank');
              // etc. etc
}

如果您没有这种结构，那么代码将拾取结构。这只是为此量身定制ViewModel JS的问题，嗯，柔性惯例。

希望这不会太困惑...