Как вы используете jQuery UI Datepicker с MVC Html.TextBoxFor?

Я использую привязку модели к Entity Framework и имею вход Html.TextBoxFor(model = > model.date). Я знаю, как сказать jQuery, как реализовать datepicker, но не в этом контексте. Что мне нужно добавить здесь, чтобы открыть всплывающее окно, когда пользователь входит в это поле?

ОТВЕТЫ

Ответ 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" } )%>

Или, если вам нужно разрешить DateTime с нулями:

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

Затем вы всегда можете использовать EditorFor и иметь центральный ascx для редактирования, если вы когда-либо захотите изменить способ использования дат в ваших представлениях.

Ответ 2

Из внешнего вида вашего образца кода (TextBoxFor) вы используете MVC2....

Здесь приведен пример с использованием MVC 2, который создает шаблон, который будет вызывать сборщик дат jQery всякий раз, когда вы используете дату и еще секунду в подробном примере.

Ответ 3

Создайте шаблон EditorTemplate для типа DateTime, а затем используйте 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/

Ответ 4

Я бы выбрал подход, похожий на Marc's. Вот моя собственная версия:

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