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>

然后，我在\ Views \ Shared \ EditorTemplates DateTime.cshtml中为DateTime创建了一个自定义编辑器：

@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包含在Scripts中并不是开箱即用的。甚至改变了，Datepicker没有正确呈现，我得到404错误＃34; Calendar.png＆＃34;而且没有造型。

Answer 1

你必须在那里添加两个引用：一个用于Jquery的核心库，第二个用于Jquery Ui日期选择器

http://jquery.com/

https://jqueryui.com/

EditorTemplate目录文件中的JQuery脚本不会运行

1 个答案: