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

Question

我使用Model與實體框架綁定，並有一個Html.TextBoxFor（model => model.date）輸入。我知道如何告訴jQuery如何實現日期選擇器，但不是在這種情況下。當用戶輸入這個字段時，我需要在這裏添加一個日曆彈出窗口？

Answer 1

你會想要使用HtmlHelper重載，它允許你指定Html屬性。然後使用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" })%> 

或者，如果你需要允許日期時間與空值：

<%@ 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的樣子....

下面是一個創建一個模板，只要您使用的日期&第二個更是將調用jQery日期選擇器爲例using MVC 2in 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的MVC的2通道的談話9 http://channel9.msdn.com/posts/matthijs/ASPNET-MVC-2-Basics-Introduction-by-Scott-Hanselman/

Answer 4

我會用類似的方法去到馬克的。這是我自己的版本：。

「％>

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