2016-04-04 27 views
-1

In dem Standard/generic html in einer ASP.NET-Anwendung zur Verfügung gestellt, wird die Homepage mit dem html in Index.cshtml gemacht, die aus beginnt:Warum wird die Bootstrap-Klasse nicht angewendet?

<div class="jumbotron"> 
    <h1>ASP.NET</h1> 
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p> 
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p> 
</div> 

Dies erzeugt einen "jumbotronified" Abschnitt an der Spitze der Seite mit einem großen "ASP.NET" darin.

Allerdings, wenn ich versuche, die Bootstrap-CSS-Klasse zu verwenden ("jumbotron") in einem anderen Ort:

StringBuilder builder = new StringBuilder(); 
builder.Append("<html>"); 
builder.Append("<head>"); 
builder.Append("<title>"); 
builder.Append(string.Format("Available Delivery Performance Reports For 
{0}", unit)); 
builder.Append("</title>"); 
builder.Append("</head>"); 
builder.Append("<body>"); 

builder.Append("<div class=\"jumbotron\">"); 
builder.Append(String.Format("<h1>{0}</h1>", unit.ToUpper())); 
builder.Append("</div>"); 
. . . 
builder.Append("</table>"); 
builder.Append("</body>"); 
builder.Append("</html>"); 

return builder.ToString(); 

ich nichts Besonderes - die jumbotronned h1 gemacht wird, aber ohne die jumbotron "Effekt" I würde denken, dass, wenn die Bootstrap-Klassen an einer Stelle im Projekt verfügbar sind, sie überall im Projekt verfügbar wären. Was muss ich tun, um dieses dynamische HTML dem Bootstrap-Subsystem hinzuzufügen?

+2

Ich sehe nicht, ** bootstrap.min.css ** und ** ** bootstrap.min.js innerhalb Stringbuilder. – Win

+0

Wie haben Sie die Bootstrap-Bibliothek eingebunden? – Aziz

+0

@Aziz: Ich dachte, es war bereits enthalten, wie es auf der Homepage verwendet wird. –

Antwort

0

Diese (Referenzierung der Bootstrap und jQuery CDNs) funktioniert:

. . . 
builder.Append("</title>"); 
builder.Append("<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />"); 
builder.Append("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>"); 
builder.AppendFormat("<script src=\"https://code.jquery.com/jquery-1.12.2.min.js\" integrity=\"sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=\" crossorigin=\"anonymous\"></script>"); 
builder.Append("</head>"); 
. . . 
3

Es sieht so aus, als würden Sie CSS für eine ganze neue Seite generieren (d. H. Eine, die nicht von einem Layout erbt und keine Teilansicht ist).

Wenn das der Fall ist, dann würden Sie explizit benötigen, um Ihre Bootstrap-Dateien innerhalb dieser neuen generierte Seite, um Referenzierung für sie richtig anzuwenden:

// Example of adding in Bootstrap CSS 
builder.AppendFormat("<link href='{0}' rel='stylesheet' />", Url.Content("~/Style/bootstrap.min.css")); 
// Example of appending jQuery JS 
builder.AppendFormat("<script src='{0}'></script>",Url.Content("~/Scripts/jquery.min.js")); 
// Example of appending Bootstrap JS 
builder.AppendFormat("<script src='{0}'></script>",Url.Content("~/Scripts/bootstrap.min.js")); 
builder.Append("</head>"); 
:

Sie wahrscheinlich so etwas wie verwenden könnte

Diese Dateien werden normalerweise innerhalb eines Layouts oder innerhalb des Abschnitts einer normalen Ansicht referenziert. Da Sie jedoch den gesamten HTML-Inhalt innerhalb Ihrer StringBuilder manuell erstellen, müssen Sie auch alle Referenzen darin einfügen.

+0

"Inhalt" hat kein "Url" Mitglied für mich ... –

+0

Es war ein Tippfehler, sorry. Es sollte stattdessen [** Url.Content **] (https://msdn.microsoft.com/en-us/library/system.web.mvc.urlhelper.content (v = vs.118) .aspx) sein. –

+0

Das gleiche gilt für Url.Content. "Url." bietet mir nur "Equals" und "ReferenceEquals". Die "URL", die erkannt/automatisch verwendet wird, ist "System.Security.Policy.Url". Ist das eine andere, die ich verwenden sollte? –

Verwandte Themen