Wie beurteilen Sie die jQuery UI Datepicker mit Html.TextBoxFor MVC verwenden?

Question

Ich verwende Modell mit dem Entity Framework verbindlich und hat einen Html.TextBoxFor (Modell => model.date) Eingang. Ich weiß, wie man jQuery sagt, wie man einen Datepicker implementiert, aber nicht in diesem Zusammenhang. Was müsste ich hier hinzufügen, um ein Kalender-Popup zu erhalten, wenn der Benutzer dieses Feld öffnet?

Answer 1

Sie wollen die Htmlhelper Überlastung verwenden, die Sie HTML-Attribute angeben können. Richte sie dann mit dem jquery-Selektor aus.

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

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

Obwohl ich empfehle, stattdessen EditorFor zu verwenden.

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

Sie können eine EditorTemplate erstellen ein beliebiges Feld zu behandeln, die eine DateTime ist und haben es das richtige Feld ausgegeben.

erstellen /Views/Shared/EditorTemplates/DateTime.ascx und setzen diese in ihm ...

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

oder wenn Sie Datetime ist mit Nullen ermöglichen:

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

Dann können Sie immer EditorFor verwenden und haben eine zentrale ascx zu bearbeiten, wenn Sie die Art und Weise ändern möchten, in der die Zeiten in Ihren Ansichten behandelt werden.

Answer 2

Von den Blicken des Codes Probe (TextBoxFor) Sie MVC2 verwenden ....

Hier ist ein Beispiel using MVC 2, die eine Vorlage erstellt, die die jQery Datumsauswahl rufen, wenn Sie ein Datum & ein zweites mehr verwenden in depth example.

Answer 3

eine EditorTemplate für den Typ Datetime erstellen und dann EditorFor statt TextBoxFor verwenden. Die Edit-Vorlage sollte eine Benutzersteuerung namens DateTime.ascx mit Code so etwas wie:

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

Check out Scott Hanselman Vortrag über MVC 2 auf Kanal 9. http://channel9.msdn.com/posts/matthijs/ASPNET-MVC-2-Basics-Introduction-by-Scott-Hanselman/

Answer 4

ich ähnlich mit einem Ansatz gehen würde zu Marc. Hier ist meine eigene Version davon:..

"%>

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

erstellen Sie Ihre EditorTemplates Ordner unter dem freigegebenen Ordner und benennen Sie es DateTime.ascx