在MVC页面中添加jQueryUI脚本的位置
在MVC页面中添加jQueryUI脚本的位置
提问于 2013-04-25 21:20:37
我使用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>© Company @System.DateTime.Now.ToString("yyyy")</p>
</footer>
</div>
@Scripts.Render("~/js")
@Scripts.Render("~/jqueryui")
@RenderSection("Scripts", required: false)
</body>
我是否应该绕过最佳实践，将jQuery脚本添加到页面顶部-或者有没有一种更简单的方法来实现这一点，同时仍然遵循最佳实践？
谢谢,
标记
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-04-25 21:25:16
在视图或部分参数中不应该有任何脚本。脚本应该放在它们该放的地方--放在单独的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"的输入字段。
现在剩下的就是覆盖视图中的Scripts自定义部分(而不是在部分或模板中)：
@section Scripts {
<script type="text/javascript" src="~/scripts/myscript.js"></script>
}现在您的模板将只包含模板应该包含的内容- markup：
@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")
}或者简单地将它包含在布局中的一些包中，这样它就会被缩小并与它们一起缓存，并可供所有页面使用。
Stack Overflow用户
发布于 2013-04-25 21:23:09
您应该将其放在部分中：
@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声明的下方
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16215912
复制相关文章
相似问题
腾讯云开发者
