ansaurus

Question

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

Answer 1

A:

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>

Todd Smith 2008-12-15 23:44:22

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

Glenn Slaven 2008-12-16 21:39:11

Answer 2

A:

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.

leppie 2008-12-16 21:45:00

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

Glenn Slaven 2008-12-16 22:38:42

Answer 3

A:

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.

Darren Oster 2009-02-04 03:57:55

Answer 4

A:

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.

Carlton Jenke 2009-02-09 21:39:09

Answer 5

+7 A:

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

tvanfosson 2009-02-10 02:49:15

Thank you... this was driving me nuts.

cdmckay 2009-07-07 06:46:30

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

Glenn Slaven 2010-02-07 23:26:29

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.

tvanfosson 2010-02-08 12:37:21

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

dotjoe 2010-04-14 19:46:48

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

Glenn Slaven 2010-07-11 23:16:56

@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.

tvanfosson 2010-07-12 15:40:22

Answer 6

A:

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.

Franci Penov 2009-02-10 04:33:31

Answer 7

+1 A:

before the render partial line, call @import as follows:

Hope this helps.

Just came across this option on Haached and remembered your q

use the header's Content placeholder on the partial view and just add the css to that form normally

see http://haacked.com/archive/2009/01/27/controls-collection-cannot-be-modified-issue-with-asp.net-mvc-rc1.aspx

Pita.O 2009-02-10 17:07:42

Answer 8

+2 A:

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.

2010-01-19 19:34:26

Answer 9

A:

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.

John Smith 2010-01-27 14:19:37

ansaurus

tags:

views:

answers:

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

related questions