Различный тип управления вводом на основе выпадающего списка? - PullRequest
1 голос
/ 13 февраля 2012

Я создаю экран редактирования, где пользователь может редактировать строки данных. Одно из полей представлено раскрывающимся списком, а другое - полем ввода с именем «значение». Теперь, в зависимости от значения в раскрывающемся списке, мне нужно иметь различные виды элементов управления вводом для элемента управления вводом значения. Иногда это должно быть текстовое поле, другие - элемент управления datetime (html5 и / или jqUI) и, наконец, выпадающий список, содержащий фиксированный набор значений ('Yes' / 'No').

Так что в основном иногда мне нужно принимать любые строковые данные, иногда дату, а иногда и логическое значение (но с полем выбора, а не флажком). Какой мой лучший вариант для реализации этого? В идеале введенное значение не будет потеряно при переходе от одного вида ввода к другому, пока пользователь находится на этой странице редактирования. При повторной публикации у меня есть одно значение базы данных для хранения (это sql_variant).

Кроме того, я использую asp.net mvc3, поэтому идеальное решение будет работать с обычными методами Html.ValidateFor и Html.ValidationMessageFor.

Ответы [ 3 ]

2 голосов
/ 17 февраля 2012

Типичный способ, которым я выполняю что-то подобное, - это на самом деле хранить 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

1 голос
/ 19 февраля 2012

После большого количества времени в JSFiddle я сделал это решение. И я думаю, что это довольно круто. Это было не так уж сложно. и вы можете адаптировать его к тому, что вам нужно. просто нажмите здесь .

В основном я делаю переменные для представления возможных значений. затем я делаю переменную для хранения активного элемента.

Всякий раз, когда селектор типа изменяется, он вызывает функцию change(), которая использует операторы if() для проверки того, что было выбрано, и затем соответствующим образом устанавливает активный элемент.

И, наконец, он вызывает функцию hide(), которая скрывает неактивные элементы.

вот обновленная версия

КРАСНОЕ ПРЕДУПРЕЖДЕНИЕ: я понял, что это не работает в FF (возможно, это был только мой браузер, но неважно). поэтому я исправил это здесь

0 голосов
/ 21 февраля 2012

Если вы хотите в полной мере использовать проверки 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, если вам нужно пропустить проверку скрытых полей (например, скрытых).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...