asp.net-mvc – 在ASP.Net MVC中,如何创建将javascript和css放在
我试图在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帮助器 当我记得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,值得一读. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- asp.net-mvc – Nullable DateTime在调用操作时从不绑定参数
- asp.net – 无法加载文件或程序集’Microsoft.Office.Inter
- asp.net – 自定义编辑删除选择GridView中的链接
- asp.net – 按Enter键时提交表单
- 非锁定进程中的ASP.NET会话状态存储
- asp.net-mvc – 如何在ASP.NET MVC w / VB.NET中添加id HTM
- asp.net – 多个项目Visual Studio 2015 npm
- asp.net-mvc – 使用用户标识从移动客户端访问WCF服务
- asp.net-mvc – AspNet如何与我的模型识别
- asp.net – oauth令牌共享多个应用程序