Question

我正在使用与实体框架的模型绑定，并且有一个Html.TextBoxFor（model =＆gt; model.date）输入。我知道如何告诉jQuery如何实现datepicker但不在此上下文中。当用户进入此字段时，我需要在此处添加一个日历弹出窗口？

Answer 1

您将需要使用允许您指定Html属性的HtmlHelper重载。然后使用jquery选择器定位它们。

// in view
<%= Html.TextBoxFor(x => x.Date, new { @class="datepicker" })%>

// in js
$(document).ready({
         $('.datepicker').datepicker();
    });

虽然我建议改用EditorFor。

<%= Html.EditorFor(x => x.Date)%>

您可以创建一个EditorTemplate来处理DateTime的任何字段，并输出正确的字段。

创建/Views/Shared/EditorTemplates/DateTime.ascx并将其放入其中......

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime>" %>    
<%= Html.TextBox("", Model.ToShortDateString(), new { @class="datepicker" } )%>

或者，如果您需要允许DateTime使用null：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>    
<%= Html.TextBox("", (Model.HasValue? Model.Value.ToShortDateString():""), new { @class="datepicker"} )%>

然后，如果您想要修改视图中处理日期时间的方式，您可以随时使用EditorFor并编辑中央ascx。

Answer 2

从代码示例（TextBoxFor）的外观来看，您使用的是MVC2 ....

以下是一个示例using MVC 2，它创建了一个模板，只要您使用日期和时间，它就会调用jQery日期选择器。又多了in depth example。

Answer 3

为DateTime类型创建EditorTemplate，然后使用EditorFor而不是TextBoxFor。编辑模板应该是一个名为DateTime.ascx的用户控件，其代码如下：


<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime>" %>
<%: Html.TextBox("", String.Format("{0:MM-dd-yyyy}", Model))%>
  <script type="text/javascript">
      $(document).ready(function () {
          $("#<%: ViewData.ModelMetadata.PropertyName %>").datepicker({
              changeMonth: true,
              changeYear: true,
              dateFormat: 'mm-dd-yy',
              showButtonPanel: true,
              gotoCurrent: true
          });
      });
  </script>

查看Scott Hanselman在第9频道关于MVC 2的演讲。 http://channel9.msdn.com/posts/matthijs/ASPNET-MVC-2-Basics-Introduction-by-Scott-Hanselman/

Answer 4

我采用类似于Marc的方法。这是我自己的版本：

“％＆gt;

<%string name = ViewData.TemplateInfo.HtmlFieldPrefix;%>
<%string id = name.Replace(".", "_");%>

<div class="editor-label">
    <%= Html.LabelFor(model => model) %>
</div>
<div class="editor-field">
    <%= Html.TextBox("", (Model.HasValue ? Model.Value.ToString("dd-MM-yyyy") : string.Empty), new { @class = "date" }) %>
    <%= Html.ValidationMessageFor(model => model)%>
</div>      

<script type="text/javascript">
    $(document).ready(function() {

        $("#<%=id%>").datepicker({
            showOn: 'both',
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            showOn: 'button', 
            buttonImage: '<%=Url.Content("~/Content/images/calendar.gif") %>'
        });
    });
</script>

在共享文件夹下创建EditorTemplates文件夹，并将其命名为DateTime.ascx。

你如何在MVC的Html.TextBoxFor中使用jQuery UI Datepicker？

4 个答案: