2

我正在使用 EditorTemplates 文件夹和以下 DateTime.cshtml 将日期选择器 (jQuery UI) 添加到所有 Datetime 字段：

@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 脚本添加到页面顶部 - 还是有更简单的方法可以使这项工作，同时仍然遵循最佳实践？

谢谢，

标记

4

2 回答 2

2

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

@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 声明下方

于 2013-04-25T13:23:08.713 回答
1

您的视图或部分中不应包含任何脚本。脚本应该放在它们所属的地方 - 在单独的 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")
}

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

于 2013-04-25T13:25:15.813 回答