Как использовать код jQuery в Razor

Question

Я хочу сделать datepicker в моем представлении. Поэтому я изменил TextBox к этому:

<div class="form-group"> 
    @Html.LabelFor(model => model.ProjectDeadline, new { @class = "control-label col-md-2" }) 
    <div class="col-md-10"> 
     @Html.TextBoxFor(model => model.ProjectDeadline, new { @class = "form-control datepicker", placeholder = "Enter date here..." }) 
     @Html.ValidationMessageFor(model => model.ProjectDeadline) 
    </div> 
</div> 

Я также добавил этот JQuery код _Layout.cshtml:

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/bootstrap") 
<script type="text/javascript"> 
    $(function() { 
     $('.datepicker').datepicker(); 
    }); 
</script> 
@RenderSection("scripts", required: false) 

Но это не работает, я не могу видеть DatePicker. Можете ли вы сказать мне, что я сделал не так? Я неправильно помещал код jQuery? Благодарю.

Answer 1

Ваш код выглядит хорошо. Я могу думать только о двух причинах этого.

1) Вы забыли включить библиотеку, в которой определена функциональность datepicker. Убедитесь, что на вашей странице есть библиотека пользовательского интерфейса jQuery. Он должен быть загружен после включения jQuery, поскольку jQuery ui зависит от jQuery.

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/bootstrap") 

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

<script type="text/javascript"> 
    $(function() { 
     $('.datepicker').datepicker(); 
    }); 
</script> 

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

2) У вас есть другая ошибка скрипта на вашей странице, которая предотвращает сбой кода javascript. Откройте консоль браузера и проверьте, есть ли у вас какие-либо ошибки.

Если у вас нет ошибок скрипта, и вы включили библиотеку пользовательского интерфейса jQuery, сборщик дат будет работать. Here - рабочий образец. :)

Answer 2

Ваш код для просмотра кажется правильным. Пожалуйста, проверьте свою модель на свой ресурс datetime, это должно выглядеть так:

[DataType(DataType.Date)] 
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)] 
public DateTime? MyDate { get; set; }