DatePicker 编辑器模板答案

【问题标题】：DatePicker Editor TemplateDatePicker 编辑器模板
【发布时间】：2014-03-23 21:26:11
【问题描述】：

下面是一个 EditorTemplate，它使用 EditorFor 助手呈现 Bootstrap datetimepicker，我看到的问题是脚本部分。它适用于每个视图一个 DateTimePicker - 但由于我使用类选择器，每当我使用 2 个或更多 DateTimePickers 每个视图时，它都会呈现重复的 <script> 部分，使 DOM 混淆 TextBox 到哪个部分调用日历。我在这里想念什么？

   @model DateTime?
   <div class='input-group date datePicker'>
      <span class="input-group-sm">
         @Html.TextBox("", Model.HasValue ? Model.Value.ToString("d") : String.Empty)
      </span>
   </div>
   <script type="text/javascript">
       $(function() {
       $('.datePicker').datetimepicker({
           pickTime: false
       });
   });
   </script>

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-4 mvc-editor-templates bootstrap-datetimepicker

【解决方案1】：

您正确推断的问题是，当您在视图中包含两个日期选择器时，编辑器模板中定义的脚本块将运行两次；当它运行两次时，插件的行为并不像预期的那样。

对此的一种解决方案是仅针对每个脚本块中编辑器模板中的日期选择器输入。例如，

@model DateTime?
<div class='input-group date datePicker'>
   <span class="input-group-sm">
      @Html.TextBox("", Model.HasValue ? Model.Value.ToString("d") : String.Empty)
   </span>
</div>
<script type="text/javascript">
    $(function() {
        // target only the input in this editor template
        $('#@Html.IdForModel()').datetimepicker({
            pickTime: false
        });
    });
</script>

【讨论】：

有效！ - 非常感谢。现在，有没有办法渲染该脚本一次？
@kermit_xc 脚本将被渲染的次数与调用编辑器模板的次数一样多。有一个 nuget 包 - nuget.org/packages/Forloop.HtmlHelpers 如果脚本位于单独的脚本文件中，它将只渲染一次。
+1 表示 ForLoop ScriptContext。我将它扩展为对 .css、StyleContext 做同样的事情——对于显示和编辑器模板非常有用。使用 AddScriptBlock 方法，它们甚至不需要位于单独的文件中。
我会从源代码中获取两个 HtmlHelper 文件，而不是通过 Nuget - 它们不是很大也不是过于复杂 - 然后修改函数以处理 .css。

【解决方案2】：

至于渲染一次脚本，下面的呢？到目前为止它对我有用。有什么潜在的问题吗？

Editor Template - DateTime.cshtml

@model System.DateTime?
@Html.TextBox("", String.Format("{0:d}", Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datepicker" })


_Layout.cshtml

<script type="text/javascript">
  $().ready(function () {
    $('.datepicker').datepicker({
      changeMonth: true,
      changeYear: true,
      showOn: "button",
      buttonImage: "/Images/calendar.gif",
      buttonImageOnly: true
    });
   }
</script>

【讨论】：