Add CSS references to page's <head> from a partial view

后端未结

关注

 6  2398

Is there a way to add CSS references to a page from a partial view, and have them render in the page\'s (as required by the HTML 4.01

相关标签:

6条回答

离开以前

2021-02-20 02:39

You can use a HttpModule to manipulate the response HTML and move any CSS/script references to the appropriate places. This isn't ideal, and I'm not sure of the performance implications, but it seems like the only way to resolve the issue without either (a) a javascript-based solution, or (b) working against MVC principles.

0 讨论(0)
发布评论:

提交评论
- 加载中...
难免孤独

2021-02-20 02:47
Another approach, which defeats the principles of MVC is to use a ViewModel and respond to the Init-event of your page to set the desired css/javascript (ie myViewModel.Css.Add(".css") and in your head render the content of the css-collection on your viewmodel.

To do this you create a base viewmodel class that all your other models inherits from, ala
```
public class BaseViewModel
{
    public string Css { get; set; }
}
```
In your master-page you set it to use this viewmodel
```
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage<BaseViewModel>" %>
```
and your head-section you can write out the value of the Css property
```
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

    <%= Model.Css %>
</head>
```
Now, in your partial view you need to have this code, which is kinda ugly in MVC
```
<script runat="server">
    protected override void OnInit(EventArgs e)
    {
        Model.Css = "hej";

        base.OnInit(e);
    }
</script>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

无人共我

2021-02-20 02:51

The following would work only if javascript were enabled. it's a little helper that i use for exactly the scenario you mention:

// standard method - renders as defined in as(cp)x file
public static MvcHtmlString Css(this HtmlHelper html, string path)
{
    return html.Css(path, false);
}
// override - to allow javascript to put css in head
public static MvcHtmlString Css(this HtmlHelper html, 
                                string path, 
                                bool renderAsAjax)
{
    var filePath = VirtualPathUtility.ToAbsolute(path);

    HttpContextBase context = html.ViewContext.HttpContext;
    // don't add the file if it's already there
    if (context.Items.Contains(filePath))
        return null;

    // otherwise, add it to the context and put on page
    // this of course only works for items going in via the current
    // request and by this method
    context.Items.Add(filePath, filePath);

    // js and css function strings
    const string jsHead = "<script type='text/javascript'>";
    const string jsFoot = "</script>";
    const string jsFunctionStt = "$(function(){";
    const string jsFunctionEnd = "});";
    string linkText = string.Format("<link rel=\"stylesheet\" type=\"text/css\" href=\"{0}\"></link>", filePath);
    string jsBody = string.Format("$('head').prepend('{0}');", linkText);

    var sb = new StringBuilder();

    if (renderAsAjax)
    {
        // join it all up now
        sb.Append(jsHead);
        sb.AppendFormat("\r\n\t");
        sb.Append(jsFunctionStt);
        sb.AppendFormat("\r\n\t\t");
        sb.Append(jsBody);
        sb.AppendFormat("\r\n\t");
        sb.Append(jsFunctionEnd);
        sb.AppendFormat("\r\n");
        sb.Append(jsFoot);
    }
    else
    {
        sb.Append(linkText);
    }

    return MvcHtmlString.Create( sb.ToString());
}

usage:

<%=Html.Css("~/content/site.css", true) %>

works for me, tho as stated, only if javascript is enabled, thus limiting its usefulness a little.

0 讨论(0)

再見小時候

2021-02-20 02:52
You could also use the Telerik open source controls for MVC and do something like :
```
<%= Html.Telerik().StyleSheetRegistrar()
                  .DefaultGroup(group => group
                     .Add("stylesheet.css"));
```
in the head section and
```
<%= Html.Telerik().ScriptRegistrar()
                  .DefaultGroup(group => group
                     .Add("script.js"));
```
in the script section at the botttom of your page.

And you can keep adding scripts on any view , or partial view and they should work.

If you don't want to use the component you can always inspire yourself from there and do something more custom.

Oh, with Telerik you also have options of combining and compressing the scripts.
0 讨论(0)
发布评论:

提交评论
- 加载中...
一生所求

2021-02-20 03:01
If you're using MVC3 & Razor, the best way to add per-page items to your section is to: 1) Call RenderSection() from within your layout page 2) Declare a corresponding section within your child pages:

/Views/Shared/_Layout.cshtml:
```
<head>
    <!-- ... Rest of your head section here ... ->
    @RenderSection("HeadArea")
</head>
```
/Views/Entries/Index.cshtml:
```
@section HeadArea {
    <link rel="Stylesheet" type="text/css" href="/Entries/Entries.css" />
}
```
The resultant HTML page then includes a section that looks like this:
```
<head>
    <!-- ... Rest of your head section here ... ->
    <link rel="Stylesheet" type="text/css" href="/Entries/Entries.css" />
<head>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
死守一世寂寞

2021-02-20 03:03
You could have the partial view load in a javascript block that drops in the style to the head, but that would be silly considering that you probably want the javascript block in the head section for the same reason.

I recently discovered something pretty cool though. You can serialize a partial view into a string and send it back to the client as part of a JSON object. This enables you to pass other parameters as well, along with the view.

Returning a view as part of a JSON object

You could grab a JSON object with JQuery and ajax and have it loaded with the partial view, and then another JSON property could be your style block. JQuery could check if you returned a style block, if so then drop it into the head section.

Something like:
```
$.ajax(
{
     url: "your/action/method",
     data: { some: data },
     success: function(response)
     {
          $('#partialViewContainer).html(response.partialView);
          if (response.styleBlock != null)
               $('head').append(response.styleBlock);
     }
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...