asp.net-mvc – 在ASP.Net MVC中,如何创建将javascript和css放在应该去的位置的小部件？

发布时间：2020-05-24 12:21:38 所属栏目：asp.Net 来源：互联网

导读：我试图在ASP.Net MVC中创建一个可重用的小部件.这是一个将2个日期连接成字符串的小部件.该小部件包含3个文件：Widget.cshtml,Widget.css和Widget.js以及几个 jquery库的依赖项. Widget.cshtml h2Create a date range/h2div label for=startDateStart:/labe

我试图在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,值得一读.

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!