內EditorTemplate目錄中的文件JQuery的腳本不運行

Question

我目前正在讀ASP.NET MVC Succintly電子書，和一些實例都不能正常工作，其中之一是：

我從創建的項目一個ASP.NET MVC 4（.NET 4.5）模板，和在模型中創建了這個ItineraryItem類：

public class ItineraryItem {  
     public DateTime? When { get; set; }  
     public string Description { get; set; }  
     public int? Duration { get; set; }  
     public bool IsActive { get; set; }  
     public bool? Confirmed { get; set; } 
} 

這是視圖：

@model AbacoASP.Models.ItineraryItem 
<h2>Create</h2> 
<div class="editor"> 
    @using (Html.BeginForm()) 
    { 
     @Html.ValidationSummary(true) 
     @Html.EditorFor(m=>m) 
     <p><input type="submit" value="Save" /></p> 
    } 
</div> 

然後，我創建了一個自定義編輯器對於日期時間在\視圖\共享\ EditorTemplates DateTime.cshtml：

@model DateTime? 
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" , @readonly = "readonly"}) 

然後建議加上這個腳本...但不是哪裏。我想以同樣的DateTime.cshtml在腳本標籤：

$(".datePicker").datepicker( 
    {  
     showOn: "button", 
     gotoCurrent: true, 
     showAnim: 'fold', 
     buttonImage: "/Content/calendar.png", 
     buttonImageOnly: true 
}) 

有一個類似的例子，不能正常工作，當我創建一個Phone.cshtml我得到了控制檯$ is not defined，這是它的內容：

@model string 

@{ 
    var areaCode = string.Empty; 
    var firstNumber = string.Empty; 
    var secondNumber = string.Empty; 
    if (Model != null) { 
     areaCode = Model.Substring(0, 3); 
     firstNumber = Model.Substring(3, 3); 
     if (Model.Length >= 10) { 
      secondNumber = Model.Substring(6, 4); 
     } 
    } 
} 
<input type="text" name="area_code" id="area_code" 
     maxlength="3" size="3" value="@areaCode" /> - 
<input type="text" name="number1" id="number1" 
     maxlength="3" size="3" value="@firstNumber" /> - 
<input type="text" name="number2" id="number2" 
     maxlength="4" size="5" value="@secondNumber" /> 
<input type="hidden" name="@ViewData.TemplateInfo.HtmlFieldPrefix" 
     id="@ViewData.TemplateInfo.HtmlFieldPrefix" value="@Model" /> 
<img src="../../../Content/images/Edit32.png" id="phoneNumberEdit" /> 
<input type="text" name="unparsed" id="unparsed" /> 
<script type="text/javascript"> 
    $(document).ready(function() {   
     $("#unparsed").hide();   
     var edit = $("#phoneNumberEdit");   
     edit.click(function() { $("#unparsed").toggle(); });   
     var phone = $('#area_code, #number1, #number2');   
     phone.autotab_magic().autotab_filter('numeric'); 
     $("#unparsed").change(function() {    
      var unparsed = $("#unparsed");    
      var value = unparsed.val(); 
      value = value.replace(/\(|\)|\s|\-/gi, '');    
      value = value.replace(/[a-zA-Z]+/gi, '');    
      unparsed.val(value);    
      $("#area_code").val(value.substring(0, 3));    
      $("#number1").val(value.substring(3, 6));    
      $("#number2").val(value.substring(6, 10));    
      if (value.length == 10)     
       unparsed.hide();    
      var result = ($('#area_code').val()     
       + $("#number1").val()     
       + $("#number2").val());    
      $("#@ViewData.TemplateInfo.HtmlFieldPrefix")     
       .val(result);   
     });   
     phone.blur(function() {    
      var result = ($('#area_code').val()     
       + $("#number1").val()     
       + $("#number2").val());    
      $("#@ViewData.TemplateInfo.HtmlFieldPrefix") 
      .val(result); 
     }); 
    }); 
</script> 

編輯：在這接受的答案建議question不起作用，而答案是沒有幫助的。

更新： 我不得不手動添加以下里面_Layout.cshtml：

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

我不知道爲什麼jQuery是包含在腳本不起作用開箱即用。 甚至改變了這一點，日期選擇器沒有正確渲染，我得到了「Calendar.png」的404錯誤，並沒有這樣的樣式。

Answer 1

您必須添加兩個引用有：一個是jQuery和第二核心庫是jQuery UI的日期選擇器

http://jquery.com/

https://jqueryui.com/