Bootstrap 3 DateTimePicker в EditorTemplate - PullRequest
Новая
       33

Bootstrap 3 DateTimePicker в EditorTemplate

0 голосов
/ 25 мая 2018

Создан шаблон редактора для динамического создания временных интервалов.Теперь я не могу выбрать время с помощью datetimepicker.Код ниже.Следующий код работает в отдельности от основного вида.Можно ли использовать datetimepicker в шаблоне редактора? 

@model Testing.Models.TimeSlot

<div class="form-group row">
    @Html.LabelFor(model => model.StartTime, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-2">
        @Html.EditorFor(model => model.StartTime, new { htmlAttributes = new { @Value = DateTime.Now.ToString("hh:mm tt"), @class = "form-control", @style = "width: 100px"} })
        @Html.ValidationMessageFor(model => model.StartTime, "", new { @class = "text-danger" })
    </div>
    @Html.LabelFor(model => model.EndTime, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-2">
        @Html.EditorFor(model => model.EndTime, new { htmlAttributes = new { @Value = DateTime.Now.AddMinutes(15).ToString("hh:mm tt"), @class = "form-control", @style = "width: 100px" } })
        @Html.ValidationMessageFor(model => model.EndTime, "", new { @class = "text-danger" })
    </div>
</div>


@section Scripts
{
<script type="text/javascript">
    $(function () {
        $('#StartTime').datetimepicker({

            format: 'LT',
            showClose: true,
            showClear: true,
            toolbarPlacement: 'top',
            stepping: 15,
        });
    });
    $(function () {
        $('#EndTime').datetimepicker({

            format: 'LT',
            showClose: true,
            showClear: true,
            toolbarPlacement: 'top',
            stepping: 15
        });
    });
    $('#StartTime').removeAttr("data-val-date");
    $('#EndTime').removeAttr("data-val-date");
</script>

1 Ответ

0 голосов
/ 26 мая 2018

Разделы не поддерживаются в партиалах, и ваши скрипты никогда не включаются в HTML, возвращаемый клиенту.В любом случае, сценарии никогда не должны быть частичными (что и есть EditorTemplate) - вы генерируете встроенные сценарии, затрудняя отладку и риск, включая несколько экземпляров сценариев.

Удалите @section Scripts{ ... } код из вашего EditorTemplate и переместите его в основной вид или его макет.Чтобы сделать это немного более гибким, я рекомендую дать входам имя класса и использовать его в качестве селектора jQuery, а не ссылаться на каждого отдельного id (и, следовательно, требуется только один скрипт).

Кроме того, вы никогда не должны устанавливать атрибут value при использовании методов HtmlHelper.Методы правильно генерируют value из ModelState, ViewData и, наконец, свойство модели в этом порядке, и, установив атрибут value, вы нарушаете привязку модели.Вместо этого установите значения в методе GET перед передачей модели в представление.

Ваш код для создания средства выбора даты должен быть просто 

@Html.EditorFor(m => m.StartTime, new { htmlAttributes = new { @class = "form-control datetimepicker" } })

или, проще,

* 1021.*

и затем вы можете задать ширину 

.datetimepicker {
    width: 100px;
}

, и скрипт в представлении или макете будет просто 

$('.datetimepicker').datetimepicker({
    format: 'LT',
    showClose: true,
    showClear: true,
    toolbarPlacement: 'top',
    stepping: 15,
});

Также не ясно, почему вы хотите попробоватьудалить проверку на стороне клиента, используя .removeAttr("data-val-date"), и это указывает на проблему с вашим дизайном.Также кажется, что вы хотите выбрать только время, в этом случае ваша собственность должна быть TimeSpan.

...