我试图在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页面中重用这个小部件.我想出了几个选项,包括：
>创建HTML帮助器
> RenderPartial
> RenderAction
>从窗口小部件文件中删除所有css和javascript依赖项.手动复制并粘贴到我在正确位置使用它的每个视图中.
当我记得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,这是一个简单的选择,你仍然需要将代码添加到你使用控件的页面中,但它会出现在正确的位置.
我还找到了一个方便的blog post on registering scripts from within a partial view,值得一读.
