In CSS Verweisen auf Seite von einer Teilansicht

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

Frage

Gibt es eine Möglichkeit CSS Verweise auf einer Seite aus einer Teilansicht hinzuzufügen, und hat sie in der <head> Seite machen (wie durch die HTML 4.01 spec )?

War es hilfreich?

Lösung 4

Sie können eine HttpModule verwenden, um die Antwort HTML zu manipulieren und alle CSS / script Verweise auf die entsprechenden Stellen zu bewegen. Das ist nicht ideal, und ich bin nicht sicher, die Auswirkungen auf der Leistung, aber es scheint wie die einzige Art und Weise, ohne das Problem zu beheben, entweder (a) eine Javascript-basierte Lösung, oder (b), die gegen MVC Prinzipien.

Andere Tipps

Wenn Sie mit MVC3 & Rasierer, dem besten Weg, pro Seite Artikel zu Ihrem Abschnitt hinzuzufügen ist: 1) Ruf RenderSection () aus Ihrer Layoutseite 2) Deklarieren Sie einen entsprechenden Abschnitt innerhalb Ihres Kindes Seiten:

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

Die resultierende HTML-Seite enthält dann einen Abschnitt, der wie folgt aussieht: 

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

Sie könnten auch die Open-Source-Telerik verwenden Kontrollen für MVC und tun so etwas wie: 

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

im Kopfbereich und 

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

im Skript Abschnitt am botttom Ihrer Seite.

Und Sie können halten Skripte auf einer beliebigen Ansicht hinzufügen oder Teilansicht, und sie sollten arbeiten.

Wenn Sie die Komponente nicht verwenden möchten, können Sie immer begeistern, sich von dort und etwas mehr Gewohnheit.

Oh, mit Telerik Sie auch Möglichkeiten zu kombinieren und die Skripte zu komprimieren.

Sie könnten die Teilansicht Last in einem JavaScript-Block haben, die mit dem Kopf im Stil fällt, aber das wäre dumm, man bedenkt, dass Sie wahrscheinlich den Javascript-Block im Kopfteil aus dem gleichen Grunde wollen.

ich etwas ziemlich cool, obwohl vor kurzem entdeckt. Sie können eine Teilansicht in einen String serialisieren und es zurück an den Client als Teil eines JSON-Objekt senden. Dies ermöglicht Ihnen, andere Parameter zu übergeben und zusammen mit der Aussicht.

Zurückgeben einer Ansicht als Teil eines Objekts JSON

Sie könnten ein JSON-Objekt mit JQuery greifen und Ajax und haben es mit der Teilansicht geladen wird, und dann könnte eine weitere JSON Eigenschaft Stil Block sein. JQuery könnte, wenn Sie Style-Block zurückgeführt, wenn ja dann in den Abschnitt Kopf fallen.

So etwas wie: 

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

Ein weiterer Ansatz, der die Prinzipien der MVC besiegt ist ein Ansichtsmodell und reagieren auf die Init-Ereignis der Seite zu verwenden, um die gewünschte CSS / Javascript zu setzen (dh myViewModel.Css.Add ( „css“) und in der Kopf macht den Inhalt der CSS-Sammlung auf Ihrem Viewmodel.

Um dies zu tun, erstellen Sie eine Basisklasse Viewmodel, dass alle Ihre anderen Modelle erbt von, ala 

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

In Ihrer Master-Seite legen Sie es auf dieses Ansichtsmodell

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

und Kopf-Bereich können Sie den Wert der CSS-Eigenschaft

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

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

Nun, in der Teilansicht müssen Sie diesen Code haben, die ein bisschen hässlich in MVC ist 

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

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

In der folgenden würde nur funktionieren, wenn Javascript aktiviert wurden. es ist ein kleiner Helfer, dass ich genau das Szenario verwenden Sie erwähnen: 

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

Nutzung: 

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

funktioniert für mich, tho wie gesagt, nur wenn Javascript aktiviert ist, damit seine Nützlichkeit ein wenig zu begrenzen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top