JQuery UI datepicker в Asp.Net MVC

Я попытался использовать некоторые из виджетов в JQuery UI на Asp.Net MVC сайте без везения.

Например, базовый параметр datepicker из jQuery UI - функциональные демонстрации.

Я создал простой проект MVC и добавил ссылки script в Site.Master следующим образом:

<script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-personalized-1.5.3.min.js" type="text/javascript"></script>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/ui.datepicker.css" rel="stylesheet" type="text/css" />"

В файле Index.aspx я очистил все содержимое по умолчанию и добавил следующее:

<script type="text/javascript">
    $("#basics").datepicker();     
</script>  
<input type="text" size="10" value="click here" id="basics"/>

Ядро jQuery отлично работает. Любые подсказки?

Ответы

Ответ 1

Убедитесь, что ваш инициализатор вызывается после загрузки DOM:

$(document).ready(function() {
    $("#basics").datepicker();
});

событие jQuery ready:

Используя этот метод, ваш функция будет называться мгновенным DOM готов к чтению и манипулировать, когда 99,99% все JavaScript-код необходимо запустить.

Ответ 3

Похоже, вы выполняете встроенную строку JavaScript при загрузке страницы. В этом случае селектор #basics не сможет найти вход с помощью id="basics", поскольку он еще не разобран и не отображен в теле документа.

Ваше решение может быть таким же простым, как перемещение элемента script вашего кода в позицию после элемента input.

Еще лучше, подпишитесь на документ, готовый или загруженный документами, и выполните код jQuery в обработчике этого события.

$(document).ready(function() {
    $("#basics").datepicker();
});

В этом есть ряд преимуществ. Вы можете быть уверены, что весь DOM готов к использованию, и нет никакой зависимости от порядка исходного кода, означающего, что вы могли бы переместить JavaScript во внешний файл в будущем, чтобы использовать различные механизмы кэширования на стороне клиента.

Ответ 4

Где на странице вы загружаете скрипты и где вы вызываете инициализацию datepicker?

Ниже приведен пример использования готовых сокращенных документов jQuery и селекторов css для более легкой инициализации datePickers.

Вот код бритвы для поля ввода образца (обратите внимание на поле "дата" css)

<div class="form-group">
    @Html.LabelFor(m => m.DateOfBirth, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.TextBoxFor(m => m.DateOfBirth, new { @class = "form-control datefield" })
    </div>
</div>

Вот javascript, необходимый для инициализации любого datepicker с помощью селектора css

  $(function() {   $ ( "DateField" ) DatePicker().
});
Код>

Я собрал учебник, подробно описывающий специфику и образец решения ASP.NET MVC5 на github

http://prestoasp.net/using-the-jquery-datepicker-with-asp-net-mvc/ https://github.com/fredo007/i6technology/tree/master/InsuranceSales