简体   繁体   English

如何从MVC部分控件中包含css文件?

[英]How can I include css files from an MVC partial control?

I'm using ASP.NET MVC and I have a partial control that needs a particular CSS & JS file included. 我正在使用ASP.NET MVC,我有一个需要包含特定CSS和JS文件的部分控件。 Is there a way to make the parent page render the script and link tags in the 'head' section of the page, rather than just rendering them inline in the partial contol? 有没有办法让父页面在页面的“head”部分中呈现scriptlink标记,而不是仅仅在部分控制中将它们内联呈现?

To clarify the control that I want to include the files from is being rendered from a View with Html.RenderPartial and so cannot have server-side content controls on it. 为了阐明我想要包含文件的控件是从带有Html.RenderPartial的View中Html.RenderPartial ,因此不能对其进行服务器端内容控制。 I want to be able to include the files in the html head section so as to avoid validation issues. 我希望能够在html head部分中包含这些文件,以避免验证问题。

If I have requirements for CSS/Javascript in a partial view, I simply make sure that any page that may include the partial view, either directly or as content retrieved from AJAX, has the CSS/Javascript included in it's headers. 如果我在局部视图中对CSS / Javascript有要求,我只需确保任何可能包含局部视图的页面,无论是直接还是从AJAX检索的内容,都包含在其标题中的CSS / Javascript。 If the page has a master page, I add a content placeholder in the master page header and populate it in the child page. 如果页面有母版页,我会在母版页页眉中添加内容占位符,并在子页面中填充它。 To get intellisense in the partial view, I add the CSS/Javascript includes in the partial view but wrapped with an if (false) code block so they are not included at runtime. 为了在局部视图中获取智能感知,我在局部视图中添加CSS / Javascript包含但是用if (false)代码块包装,因此它们不包含在运行时。

<% if (false) { %>
   <link href=...
   <script type=...
<% } %>

http://www.codeproject.com/Articles/38542/Include-Stylesheets-and-Scripts-From-A-WebControl-.aspx http://www.codeproject.com/Articles/38542/Include-Stylesheets-and-Scripts-From-A-WebControl-.aspx

This article contains information about overriding HttpContext.Response.Filter which worked great for me. 本文包含有关重写HttpContext.Response.Filter的信息,这对我来说非常有用。

Before the render partial line, call @import as follows: 在渲染部分行之前,调用@import ,如下所示:

<style type="text/css>
    @import url(cssPath.css);
</style>

Hope this helps. 希望这可以帮助。


Just came across this option on Haacked and remembered your question. 刚刚在Haacked遇到了这个选项,并记住了你的问题。 Use the header's Content placeholder on the partial view and just add the CSS to that form normally. 在部分视图上使用标题的Content占位符,只需将CSS添加到该表单中。

I am new to MVC... I had the challenge recently. 我是MVC的新手......我最近遇到了挑战。 I used MVC View Page instead of partial view, added its own master page (because I have a css which are shared across multiple views) and added css to master. 我使用MVC View Page而不是部分视图,添加了自己的母版页(因为我有一个跨多个视图共享的css)并将css添加到master。 Hope this info helps. 希望此信息有所帮助。

If you willing to break conformance, you can just emit a style definition with the partial content. 如果您愿意违反一致性,则可以使用部分内容发出样式定义。 This tends to work in most recent browsers. 这往往适用于最新的浏览器。

Depending on how much CSS / JS your control needs, the safest route may be just to include the extra styling in your main CSS files. 根据您的控件需要多少CSS / JS,最安全的路径可能只是在主CSS文件中包含额外的样式。 Saves an extra trip to the server, and it should all be cached by the client. 节省额外的服务器之旅,它应该全部由客户端缓存。 I know this kills the self-containedness (to coin a phrase) of the control, but it may be your best bet. 我知道这会杀死控制的自足(硬币短语),但这可能是你最好的选择。

Sorry, you cannot from a partial control refer "up" to something in the parent page (or add anything). 抱歉,您无法从部分控制中将“向上”引用到父页面中的某些内容(或添加任何内容)。 The only communication is "down" from the parent to the partial by passing the ViewData / Model. 通过传递ViewData / Model,唯一的通信是从父级到“部分”的“向下”。

You are describing functionality of a master page and a normal page using the content place holders, but partial controls do not function like that. 您正在使用内容占位符描述母版页和普通页面的功能,但部分控件不起作用。

But, if I am not mistaken, you can just physically add the script or link tags to the actual parent page that you render the partial page on - the CSS should be used by the partial page as well. 但是,如果我没有弄错,你可以将脚本或链接标签物理地添加到您呈现部分页面的实际父页面上 - 部分页面也应该使用CSS。

Todd's answer works fine, provided you have only one instance of the control and there's no other code that wants to "inject" anything in the tag for the master page. 如果您只有一个控件实例并且没有其他代码想要在主页的标签中“注入”任何内容,那么Todd的答案就可以正常工作。 Unfortunately, you can rarely rely on this. 不幸的是,你很少依赖这个。

I would suggest you include the all the css files you need in the master page. 我建议你在母版页中包含你需要的所有css文件。 There will be a small perf hit on the first visit, but after that the browser caching will kick in. You can (and should) split your styles in multiple .css files to benefit from HTTP agents that can downoad them concurently. 在第一次访问时会有一个小的性能,但之后浏览器缓存将会启动。您可以(并且应该)将您的样式拆分为多个.css文件,以便从可以将它们简洁地下载的HTTP代理中受益。 As for the .js files, I'd suggest to implement something close to the google.load() mechanism, that would allow you to load scripts on demand. 至于.js文件,我建议实现一些接近google.load()机制的东西,它允许你按需加载脚本。

Include a place holder in your master template: 在主模板中包含占位符:

<head runat="server>
    <asp:ContentPlaceHolder ID="head" runat="server" />
</head>

and in your control 并在你的控制

<asp:Content ID="head" runat="server">
    <script src="something.js"></script>
</asp:Content>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM