How can I include css files from an MVC partial control?
Question
I'm using ASP.NET MVC and I have a partial control that needs a particular CSS & JS file included. 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?
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. I want to be able to include the files in the html head section so as to avoid validation issues.
9 answers
solution1
8 2009-02-10 02:49:15
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. 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.
<% if (false) { %>
<link href=...
<script type=...
<% } %>
solution2
3 ACCPTED 2010-01-19 19:34:26
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.
solution3
2 2009-02-10 17:07:42
Before the render partial line, call @import as follows:
<style type="text/css>
@import url(cssPath.css);
</style>
Hope this helps.
Just came across this option on Haacked and remembered your question. Use the header's Content placeholder on the partial view and just add the CSS to that form normally.
solution4
0 2010-01-27 14:19:37
I am new to MVC... I had the challenge recently. 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. Hope this info helps.
solution5
0 2008-12-16 21:45:00
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.
solution6
0 2009-02-04 03:57:55
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. 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.
solution7
0 2009-02-09 21:39:09
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.
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.
solution8
0 2009-02-10 04:33:31
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. Unfortunately, you can rarely rely on this.
I would suggest you include the all the css files you need in the master page. 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. 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.
solution9
-2 2008-12-15 23:44:22
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.