Question

我正在使用EditorTemplates文件夹，以及以下DateTime.cshtml将日期选择器（jQuery UI）添加到所有日期时间字段：

@model Nullable<System.DateTime>
@if ( Model.HasValue ) {
@Html.TextBox( "" , String.Format( "{0:yyyy-MM-dd HH:mm}" , Model.Value ) , new  {     @class = "textbox" , @style = "width:400px;" } )
}
else {
@Html.TextBox( "" , String.Format( "{0:yyyy-MM-dd HH:mm}" , DateTime.Now ) , new {     @class = "textbox" , @style = "width:400px;" } )
}

@{
string name = ViewData.TemplateInfo.HtmlFieldPrefix;
string id = name.Replace( ".", "_" );
}
<script type="text/javascript">
$(document).ready(function () {
    alert("adding date picker");
    $("#@id").datepicker
        ({
            dateFormat: 'dd/mm/yy',
            showStatus: true,
            showWeeks: true,
            highlightWeek: true,
            numberOfMonths: 1,
            showAnim: "scale",
            showOptions: {
                origin: ["top", "left"]
            }
        });
});
</script>

但是，如果我将jQuery脚本等添加到页面底部，建议现在是最佳实践 - 上面的代码，内联 - 在jQuery脚本之上 - 因此不会运行：

主要CSHTML Razor视图：

 @RenderBody()   
        <hr>
        <footer>
            <p>&copy; Company @System.DateTime.Now.ToString("yyyy")</p>
        </footer> 
    </div>
     @Scripts.Render("~/js")
     @Scripts.Render("~/jqueryui")
     @RenderSection("Scripts", required: false)
</body>

我是否应该绕过最佳实践并将jQuery脚本添加到页面顶部 - 或者是否有更简单的方法来完成这项工作，同时仍然遵循最佳实践？

谢谢，

标记

Answer 1

你应该把它放在以下部分：

@section Scripts { 

    <script type="text/javascript">
$(document).ready(function () {
    alert("adding date picker");
    $("#@id").datepicker
        ({
            dateFormat: 'dd/mm/yy',
            showStatus: true,
            showWeeks: true,
            highlightWeek: true,
            numberOfMonths: 1,
            showAnim: "scale",
            showOptions: {
                origin: ["top", "left"]
            }
        });
});
</script>
}

这样您的脚本将添加到jQuery声明

下面

Answer 2

您的视图或部分中不应包含任何脚本。应将脚本放在它们所属的位置 - 在单独的javascript文件中。

所以你可以有一个启用datepickers的javascript文件，例如~/scripts/myscript.js：

$('.datepicker').datepicker({
    dateFormat: 'dd/mm/yy',
    showStatus: true,
    showWeeks: true,
    highlightWeek: true,
    numberOfMonths: 1,
    showAnim: "scale",
    showOptions: {
        origin: ["top", "left"]
    }
});

正如您所看到的，我在此处使用了一个类选择器：$('.datepicker')，以便将datepicker插件附加到具有class="datepicker"的所有输入字段。

现在剩下的就是覆盖视图中的Scripts自定义部分（不在部分或模板中）：

@section Scripts {
    <script type="text/javascript" src="~/scripts/myscript.js"></script>
}

现在，您的模板将仅包含应包含的模板 - 标记：

@model DateTime?
@Html.TextBox(
    "", 
    string.Format("{0:yyyy-MM-dd HH:mm}", Model ?? DateTime.Now), 
    new { 
        @class = "textbox datepicker", 
        @style = "width:400px;" 
    } 
)

您可能还会注意到代码的简化。

现在，由于您遵循最佳实践将所有脚本放在单独的文件中，您甚至可以为它们添加一个包：

@section Scripts {
    @Scripts.Render("~/datepickers")
}

或者只是将其包含在您的布局中的某些捆绑包中，以便缩小并缓存它们并可供所有页面使用。

在MVC页面中添加jQueryUI脚本的位置

2 个答案: