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

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 文件中。

所以你可以有一个启用日期选择器的 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" 的输入字段。

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

@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")
}

或者简单地将它包含在布局中的某些包中，以便它被缩小并与它们一起缓存并可供所有页面使用。