Время форматирования для пользовательского ввода в ASP.Net MVC

Question

У меня есть форма, в которой пользователям разрешено вводить значения времени (например, часы, потраченные на выполнение какой-либо задачи). Бизнес-требование заключается в том, чтобы время вводилось в формате чч: мм или в десятичном формате. В любом случае, потенциально может быть довольно много JavaScript-кода на стороне клиента для отображения «помощи» - показа итогов, проверки по другим данным и т. Д.

Так, например, один пользователь может ввести «8:30» в течение восьми часов тридцать минут, в то время как другой пользователь может ввести «8,5», чтобы обозначить то же самое. Я ищу что-то, что позволило бы свести к минимуму дублирование формы / проверки.

Как лучше всего это сделать с моделью и видом?

Answer 1

Регулярное выражение, позволяющее использовать оба формата, не будет таким сложным.Я бы выполнил эту простую проверку на стороне клиента с помощью JavaScript.Кроме того, вы можете добавить для этого некоторую бизнес-проверку (на уровне бизнес-объекта).

Answer 2

Я использовал jQuery для создания ползунка, который изменит время в поле ввода в нужном формате. В моем файле просмотра Create.aspx поместите следующую функцию jquery где-то в начале тела.

<script>
$(function () {
    $("#slider").slider({
        value: 9,
        min: 0,
        max: 1440,
        step: 15,
        slide: function (event, ui) {
            var hours = Math.floor(ui.value / 60);
            var minutes = ui.value - (hours * 60);
            var ampm = "AM";

            if (hours == 12) { ampm = "PM"; } 
            else if (hours == 0) { hours = 12; ampm = "AM"; }
            else if (hours > 12) { hours = hours - 12; ampm = "PM"; }

            if (hours < 10) hours = '0' + hours;
            if (minutes < 10) minutes = '0' + minutes;
            $("#work_StartTime").val(hours + ':' + minutes + ' ' + ampm);
        }
    });
});

</script>

затем в теле той же страницы поместите div рядом с текстовым полем для ввода времени. Слайдер будет отображаться в этом div

<div class="editor-field">
    <%: Html.EditorFor(model => model.work.StartTime)%>
        <div id="slider"></div>
            <%: Html.ValidationMessageFor(model => model.work.StartTime)%>
        </div>

это даст вам слайдер. В приведенном выше коде javascript измените шаг: 15, с шагом 15 минут. Это, очевидно, проверка на стороне клиента. Разумеется, проверка на стороне сервера также должна быть реализована.