Question

我正在构建一个编辑屏幕，用户可以在其中编辑数据行。其中一个字段由下拉列表示，另一个字段由名为“value”的输入字段表示。现在，根据下拉列表中的值，我需要为值输入控件提供不同类型的输入控件。有时它应该是一个文本框，其他的是日期时间控件（html5和/或jqUI日期选择器），最后是一个包含固定值集的下拉列表（'是'/'否'）。

所以基本上有时候我需要接受任何字符串数据，有时是日期，有时候是布尔值（但是有一个选择框，而不是复选框）。实施此选项的最佳选择是什么？理想情况下，当用户在此编辑页面上时，输入的值不会从一种输入移动到另一种输入。在回发后，我有一个要存储的数据库值（它是一个sql_variant）。

另外，我使用的是asp.net mvc3，因此理想的解决方案可以使用普通的Html.ValidateFor和Html.ValidationMessageFor方法。

Answer 1

我完成这样的事情的典型方法是在db中为每种不同类型的值实际存储3个不同的字段。然后我创建类似下面的html：

<!-- Input type selector  -->
<div class="cell variable-selector">
    <select><option ...</select>
</div>
<!-- varied input -->
<div class="cell variable show-text">
    <div class="text"><input type="textbox"></div>
    <div class="date-picker"><input type="textbox" class="datepicker"></div>
    <div class="drop-down-bool"><select><option ...</select>
</div>

然后我有css根据单元格的类别隐藏或显示正确的输入元素：

div.variable div { display:none }
div.show-text div.text { display: inline }
div.show-date-picker div.date-picker {display: inline }
div.show-drop-down-bool div.drop-down-bool {display: inline}

最后你可以设置一些javascript，这样当你改变你的变量选择器时，你可以改变变量单元格的类。哪个jquery可能会这样做：

$(document).ready(function() {
    var variableSelector = $("div.variable-selector > select");
    variableSelector.change(function() {
        var type = $(this).text();
        var class = "cell variable show-" + type;
        var variableCell = $(this).parent().parent().find("variable");
        variableCell.attr("class", class);

    })
});

作为一个快速警告，我在堆栈溢出编辑器窗口中动态编写了上面的代码，因此可能会出现一些语法错误或某个小错误，但基本想法应该有效。希望能帮助到你。 --Adam

Answer 2

经过JSFiddle的大量时间，我提出了这个解决方案。我觉得这很酷。这真的不是那么难。你可以根据自己的需要调整它。只需点击here。

基本上我做变量来表示可能的值。然后我创建一个变量来保存活动元素。

每当类型选择器发生更改时，它都会调用change()函数，该函数使用if()语句来检查所选内容，然后相应地设置活动元素。

最后，它调用隐藏非活动元素的hide()函数。

这是updated version

RED ALERT：我意识到这在FF中不起作用（也许只是我的浏览器，但无论如何）。所以我修好了here

Answer 3

如果您想充分利用mvc3验证，请考虑这种方法。

模型

public class MultiValueViewModel
{
    [Required]
    public string TextValue { get; set; }

    [Required]
    public bool? BooleanValue { get; set; }

    public MultiValueType ValueType { get; set; }
}

public enum MultiValueType
{
    Text,
    Boolean
}

查看

@model MultiValueViewModel
@Html.DropDownListFor(m => m.ValueType, new SelectList(new[]
{
    MultiValueType.Text,
    MultiValueType.Boolean
}), new { @id = "multi_value_dropdown" })
<p>
<div data-type="@MultiValueType.Text" class="multi-value-pane">
    @Html.EditorFor(m => m.TextValue)
</div>
<div style="display: none" data-type="@MultiValueType.Boolean" class="multi-value-pane">
    @Html.DropDownListFor(m => m.BooleanValue, new SelectList
            (new [] {
                new SelectListItem { Text = "Yes", Value = "true"},
                new SelectListItem { Text = "No", Value = "false"}
            }, "Value", "Text"), optionLabel: "[Not Set]")
</div>
</p>

使用Javascript：

<script type="text/javascript">
$(function () {
    $("#multi_value_dropdown").change(function () {
        var value = $(this).val();
        $(".multi-value-pane").each(function () {
            $(this).css("display", value == $(this).attr("data-type") ? "block" : "none");
        });
    });
})

在控制器内部，接收MultiValueViewModel值（单独或在父模型内），并根据选定的ValueType保存到数据库。请注意，如果您需要跳过隐藏字段的验证（例如：隐藏），则需要jquery.validate版本1.9。

基于下拉选择的不同类型的输入控制？

3 个答案: