Aggiungere riferimenti CSS alla pagina di da una visione parziale

StackOverflow https://stackoverflow.com/questions/4210391

Domanda

C'è un modo per aggiungere i riferimenti CSS per una pagina da una visione parziale, e li hanno rendono in <head> della pagina (come richiesto dal HTML 4.01 spec )?

È stato utile?

Soluzione 4

È possibile utilizzare un HttpModule per manipolare il codice HTML di risposta e spostare tutti i riferimenti CSS / script per i luoghi appropriati. Questo non è l'ideale, e non sono sicuro delle implicazioni sulle prestazioni, ma sembra che l'unico modo per risolvere il problema senza né (a) una soluzione basata su Javascript, o (b) di lavoro contro i principi MVC.

Altri suggerimenti

Se stai usando MVC3 & Razor, il modo migliore per aggiungere elementi per-pagina al tuo sezione è quello di: 1) chiamata RenderSection () all'interno del tuo layout di pagina 2) dichiarare una sezione corrispondente all'interno delle vostre pagine figlio:

/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" />
}

La pagina HTML risultante quindi comprende una sezione che assomiglia a questo: 

<head>
    <!-- ... Rest of your head section here ... ->
    <link rel="Stylesheet" type="text/css" href="/Entries/Entries.css" />
<head>

È anche possibile utilizzare i comandi open source Telerik per MVC e fare qualcosa di simile: 

<%= Html.Telerik().StyleSheetRegistrar()
                  .DefaultGroup(group => group
                     .Add("stylesheet.css"));

nella sezione head e 

<%= Html.Telerik().ScriptRegistrar()
                  .DefaultGroup(group => group
                     .Add("script.js"));

nella sezione sceneggiatura al botttom della pagina.

E si può continuare ad aggiungere script in ogni caso, o di vista parziale e si dovrebbe lavorare.

Se non si desidera utilizzare il componente si può sempre te stesso ispirare da lì e fare qualcosa di più personalizzato.

Oh, con Telerik hai anche opzioni di combinare e comprimere gli script.

Si potrebbe avere la vista a carico parziale in un blocco javascript che cade nello stile alla testa, ma che sarebbe sciocco visto che probabilmente si desidera che il blocco javascript nella sezione head per lo stesso motivo.

Recentemente ho scoperto qualcosa di abbastanza freddo però. È possibile serializzare una vista parziale in una stringa e inviarlo al client come parte di un oggetto JSON. Ciò consente di passare altri parametri come pure, insieme con la vista.

Tornando una vista come parte di un oggetto JSON

Si potrebbe afferrare un oggetto JSON con jQuery e Ajax e lo hanno caricato con la vista parziale, e poi un'altra proprietà JSON potrebbe essere il vostro stile di blocco. JQuery potrebbe verificare se è tornato un blocco di stile, se così allora cadere nella sezione head.

Qualcosa di simile: 

$.ajax(
{
     url: "your/action/method",
     data: { some: data },
     success: function(response)
     {
          $('#partialViewContainer).html(response.partialView);
          if (response.styleBlock != null)
               $('head').append(response.styleBlock);
     }
});

Un altro approccio, che sconfigge i principi di MVC è quello di utilizzare un ViewModel e rispondere alla Init-evento della pagina per impostare il css desiderato / javascript (cioè myViewModel.Css.Add ( "css") e nella vostra testa il rendering del contenuto del CSS-raccolta sul vostro ViewModel.

Per fare questo si crea una classe di base ViewModel che tutti gli altri modelli di eredita, ala 

public class BaseViewModel
{
    public string Css { get; set; }
}

Nel vostro master-page si imposta per utilizzare questo ViewModel 

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage<BaseViewModel>" %>

e la testa-sezione è possibile scrivere il valore della proprietà Css 

<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

    <%= Model.Css %>
</head>

Ora, in vista parziale è necessario disporre di questo codice, che è un pò brutto in MVC 

<script runat="server">
    protected override void OnInit(EventArgs e)
    {
        Model.Css = "hej";

        base.OnInit(e);
    }
</script>

Di seguito funzionerebbe solo se javascript è stato abilitato. è un po 'di supporto che io uso per esattamente lo scenario si parla: 

// 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());
}

utilizzo: 

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

funziona per me, tho come detto, solo se javascript è abilitato, limitando così la sua utilità un po '.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top