Question

我创建了这个编辑器模板：

@model DateTime?

@using MyMvcApp.Properties

<div id="dateTimePicker_@(ViewData.ModelMetadata.PropertyName)">
    <script type="text/javascript" language="javascript">
        //<![CDATA[
        $(document).ready(function () {
            var $div = $('#dateTimePicker_@(ViewData.ModelMetadata.PropertyName)');

            $div.find('.date').datepicker({ altFormat: 'dd-mm-yy' });
        });

        function clearDateTimePicker_@(ViewData.ModelMetadata.PropertyName)() {
            var $div = $('#dateTimePicker_@(ViewData.ModelMetadata.PropertyName)');

            $div.find('.date').val('');
            $div.find('.hour').val('00');
            $div.find('.minute').val('00');
        }
        //]]>
    </script>

    @* Date - should equal DatePicker.cshtml *@
    @Html.TextBox("Value.Date", Model.HasValue ? Model.Value.Date.ToString() : string.Empty, new { @class = "date" })
    <img alt="@Resources.SelectDate" src="../../../images/calendar.png" class="calendarIcon" />

    @* Time - should equal TimePicker.cshtml *@
    @Html.DropDownList("Value.Hour", new SelectList(new[] { "00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23" }, Model.HasValue ? Model.Value.Hour.ToString("D2") : "00"), 
        null, new { style = "width: auto; margin-left: 5px;", @class = "hour" })
    :
    @{
        List<string> availableMinutes = new List<string>();
        for (int minute = 0; minute < 60; minute += 1)
        {
            availableMinutes.Add(minute.ToString("D2"));
        }

        @Html.DropDownList("Value.Minute", new SelectList(availableMinutes, Model.HasValue ? Model.Value.Minute.ToString("D2") : "00"), 
            null, new { style = "width: auto;", @class = "minute" });
    }
    <img alt="@Resources.SelectTime" src="../../../images/icon_clock_2.gif" style="margin-right: 5px" />
    <input type="button" value="@Resources.Clear" class="ui-state-default" onclick="javascript:clearDateTimePicker_@(ViewData.ModelMetadata.PropertyName)()" />
</div>

正如您所看到的，我想要完成的是用户可以输入日期/时间。但是，作为输入我想使用DateTime？（可空）因为用户可能不想选择任何日期/时间。

当输入模型为null时，此EditorTemplate不起作用。有没有办法创建一个接受空值的EditorTemplate，然后如果用户输入，仍然可以填充该值？

Answer 1

好的，我终于找到了问题所在。我的解决方案：

我使用隐藏字段将当前值存储在文本表示中。此隐藏字段始终转换为模型本身（然后它正确转换为null或包含小时和分钟的值）。每次更改输入元素时，我都会更新正在发布回服务器的本地值。

我的代码解决方案：

@model DateTime?

@using Narcast.Server.Properties

<div id="dateTimePicker_@(ViewData.ModelMetadata.PropertyName)">
    <script type="text/javascript" language="javascript">
        //<![CDATA[
        $(document).ready(function () {
            var $div = $('#dateTimePicker_@(ViewData.ModelMetadata.PropertyName)');

            $div.find('.date').datepicker({ altFormat: 'dd-mm-yy' });
        });

        function clearDateTimePicker_@(ViewData.ModelMetadata.PropertyName)() {
            var $div = $('#dateTimePicker_@(ViewData.ModelMetadata.PropertyName)');

            $div.find('.date').val('');
            $div.find('.hour').val('00');
            $div.find('.minute').val('00');

            updateData_@(ViewData.ModelMetadata.PropertyName)();
        }

        function updateData_@(ViewData.ModelMetadata.PropertyName)() {
            var $div = $('#dateTimePicker_@(ViewData.ModelMetadata.PropertyName)');

            var $date = $div.find('.date').val();
            var $hour = $div.find('.hour').val();
            var $minute = $div.find('.minute').val();

            var $data = '';

            if ($date != '')
            {
                $data = $date + ' ' + $hour + ':' + $minute;
            }

            $div.find('.data').val($data);
        }
        //]]>
    </script>

    @* Hidden field holding the client data *@
    @Html.Hidden("", Model.HasValue ? Model.Value.ToShortTimeString() : string.Empty, new { @class = "data" })

    @* Date - should equal DatePicker.cshtml *@
    <input type="text" class="date" onchange="javascript:updateData_@(ViewData.ModelMetadata.PropertyName)()" />
    @*@Html.TextBox("Date", Model.HasValue ? Model.Value.Date.ToString() : string.Empty, new { @class = "date" })*@
    <img alt="@Resources.SelectDate" src="../../../images/calendar.png" class="calendarIcon" />

    @* Time - should equal TimePicker.cshtml *@
    <select class="hour" style="width: auto; margin-left: 5px;" onchange="javascript:updateData_@(ViewData.ModelMetadata.PropertyName)()">
    @{
        for (int hour = 0; hour < 24; hour += 1)
        {
            <text><option @{ if (Model.HasValue && Model.Value.Hour == hour) { <text>selected="selected"</text> }}>@(hour.ToString("D02"))</option></text>
        }        
    }
    </select>

    :

    <select class="minute" style="width: auto; margin-left: 5px;" onchange="javascript:updateData_@(ViewData.ModelMetadata.PropertyName)()">
    @{
        for (int minute = 0; minute < 60; minute += 1)
        {
            <text><option @{ if (Model.HasValue && Model.Value.Minute == minute) { <text>selected="selected"</text> }}>@(minute.ToString("D02"))</option></text>
        }        
    }
    </select>
    <img alt="@Resources.SelectTime" src="../../../images/icon_clock_2.gif" style="margin-right: 5px" />
    <input type="button" value="@Resources.Clear" class="ui-state-default" onclick="javascript:clearDateTimePicker_@(ViewData.ModelMetadata.PropertyName)()" />
</div>

MVC EditorTemplate，具有相同值的多个输入

1 个答案: