内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/