Joh*_*ohn 8 asp.net-mvc performance widget
我试图在ASP.Net MVC中创建一个可重用的小部件.这是一个将2个日期连接成字符串的小部件.该小部件包含3个文件:Widget.cshtml,Widget.css和Widget.js以及几个jquery库的依赖项.
Widget.cshtml
<h2>Create a date range</h2>
<div>
<label for="startDate">Start:</label>
<input id="startDate" class="date" name="startDate" type="text" />
</div>
<div>
<label for="endDate">End:</label>
<input id="endDate" class="date" name="endDate" type="text" />
</div>
<p id="output"></p>
<button id="createDateRange">Create</button>
Widget.css
label { color: #555;}
Widget.js
$(function () {
$(".date").datepicker();
$("#createDateRange").click(function () {
var start = $("#startDate").val();
var end = $("#endDate").val();
$("#output").html(start + " to " + end);
});
});
我想在我的MVC页面中重复使用这个小部件.我想出了几个选项,包括:
当我记得Steve Souders关于网站性能的规则时,我正准备使用帮助器:
规则5:将样式表放在顶部
规则6:将脚本放在底部
选项1),2)和3)看起来都是好主意,但它们都是内联编写代码并违反了性能规则.选项4)允许我手动将javascript和css文件放在它们所属的位置,但复制和粘贴容易出错.一个潜在的想法是写一个脚手架,把所有东西放在它所属的地方,但这似乎现在太多了.
什么是最好的(希望很简单)做小部件的方式,仍然遵循性能规则5和6？
您可以使用与旧的 ContentPlaceHolder 类似的RenderSection()并将它们放入您的_Layout.cshtml中
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
@RenderSection("head");
</head>
然后在你的视图中输入：
@{
ViewBag.Title = "Home Page";
}
@section head
{
<link href="widget-style.css" type="text/css" rel="stylesheet" /><
}
<h2>@ViewBag.Message</h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
@section footer{
<script type="text/javascript" src="wiget.js"></script>
}
如果您不想使用 Combress 或 Chirpy，这是一个简单的替代方案，您仍然需要将代码添加到使用该控件的页面中，但它会出现在正确的位置。
我还发现了一篇关于从部分视图中注册脚本的方便博客文章，可能值得一读。
| 归档时间： |
|
| 查看次数： |
1780 次 |
| 最近记录： |