How to Include CSS Files from an MVC Partial Control

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

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.

How to add css/script only to a Partial view?

You cannot load CSS and JavaScript resources specifically for a partial view without it applying to the entire page. Therefore, you'll need to design your page styles or JavaScript to target only the relevant sections.

<div id="header-section">
    <ul class="menu">
        ...
        <li>@Html.Partial("SearchHeader")</li>
    </ul>
</div>

...

<div id="search-header">
    <ul class="menu">...</ul>
</div>

If I wanted to style the ul.menu differently, I'd use selector rules

JavaScript

$("#header-section > .menu").css({ ... });
$("#search-header > .menu").css({ ... });

Or in a CSS file

#header-section > .menu { ... }
#search-header > .menu { ... }

Or just use distinct classes or specific ids

<div class="header-only"></div>
<div class="search-header-only"></div>
<div id="special-item"></div>

.header-only { font-size: 1em; }
.search-header-only { font-size: 0.85em; }
#special-item { font-size: 1.5em; }

place css file in head from partial view

i yet have to se the effects of this solution and monitor it but this is what i ended up doing. i placed this in my partial view and thats it. if anybody got some comment on this good or bad, please let me know.

$('head').append('content');

Add css, js or other content to a views head from partial views

You can do this with sections. For example:
I have more than two view which each other has same _Layout.My Index action in Company Controller has a sections as follow:

@model Invoice.Model.HelperClasses.CompanyViewModel

@{
   ViewBag.Title = "Companies";
   Layout = "~/Views/Shared/_Layout.cshtml";
}
@section usage{
<link href="~/css/uniform.default.css" rel="stylesheet" />
}
@section other{
<link href="~/css/datepicker.css" rel="stylesheet" />
<link href="~/css/SimpleSlide.css" rel="stylesheet" />
<link href="~/css/responsive-tables.css" rel="stylesheet" />
}
@section script
{
  <script src="~/js/datepicker/bootstrap-datepicker.js"></script>
}

and Display Action in Invoice controller has same sections but different css and js as follow:

@model Invoice.Model.HelperClasses.InvoiceViewModel

@{
  ViewBag.Title = "Index";
  Layout = "~/Views/Shared/_Layout.cshtml";
}
@section usage{
@*<link href="~/css/uniform.default.css" rel="stylesheet" />*@
}
@section other{
  <link href="~/css/DT_bootstrap.css" rel="stylesheet" />
  <link href="~/css/responsive-tables.css" rel="stylesheet" />
  <script src="~/js/datatables/extras/ZeroClipboard.js"></script>
}
@section script
{
  <script src="~/js/datepicker/bootstrap-datepicker.js"></script>
  <script src="~/js/validate/jquery.metadata.js"></script>
  <script src="~/js/validate/jquery.validate.js"></script>
}

and then you can use this section in _Layout but its required argument should be false. Look at:

<!DOCTYPE html>
<html>
<head>
<!--usage-->
  @RenderSection("usage", required: false)
<!--other-->
  @RenderSection("other", required: false)
<!--script-->
  @RenderSection("script", required: false)
<head>
<body>
</body>
</html>

How to reference a .css file on a razor view?

For CSS that are reused among the entire site I define them in the <head> section of the _Layout:

<head>
    <link href="@Url.Content("~/Styles/main.css")" rel="stylesheet" type="text/css" />
    @RenderSection("Styles", false)
</head>

and if I need some view specific styles I define the Styles section in each view:

@section Styles {
    <link href="@Url.Content("~/Styles/view_specific_style.css")" rel="stylesheet" type="text/css" />
}

Edit: It's useful to know that the second parameter in @RenderSection, false, means that the section is not required on a view that uses this master page, and the view engine will blissfully ignore the fact that there is no "Styles" section defined in your view. If true, the view won't render and an error will be thrown unless the "Styles" section has been defined.

Adding to script bundle from partial view in .NET MVC 5

It just seemed to be specific to my jquery bundle. It now works, I have added a widgetspecific bundle where you can add scripts to render in the main layout. The bundle also handles the adding of the same file several times (which can happen if the same widget exists several times on the same page) and only renderes it once. My solution added below, which doesnt seem to be that well documented from the searches Ive done so far.

In BundleConfig.cs:

bundles.Add(new ScriptBundle("~/widgetspecific"));

In _Layout.cshmtl:

@Scripts.Render("~/widgetspecific")

In Widget.cshtml:

@{
    var bundle = System.Web.Optimization.BundleTable.Bundles.GetBundleFor("~/widgetspecific");

    bundle.Include("~/Scripts/andreas.js");
}

Is anyone aware of negative aspects to this solution?