MVC EditorTemplate與我創造了這個編輯器模板相同的值

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？ （可爲空），因爲用戶可能不想選擇任何日期/時間。

當輸入模型爲空時，此EditorTemplate不起作用。有沒有辦法創建一個EditorTemplate接受空值，然後仍然可以填充用戶輸入的值？

Answer 1

好吧，我終於明白了這個問題。我的解決方案是：

我使用隱藏字段，以文本表示形式存儲當前值。這個隱藏的字段總是被翻譯成模型本身（然後它正確地轉換爲空值或包括小時和分鐘的值）。每次輸入元素髮生變化時，我都會更新發布回服務器的本地值。

我的代碼如下：

@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>