Использование jquery datepicker в проектах ASP.Net MVC3 - PullRequest
Новая
       10

Использование jquery datepicker в проектах ASP.Net MVC3

2 голосов
/ 22 августа 2011

В этом блоге должно быть объяснено, как реализовать jquery datepicker для всех входных данных DateTime. Однако я с треском проваливаюсь, когда пытаюсь следовать предпринятым шагам. Я подозреваю, что где-то неправильно устанавливаю ссылки, поскольку в моем проекте VS уже есть более новые (и по-разному названные) файлы .js, чем те, которые упоминаются в блоге. Есть ли место, где реализация подается с ложки для абсолютного jquery NOOB?

РЕДАКТИРОВАТЬ: Я также нашел эту ссылку . После копирования в упомянутом коде меня приветствует исключение в jquery 1.5.1-min.js, которое говорит, что объект не поддерживает это свойство или метод ...

EDIT (2) Я нахожусь в своем уме с этим, я попытался добавить ссылки, предложенные Тридусом, но у меня есть разные версии, и у некоторых версий у меня есть альтернатива .min.js . Весь соответствующий код:

В StandIn.cs: 

    [DisplayName("Available from")]
    [DisplayFormat(DataFormatString="{0:d}",ApplyFormatInEditMode=true,NullDisplayText="(not specified")]
    public DateTime? From { get; set; }

В Edit.cshtml: 

       <div class="editor-field">
        @Html.EditorFor(model => model.Standin.From)
        @Html.ValidationMessageFor(model => model.Standin.From)
    </div>

В _Layout.cshtml: 

<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>

In \ Shared \ EditorTemplates \ DateTime.cshtml 

 @model Nullable<System.DateTime> 

@if (Model.HasValue)
{
    @Html.TextBox("", Model.Value.ToShortDateString(), new { @class = "date" }) 
}
else
{
    @Html.TextBox("",string.Empty) 
}
<script type="text/javascript">
    $(document).ready(function () { $('.date').datepicker({ dateFormat: "dd/mm/yy" }); });
</script>

Mind: весь код выполняется без проблем, пока я не добавлю теги сценария: затем при отображении Edit.cshtml jquery-1.5.1.min.js выдает исключение о том, что свойство или метод не поддерживается.

Ответы [ 3 ]

1 голос
/ 22 августа 2011

То, что вам почти наверняка не хватает, это просто ссылки на скрипты на нужные библиотеки jQuery. Они должны быть где-то в результирующем HTML (либо в шаблоне для самого объекта DateTime, либо в вашем _layout.cshtml, так что он просто включен везде). Скорректируйте пути и версии в соответствии с тем, что у вас есть в вашем проекте. 

<script src="@Url.Content("~/Scripts/jquery-1.4.4.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.14.min.js")" type="text/javascript"></script>

Если он у вас есть, возможно, вам также нужна тема пользовательского интерфейса jQuery: 

<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />

Это единственное, что я не увидел в сообщении в блоге. Все остальное на самом деле так же прямо, как они говорят.

1 голос
/ 23 августа 2011

Я все больше убеждаюсь в том, что проблема заключается в файлах .js, которые включены в проект MVC3 по умолчанию в Visual Studio 2010: в них не хватает некоторых необходимых зависимых файлов .js.Я перешел на сайт jquery ui , как предложено Эриком, загрузил полный пакет jquery ui и использовал ссылки и файлы .js из файла default.html в development-bundle / demo / datepicker папка.Это работает!Однако, поскольку проект VS MVC3 поставляется с множеством готовых пользовательских сценариев, мне пришлось хранить загруженные файлы .js отдельно от файлов в папке Scripts .Для этого я создал новую папку JQueryScripts, которую я использую для элементов пользовательского интерфейса.Ссылки на эти файлы .js нельзя добавить в _Layout.cshtml, чтобы избежать конфликта, и я не включил MasterPage (_Layout.cshtml) по той же причине.

Для записи, полученной в результате DateTime.cshtml EditorTemplate.это работает с Nullable DateTime и показывает, как реализовать локализацию для одного языка (в данном случае голландского).Обратите внимание, что этот код будет сделан устаревшим с новой версией jquery (ui), но он дает идею: 

<link rel="stylesheet" href="../../../JQueryScripts/themes/base/jquery.ui.all.css"/>
<script type="text/javascript" src="@Url.Content("~/JQueryScripts/jquery-1.6.2.js")"></script>
<script type="text/javascript" src="@Url.Content("~/JQueryScripts/ui/jquery.ui.core.js")"></script>
<script type="text/javascript" src="@Url.Content("~/JQueryScripts/ui/jquery.ui.widget.js")"></script>
<script type="text/javascript" src="@Url.Content("~/JQueryScripts/ui/jquery.ui.datepicker.js")"></script>
<script type="text/javascript" src="@Url.Content("~/JQueryScripts/ui/i18n/jquery.ui.datepicker-nl.js")"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('.datepicker').datepicker({
                dateFormat: "dd-mm-yy",
                minDate:0
            }); 
          });
    </script>


@model Nullable<System.DateTime> 

@if (Model.HasValue)
{
    @Html.TextBox("", Model.Value.ToShortDateString(), new { @class = "datepicker" }) 
}
else
{
    @Html.TextBox("", string.Empty, new { @class = "datepicker" }) 
}
1 голос
/ 22 августа 2011

Это хорошее место для начала: http://jqueryui.com/demos/datepicker/

...