如何发布日期和时间到服务器？

Question

我使用bootstrap datetimepicker库，像这样：

@using (Html.BeginForm("Search", "Home", FormMethod.Post)) 
{ 
    <div id="searchContainer"> 

     <div class="well"> 
      <div id="datetimepicker1" class="input-append date"> 
      <input data-format="dd/MM/yyyy hh:mm:ss" type="text" id="StartDate" /> 
      <span class="add-on"> 
       <i data-time-icon="icon-time" data-date-icon="icon-calendar"> 
       </i> 
      </span> 
      </div> 
     </div> 
     <div class="well"> 
      <div id="datetimepicker2" class="input-append date"> 
      <input data-format="dd/MM/yyyy hh:mm:ss" type="text" id="EndDate" /> 
      <span class="add-on"> 
       <i data-time-icon="icon-time" data-date-icon="icon-calendar"> 
       </i> 
      </span> 
      </div> 
     </div> 

     @Html.Bootstrap().SubmitButton().HtmlAttributes(new { @class = "btn" }) 
    </div> 
} 

这是另一种尝试：

@using (Html.BeginForm("Search", "Home", FormMethod.Post)) 
{ 
    <div id="searchContainer"> 
     @Html.Bootstrap().TextBoxFor(model => model.StartDate).HtmlAttributes(new { id = "datetimepicker1", @class = "input-append date" }).AppendIcon("icon-calendar") 
     @Html.Bootstrap().TextBoxFor(model => model.EndDate).HtmlAttributes(new { id = "datetimepicker2", @class = "input-append date" }).AppendIcon("icon-calendar") 

     @Html.Bootstrap().SubmitButton().HtmlAttributes(new { @class = "btn" }) 
    </div> 
} 

JQuery的：代码，其中的div使用

<script type="text/javascript"> 
     $(function() { 
      $('#datetimepicker1').datetimepicker({ 
       language: 'en' 
      }); 
     }); 
     $(function() { 
      $('#datetimepicker2').datetimepicker({ 
       language: 'en' 
      }); 
     }); 
</script> 

第一小盘，选择日期和时间时工作良好。但用剃刀语法的第二个不是。

当使用第一个块选择日期和时间时，按下按钮时它不会发布到服务器。

模型只包含2个日期：

public DateTime StartDate { get; set; } 
public DateTime EndDate { get; set; } 

有谁看到我可能是错在这里做什么？

编辑

有了“它不工作”使用剃刀语法时，在刚刚的DateTimePicker未露面，什么都没有发生。现在我已经得到了进一步的测试一些，我得到指着这条线在datetimepicker.min.js文件运行时错误：

offset.top=offset.top+this.height;

，这是它在一个对话框弹出错误信息：

Unhandled exception at line 26, column 5290 in http://tarruda.github.io/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js

0x800a138f - JavaScript runtime error: Unable to get property 'top' of undefined or null reference

这是形式的呈现的HTML：

<form action="/Home/Search" method="post"> <div id="searchContainer"> 
     <select class="chzn-select" data-placeholder="Select items" id="Ids" multiple="multiple" name="Ids"><option value="1">test0</option> 
<option value="2">test1</option> 
<option value="3">test2</option> 
<option value="4">test3</option> 
<option value="5">test4</option> 
<option value="6">test5</option> 
</select> 
     <div class="input-append"><input class="input-append date" data-val="true" data-val-date="The field Start Date must be a date." data-val-required="The Start Date field is required." id="datetimepicker1" name="StartDate" type="text" value="1-1-0001 0:00:00" /><span class="add-on"><i class="icon-calendar"></i></span></div> 
     <div class="input-append"><input class="input-append date" data-val="true" data-val-date="The field End Date must be a date." data-val-required="The End Date field is required." id="datetimepicker2" name="EndDate" type="text" value="1-1-0001 0:00:00" /><span class="add-on"><i class="icon-calendar"></i></span></div> 



     <button class="btn btn" type="submit">Submit</button> 
    </div> 
</form> 

<script type="text/javascript"> 

     $(function() { 
      $('#datetimepicker1').datetimepicker({ 
       language: 'en' 
      }); 
     }); 
     $(function() { 
      $('#datetimepicker2').datetimepicker({ 
       language: 'en' 
      }); 
     }); 
</script> 

<style type="text/css"> 
    #searchContainer { 
     margin-top:10%; 
} 
</style> 

</div> 

    <div id="push"></div> 
</div> 

    <div id="footer"> 
    <div class="container"> 
    <p>&copy; 2013 - My ASP.NET MVC Application</p> 
    </div> 
    </div> 
    <script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script> 

Answer 1

我改变了我的模型接受string而不是DateTime对象，并修复它。

Answer 2

您的第一种方法存在问题，即您省略了输入字段的名称属性。 name属性定义表单发布的变量。 只要写：

<input ... type="text" id="StartDate" name="StartDate /> 

对于您的第二次尝试：

But the second one with the razor syntax doesn't.

你怎么对待意味着不工作？你能显示呈现的HTML吗？

Answer 3

对于第二次尝试：

如果你看一下bootstrap datetime-picker的文档，它表明id属性#datetimepicker1应适用于输入的容器。而是将其应用于输入本身。

此外，似乎data-time-icon="icon-time" data-date-icon="icon-calendar"属性需要应用于<i>标记，而TwitterBootstrapMVC并不是开箱即用的。

提交一个问题到TwitterBootstrapMVC过载添加到.IconAppend方法也采取Icon类，你可以，但是你想...或者更好的定制的是，它叉进行必要的改变，并提交拉请求。