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.

Not really specific to mvc, but most web frameworks, but a good question :) — leppie
– leppie, Commented Dec 16, 2008 at 21:43
See my answer here for using bundles: stackoverflow.com/questions/21827009/… — Andreas
– Andreas, Commented Feb 18, 2014 at 7:37

tvanfosson · Accepted Answer · 2010-07-12 15:38:21Z

9

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=...
<% } %>

edited Jul 12, 2010 at 15:38

answered Feb 10, 2009 at 2:49

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Glenn Slaven Over a year ago

This isn't the issue I'm having, I want to be able to include in the <head> section of the page a css link if a particular partial view is included on the page. I don't want to have to include all css files in my master page if they're not needed

tvanfosson Over a year ago

You don't -- you put a ContentPlaceHolder in the master page in the head section, then on the actual page that includes the partial, you add the CSS link to the corresponding Content control. That way it only gets added to those pages that actually need it.

dotjoe Over a year ago

Thanks, this was useful to remove all the CSS intellisense errors. Or, if your an optimist, to add CSS intellisense.

Glenn Slaven Over a year ago

Sorry, this isn't solving the problem, you can't have a content control in a partial view, they can only be on pages

tvanfosson Over a year ago

@Glenn - correct. Any child page that uses the partial would populate the content placeholder for scripts with the scripts that the partial needs. This is the alternative to putting it in your master page so that it's only included on pages that need it.

user254330 · Accepted Answer · 2010-01-19 19:34:26Z

3

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.

answered Jan 19, 2010 at 19:34

user254330

462 bronze badges

Comments

Community · Accepted Answer · 2012-09-17 21:17:01Z

3

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.

edited Sep 17, 2012 at 21:17

CommunityBot

11 silver badge

answered Feb 10, 2009 at 17:07

Pita.O

1,8371 gold badge20 silver badges27 bronze badges

Comments

leppie · Accepted Answer · 2008-12-16 21:45:00Z

0

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.

answered Dec 16, 2008 at 21:45

leppie

118k18 gold badges201 silver badges300 bronze badges

1 Comment

Glenn Slaven Over a year ago

Yeah it does, but that's what I'm trying to avoid :)

Darren Oster · Accepted Answer · 2009-02-04 03:57:55Z

0

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.

answered Feb 4, 2009 at 3:57

Darren Oster

9,22610 gold badges50 silver badges68 bronze badges

Comments

Carlton Jenke · Accepted Answer · 2009-02-09 21:39:09Z

0

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.

answered Feb 9, 2009 at 21:39

Carlton Jenke

3,0353 gold badges27 silver badges30 bronze badges

Comments

Franci Penov · Accepted Answer · 2009-02-10 04:33:31Z

0

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.

answered Feb 10, 2009 at 4:33

Franci Penov

76.1k18 gold badges136 silver badges172 bronze badges

1 Comment

Aliostad Over a year ago

I would suggest you include the all the css files you need in the master page. That is what the guy (and me) trying to avoid...

John Smith · Accepted Answer · 2010-01-27 14:19:37Z

0

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.

answered Jan 27, 2010 at 14:19

John Smith

1

Comments

Todd Smith · Accepted Answer · 2008-12-15 23:44:22Z

-2

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>

answered Dec 15, 2008 at 23:44

Todd Smith

17.3k11 gold badges63 silver badges82 bronze badges

1 Comment

Glenn Slaven Over a year ago

Unfortunately you can't put content controls on a partial view, they can only go on pages that reference the master page

Collectives™ on Stack Overflow

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

9 Answers 9

5 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

5 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related