Ich habe eine Teilansicht (ASCX), die eine eigene CSS-Datei enthalten sollte, wie es in mehreren anderen Ansichten verwendet wird. Wie injiziere ich ein Stylesheet auf der Seite des Servers, d. H. Ohne JavaScript?Wie wird eine CSS-Datei von einer ASP.NET MVC-Teilansicht (serverseitig) injiziert?
Warum nicht den Link-Tag in Ihrer Teilansicht setzen:
<link rel="stylesheet" href="yourstyle.css" type="text/css" />
Das macht das Dokument ungültig. –
Ich denke, die HTML-Validatoren machen es ungültig. Aber ich bin mir sicher, dass die Browser richtig rendern. Ich sehe nicht in Spezifikationen, wo sie Ihnen sagen, dass es nur innerhalb "Kopf" -Tag sein kann –
Dario - wegen Verwendung dieses für partialviews, wirst du immer das Problem, dass der <head> Abschnitt des Dokuments bereits in Ort und kann daher nicht geändert werden. Wenn Sie WC3-konform bleiben wollen, müssen Sie weitere CSS in den Kopfbereich über Javascript setzen. Dies kann oder auch nicht wünschenswert sein (wenn Sie Downstream-Browser mit deaktiviertem Javascript berücksichtigen müssen).
das Hauptproblem, das Sie möglicherweise zu alidieren ist die Tatsache, dass Sie <asp:contentplaceholders> in Ihre Teiltöne nicht setzen können. Das ist ein Schmerz (obwohl der Masterpage-Ref den Teil zu nahe an eine bestimmte Masterseite bindet).
Zu diesem Zweck habe ich eine kleine Hilfsmethode erstellt, die die grundlegende Arbeit erledigt, um die CSS-Datei automatisch in den Kopfbereich zu legen.
bearbeiten - (gemäß Omu js Vorschlag) ist dies eine nette kleine Zwischenstation:
// standard method - renders as defined in as(cp)x file
public static string Css(this HtmlHelper html, string path)
{
return html.Css(path, false);
}
// override - to allow javascript to put css in head
public static string 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 "";
// 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 sb.ToString();
}
Nutzung:
<%=Html.Css("~/Content/yourstyle.Css")%>
oder:
<%=Html.Css("~/Content/yourstyle.Css", true)%> // or false if you want!!
ein Wert Back-Pocket-Ansatz, wenn alles andere fehlschlägt. Es kann auch möglich sein, die obige Logik anzupassen, um ein Aktionsfilter zu treffen und das css zu den Antwortkopfzeilen usw. hinzuzufügen, anstatt die js-Zeichenkette auszugeben.
BTW -i fand diesen Artikel, der Code hinzufügt, damit Sie dies tun können: http://somewebguy.wordpress.com/2010/04/06/hinzufügen-stylesheets-scripts-in-asp-net-mvc2/dann folgen Sie den Links zu http://gist.github.com/358458 –
Gibt es einen Grund, warum Sie das Stylesheet nicht einfach auf die Hauptseite setzen können? Sofern es nicht extrem groß ist, sollte es Ihre Seite nicht wesentlich langsamer laden, wenn sie nicht verwendet wird, insbesondere nach der Komprimierung.
Wenn darüber hinaus die Teilansicht von Ajax abgerufen wird, werden Sie erneut das Herunterladen der CSS-Datei mehrmals (abhängig vom Browser des Caching) enden.
Ich möchte meine Teilansicht in sich abgeschlossen sein (außer , es ist serverseitig gerendert, nicht über AJAX geladen). –
Ich bin kein ASP.NET oder MVC Experte, aber ich arbeite gerade an einem Projekt damit. Wäre es möglich, so etwas in den Kopf Ihrer Masterseite aufzunehmen?
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
Dann irgendwie Ihr CSS in den Inhalt Platzhalter?
Es sieht so aus, als müssten Sie dies von der aufrufenden Seite aus tun, was eine doppelte Code-Eingabe zur Folge hätte. Ich bin mir nicht sicher, wie ich das schaffen soll. Vielleicht könnte es mit einem HTML-Helfer gemacht werden.
Sie müssten dies wissentlich außerhalb der partiellen (dh auf der Seite) tun. Es wäre großartig, wenn es eine Lösung gäbe, die in Teilbereichen funktioniert, für Fälle, in denen sie bedingt enthalten sind. –
Ein Ort, an dem ich arbeitete, hatte eine Site mit vielen bedingten Teilansichten, die sich von Zeit zu Zeit ändern und ändern konnten, als neue Dinge zur Anwendung hinzugefügt wurden. Der beste Weg, den wir gefunden haben, war die Verwendung von Namenskonventionen - Benennung der Teilansicht, des Stylesheets und des Skripts (außer der Erweiterung natürlich).
Wir haben dem Ansichtsmodell der Seite ein oder mehrere Stylesheets, Skripts und Teilansichten hinzugefügt. Anschließend haben wir einen benutzerdefinierten HTML-Helper verwendet, um das relevante Array in jedem Inhaltsabschnitt zu durchlaufen und den erforderlichen Inhalt einzufügen. Der Schmerz musste für jede Komponente drei oder mehr Dateien verwalten, aber zumindest konnten wir den Wartungsaufwand auf den Hosting-Seiten reduzieren.
tat nie das Problem, wie man eine Teilansicht in einer Teilansicht lösen, though.
Ich nehme auch an, dass eine gute Technik hier das Stylesheet nicht mehr als einmal verlinkt, auch wenn das Partial mehrfach enthalten war. –
Warum können Sie zu Beginn Ihres Teilprojekts keinen Verweis auf Ihr Stylesheet einfügen? –
@Justin Weil es kein gültiges XHTML ist. –