Question

我正在尝试实现一个非常常见的场景，而给出一个可供选择的选项列表，最后一个选择“其他”，当选择时，用户会看到输入字段以指定“其他”是什么。< / p>

在我的情况下，它是人员头衔的列表：

public List<string> TitleList
{
    get
    {
        return new List<string> { "Mr", "Mrs", "Miss", "Dr", "Other" };
    }
}

我正在尝试做的是：

@Html.DropDownListFor(m => m.Title, new SelectList(Model.TitleList), "Please select...") @Html.TextBoxFor(m => m.Title)

我希望模型在DropDownLis中选择“Other”时绑定TextBox值，并在所有其他情况下绑定到DropDownList中的选定项目。

如果不在模型上添加额外的属性，这是否可以实现？

Answer 1

更好的解决方案不绑定到两个字段，而是使用一些聪明的javascript将选定项目从下拉列表复制到绑定文本框中：

@Html.DropDownList("ddlTitle", new SelectList(Model.TitleList), "Please select")
@Html.TextBoxFor(m => m.Title, new { maxLength = 10 })

使用Javascript：

ToggleTitleFields = function () {
    var title, txtTitle;
    title = $('select#ddlTitle').val();
    txtTitle = $('input#Title');
    if (title === "Other") {
        txtTitle.val("");
        txtTitle.show();
        return txtTitle.focus();
    } else {
        txtTitle.hide();
        txtTitle.val(title);
        return $('span[data-valmsg-for="Title"]').empty();
    }
};

$(document).on("change", "select#ddlTitle", function(e) {
    return ToggleTitleFields();
});

希望这有助于某人

Answer 2

找到了一个客户端解决方案：从DropDownList添加/删除“name”属性。这是我的咖啡脚本：

ToggleTitleFields = () ->
    if $('select#Title').val() == "Other"
        $('select#Title').removeAttr('name')
    else
        $('select#Title').attr('name','Title')

Answer 3

沙皇，

说实话，这不是我以前必须处理的情况，但仍然是一个很好的情况。如果我遇到这种困境并且被允许使用javascript解决方案，那么当选择其他时，我会呈现一个先前“隐藏”的文本框。然后，用户必须将新值输入到该texbox中，在丢失焦点时将填充选择列表并被选中。然后，当提交表单时，您仍然将此新值作为现有模型的一部分。

当然，你也可以在选择其他时做类似的显示文本框的逻辑，但这一次，在httpost控制器操作上做一点逻辑，以确定是否选择了“其他”项目，然后从中填充模型'textbox'值。

当然，两种情况都需要一堆验证，但原则上，任何一种方法都可以“正常”

MVC 3将模型属性绑定到2个字段（例如其他标题）

3 个答案: