JQuery UI DatePicker в Asp.Net MVC

Question

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

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

Я создал простой проект MVC и добавил ссылки на сценарии в 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 работает отлично. Любые подсказки?

Answer 1

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

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

Событие готовности jQuery :

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

Answer 2

У меня есть запись с MVC 3 здесь: http://blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the-jquery-ui-date-picker-and-adding-a-jquery-validate-date-range-validator.aspx

Answer 3

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

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

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

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

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

Answer 4

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

Вот пример использования сокращений готовых документов jCuery и селекторов CSS для более легкой инициализации DatePickers.

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

<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, необходимый для инициализации любого средства выбора даты с помощью селектора 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