Verwendung von Bootstrap 4 in ASP.NET Core

111

Ich möchte Bootstrap in ASP.NET Core mit NuGet aktualisieren. Ich habe das benutzt:

Install-Package bootstrap -Version 4.0.0

Die Abhängigkeiten wurden hinzugefügt, aber wie füge ich sie jetzt meinem Projekt hinzu? Was ist der Pfad für lokale NuGet-Abhängigkeiten?

Installierte NuGet-Abhängigkeiten

.net asp.net-core nuget bootstrap-4 asp.net-core-2.0 Entwickler
quelle

3

BS4 sollte keine Bower-Unterstützung haben (Quelle: getbootstrap.com/docs/4.0/migration/#breaking )

Klooven

Ersetzen Sie [email protected] durch [email protected]: stackoverflow.com/questions/47985337/…

mrapi

1

Derzeit sollte dies die akzeptierte Antwort sein, die mit Libman am einfachsten ist: stackoverflow.com/a/53012140/578552

rfcdejong

Version 4.4.1 jetzt kompatibel mit NUGET.

Diego Venâncio

222

Wie bereits erwähnt, ist der Paketmanager Bower , der normalerweise für solche Abhängigkeiten in Anwendungen verwendet wurde, die nicht auf umfangreichen clientseitigen Skripten basieren, auf dem Weg nach draußen und empfiehlt aktiv, auf andere Lösungen umzusteigen:

..psst! Während Bower gewartet wird, empfehlen wir Garn und Webpack für neue Front-End-Projekte!

Obwohl Sie es jetzt noch verwenden können, hat Bootstrap auch angekündigt, die Unterstützung dafür einzustellen . Infolgedessen werden die integrierten ASP.NET Core-Vorlagen langsam bearbeitet, um sich auch davon zu entfernen.

Leider gibt es keinen klaren Weg vorwärts. Dies ist hauptsächlich auf die Tatsache zurückzuführen, dass Webanwendungen kontinuierlich weiter in die Clientseite verlagert werden und komplexe clientseitige Build-Systeme und viele Abhängigkeiten erfordern. Wenn Sie also so etwas erstellen, wissen Sie möglicherweise bereits, wie Sie dies lösen können, und Sie können Ihren vorhandenen Erstellungsprozess erweitern, um dort einfach auch Bootstrap und jQuery einzuschließen.

Es gibt jedoch immer noch viele Webanwendungen, die auf der Clientseite nicht so schwer sind, wobei die Anwendung immer noch hauptsächlich auf dem Server ausgeführt wird und der Server daher statische Ansichten bereitstellt. Bower hat dies zuvor gefüllt, indem es einfach gemacht wurde, clientseitige Abhängigkeiten ohne großen Aufwand zu veröffentlichen.

In der .NET-Welt haben wir auch NuGet und mit früheren ASP.NET-Versionen könnten wir NuGet auch verwenden, um einigen clientseitigen Abhängigkeiten Abhängigkeiten hinzuzufügen, da NuGet den Inhalt nur korrekt in unser Projekt einfügt. Leider .csprojbefinden sich die installierten Pakete mit dem neuen Format und dem neuen NuGet außerhalb unseres Projekts, sodass wir nicht einfach auf diese verweisen können.

Dies lässt uns einige Optionen, wie wir unsere Abhängigkeiten hinzufügen können:

Einmalige Installation

Dies tun derzeit die ASP.NET Core-Vorlagen, bei denen es sich nicht um einseitige Anwendungen handelt. Wenn Sie diese zum Erstellen einer neuen Anwendung verwenden, wwwrootenthält der Ordner einfach einen Ordner lib, der die Abhängigkeiten enthält:

Der Ordner wwwroot enthält den Ordner lib mit statischen Abhängigkeiten

Wenn Sie sich die aktuellen Dateien genau ansehen, können Sie sehen, dass sie ursprünglich bei Bower abgelegt wurden, um die Vorlage zu erstellen. Dies wird sich jedoch wahrscheinlich bald ändern. Die Grundidee ist, dass die Dateien einmal in den wwwrootOrdner kopiert werden , damit Sie sich darauf verlassen können.

Dazu können wir einfach der Einführung von Bootstrap folgen und die kompilierten Dateien direkt herunterladen . Wie auf der Download-Site erwähnt, beinhaltet dies nicht jQuery , daher müssen wir dies auch separat herunterladen. Es enthält jedoch Popper.js, wenn wir die bootstrap.bundleDatei später verwenden - was wir auch tun werden. Für jQuery können wir einfach eine einzelne "komprimierte Produktionsdatei" von der Download-Site abrufen (klicken Sie mit der rechten Maustaste auf den Link und wählen Sie "Link speichern unter ..." aus dem Menü).

So bleiben uns einige Dateien, die einfach extrahiert und in den wwwrootOrdner kopiert werden . Wir können auch einen libOrdner erstellen, um klarer zu machen, dass es sich um externe Abhängigkeiten handelt:

Der Ordner wwwroot enthält den Ordner lib mit unseren installierten Abhängigkeiten

Das ist alles, was wir brauchen. Jetzt müssen wir nur noch unsere _Layout.cshtmlDatei anpassen , um diese Abhängigkeiten einzuschließen. Dazu fügen wir dem folgenden Block hinzu <head>:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/css/bootstrap.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/lib/css/bootstrap.min.css" />
</environment>

Und der folgende Block ganz am Ende des <body>:

<environment include="Development">
    <script src="~/lib/js/jquery-3.3.1.js"></script>
    <script src="~/lib/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
    <script src="~/lib/js/jquery-3.3.1.min.js"></script>
    <script src="~/lib/js/bootstrap.bundle.min.js"></script>
</environment>

Sie können auch einfach die minimierten Versionen einfügen und die <environment>Tag-Helfer hier überspringen , um es ein bisschen einfacher zu machen. Aber das ist alles, was Sie tun müssen, um am Start zu bleiben.

Abhängigkeiten von NPM

Der modernere Weg, auch wenn Sie Ihre Abhängigkeiten auf dem neuesten Stand halten möchten, besteht darin, die Abhängigkeiten aus dem NPM-Paket-Repository abzurufen. Sie können hierfür entweder NPM oder Garn verwenden. In meinem Beispiel verwende ich NPM.

Zu Beginn müssen wir eine package.jsonDatei für unser Projekt erstellen , damit wir unsere Abhängigkeiten angeben können. Dazu tun wir dies einfach im Dialogfeld "Neues Element hinzufügen":

Neues Element hinzufügen: npm-Konfigurationsdatei

Sobald wir das haben, müssen wir es bearbeiten, um unsere Abhängigkeiten einzuschließen. Es sollte ungefähr so aussehen:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "bootstrap": "4.0.0",
    "jquery": "3.3.1",
    "popper.js": "1.12.9"
  }
}

Durch das Speichern führt Visual Studio bereits NPM aus, um die Abhängigkeiten für uns zu installieren. Sie werden im node_modulesOrdner installiert . Was also noch zu tun bleibt, ist, die Dateien von dort in unseren wwwrootOrdner zu bekommen. Dafür gibt es einige Möglichkeiten:

`bundleconfig.json` zur Bündelung und Minimierung

Wir können eine der verschiedenen Möglichkeiten verwenden, um a bundleconfig.jsonzum Bündeln und Minimieren zu verwenden, wie in der Dokumentation erläutert . Eine sehr einfache Möglichkeit besteht darin, einfach das NuGet-Paket BuildBundlerMinifier zu verwenden, mit dem automatisch eine Build-Aufgabe dafür eingerichtet wird.

Nach der Installation dieses Pakets müssen wir eine bundleconfig.jsonim Stammverzeichnis des Projekts mit den folgenden Inhalten erstellen :

[
  {
    "outputFileName": "wwwroot/vendor.min.css",
    "inputFiles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    "minify": { "enabled": false }
  },
  {
    "outputFileName": "wwwroot/vendor.min.js",
    "inputFiles": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/popper.js/dist/umd/popper.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ],
    "minify": { "enabled": false }
  }
]

Dadurch wird grundsätzlich konfiguriert, welche Dateien zu welchen kombiniert werden sollen. Und wenn wir bauen, können wir sehen, dass die vendor.min.cssund vendor.js.cssrichtig erstellt werden. Alles, was wir tun müssen, ist, unsere _Layouts.htmlerneut anzupassen , um diese Dateien einzuschließen:

<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />

<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>

Verwenden eines Task-Managers wie Gulp

Wenn wir uns ein bisschen mehr mit der clientseitigen Entwicklung befassen möchten, können wir auch damit beginnen, Tools zu verwenden, die wir dort verwenden würden. Zum Beispiel Webpack , ein sehr häufig verwendetes Build-Tool für wirklich alles. Wir können aber auch mit einem einfacheren Task-Manager wie Gulp beginnen und die wenigen notwendigen Schritte selbst ausführen.

Dazu fügen wir gulpfile.jsunserem Projektstamm ein mit folgenden Inhalten hinzu:

const gulp = require('gulp');
const concat = require('gulp-concat');

const vendorStyles = [
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
];
const vendorScripts = [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
];

gulp.task('build-vendor-css', () => {
    return gulp.src(vendorStyles)
        .pipe(concat('vendor.min.css'))
        .pipe(gulp.dest('wwwroot'));
});

gulp.task('build-vendor-js', () => {
    return gulp.src(vendorScripts)
        .pipe(concat('vendor.min.js'))
        .pipe(gulp.dest('wwwroot'));
});

gulp.task('build-vendor', gulp.parallel('build-vendor-css', 'build-vendor-js'));

gulp.task('default', gulp.series('build-vendor'));

Jetzt müssen wir auch unsere anpassen package.json, um Abhängigkeiten von gulpund zu haben gulp-concat:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "bootstrap": "4.0.0",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "jquery": "3.3.1",
    "popper.js": "1.12.9"
  }
}

Schließlich bearbeiten wir unsere .csproj, um die folgende Aufgabe hinzuzufügen, die sicherstellt, dass unsere Gulp-Aufgabe beim Erstellen des Projekts ausgeführt wird:

<Target Name="RunGulp" BeforeTargets="Build">
  <Exec Command="node_modules\.bin\gulp.cmd" />
</Target>

Wenn wir jetzt erstellen, wird die defaultGulp-Aufgabe ausgeführt, die die build-vendorAufgaben ausführt , die dann unsere erstellt vendor.min.cssund vendor.min.jsgenau wie zuvor. Nachdem _Layout.cshtmlwir unsere Einstellungen wie oben beschrieben vorgenommen haben, können wir jQuery und Bootstrap verwenden.

Während die anfängliche Einrichtung von Gulp etwas komplizierter ist als die bundleconfig.jsonoben beschriebene, haben wir jetzt die Node-Welt betreten und können beginnen, alle anderen coolen Tools dort zu nutzen. Es könnte sich also lohnen, damit zu beginnen.

Fazit

Während dies plötzlich viel komplizierter wurde als nur mit Bower, gewinnen wir mit diesen neuen Optionen auch viel Kontrolle. Zum Beispiel können wir jetzt entscheiden, welche Dateien tatsächlich im wwwrootOrdner enthalten sind und wie diese genau aussehen. Und wir können dies auch nutzen, um mit Node die ersten Schritte in die clientseitige Entwicklungswelt zu unternehmen, die zumindest ein wenig bei der Lernkurve helfen sollten .

Sack
quelle

1

Bei Verwendung der npm-Methode wurden Fehler wie "Ungefangener SyntaxError: Unerwarteter Token-Export" zurückgegeben. Um dies zu beheben, wechselte ich zur popper.js umd-Datei "node_modules / popper.js / dist / umd / popper.min.js". Ansonsten eine der besten Antworten, die ich je auf Stack gesehen habe, danke.

James Blake

2

@user Das klingt so, als ob Sie eine sehr alte Version von Node verwenden. Sie können die Version durch Ausführen sehen node -vund eine aktuelle Version hier auf nodejs.org abrufen

poke

62

LOL. Ich muss lachen oder ich werde weinen. Siebzehn Jahre .Net-Entwicklung mit der Tooling-Unterstützung von Visual Studio, und ist es soweit? Persönlich sehe ich nicht, wie dies ein Fortschritt ist. Wenn es so viel Arbeit kostet, einem Webprojekt Bootstrap-Stil hinzuzufügen, ist ein drastischer Fehler aufgetreten.

Camainc

11

@camainc Wenn überhaupt, dann beschuldigen Sie die Entwicklung des JavaScript-Ökosystems. Dies hat wirklich überhaupt nichts mit .NET oder Visual Studio zu tun. Die einfache Lösung besteht immer noch darin, die Dateien nur manuell herunterzuladen und sie dann Ihrem Webstamm hinzuzufügen. So hat es auch all die Jahre zuvor funktioniert. - Und für das, was es wert ist, arbeitet Microsoft an neuen VS-Tools, um diesen Prozess zu vereinfachen (und zu aktualisieren).

stupsen

3

@ ozzy432836, ich weiß, dass es kein Bootstrap-Problem ist, und ich habe es nie gesagt. Es ist ein allgemeines Entwicklungsproblem, bei dem anscheinend jeder dem nächsten neuen Framework nachjagt. Ich habe viele Veränderungen in meiner Karriere gesehen, aber nichts wie das, was in den letzten Jahren rund um Javascript passiert ist. Es war absolut verrückt zu beobachten, wie die Entwicklergemeinschaft ein neues Framework nach dem anderen auf den Kopf stellte. Ob JS der richtige Weg ist, ist die Jury noch nicht entschieden, insbesondere mit WASM und Projekten wie Blazor am Horizont.

Camainc

56

In diesem Zusammenhang scheint der LibMan-Ansatz für das Hinzufügen von Bootstrap am besten für meine Anforderungen geeignet zu sein. Ich mag es, weil es jetzt in Visual Studio 2017 (15.8 oder höher) integriert ist und eigene Dialogfelder hat.

Update 6/11/2020: Bootstrap 4.1.3 wird jetzt standardmäßig mit VS-2019.5 hinzugefügt (Dank an Harald S. Hanssen für die Benachrichtigung.)

Die Standardmethode, die VS zu Projekten hinzufügt, verwendet Bower, aber es sieht so aus, als ob es auf dem Weg nach draußen ist. In die Kopfzeile der Microsoft- Laubseite schreiben sie:

Das Folgen einiger Links führt zur Verwendung von LibMan mit ASP.NET Core in Visual Studio, wo gezeigt wird, wie Bibliotheken mithilfe eines integrierten Dialogfelds hinzugefügt werden können:

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektordner, in dem die Dateien hinzugefügt werden sollen. Wählen Sie "Hinzufügen"> "Client-seitige Bibliothek". Das Dialogfeld "Client-seitige Bibliothek hinzufügen" wird angezeigt: [Quelle: Scott Addie 2018 ]

Dann für Bootstrap einfach (1) das Unpkg auswählen, (2) "bootstrap @ .." eingeben. (3) Installieren. Danach möchten Sie nur noch überprüfen, ob alle Includes in der Datei _Layout.cshtml oder an anderen Stellen korrekt sind. Sie sollten so etwas wie href = "~ / lib / Bootstrap / dist / js / Bootstrap ..." )

Sunsetquest
quelle

1

Ich habe VS 4.7.02558 (Community Edition) und dies war die einfachste Option für mich. Ich habe es in praktischen Projekten verwendet, die für das Studium für die MS 70-486 (MVC) -Prüfung erstellt wurden. Daher kann ich nicht beantworten, wie effektiv dies für Projekte ist, die auf die Produktion ausgerichtet sind.

Ed Gibbs

2

Für mich war dies auch der einfachste Weg, das Zeug mit dem MS STANDARD TOOL zu installieren. Mit den Hinweisen in Ihrem Beitrag - ändern Sie den Anbieter in unpkg, geben Sie bootstrap @ 4 ein. Ich konnte installieren. Libman ist wirklich nicht intuitiv (in meinem Fall musste ich auch den. (Punkt) nach 4 eingeben, bevor die Pakete gezeigt wurden (ich dachte, libman funktioniert nicht in meiner Umgebung).

FredyWenger

2

Nur zur Erinnerung: Wenn Sie auf CdnJS nach Bootstrap suchen, beachten Sie, dass der Name Twitter-Bootstrap ist, wie er ursprünglich genannt wurde.

D. Rosado

1

In Visual Studio 2019 (spätestens bis zum 11. Juni 2020) - Die libman-Datei wird erstellt, aber das libman-Popup-Fenster wird nicht angezeigt.

Harald S. Hanssen

1

Ich habe LibMan in mehreren Projekten getestet und es ist wirklich der richtige Weg. Schade, dass die GUI nicht funktioniert, aber nach ein paar Versuchen ist sie einfach zu bedienen.

Harald S. Hanssen

18

Probieren Sie Libman aus , es ist so einfach wie Bower und Sie können wwwroot / lib / als Download-Ordner angeben.

ysabih
quelle

1

Noch nicht in der Version von VS2017: UPDATE: 24. Mai 2018 - Es sieht so aus, als hätte LibMan es nicht in die endgültige Version von 15.7 geschafft. Es ist in der Vorschau für 15.8.x

kristianp

1

Sieht so aus, als ob dies jetzt mit der endgültigen Version 15.8 herauskommt.

Kirk Larkin

Es ist jetzt in VS2017 V 15.8 verfügbar und viel einfacher als die akzeptierte Antwort

Jemsworld

10

Was macht der Trick für mich:

1) Klicken Sie mit der rechten Maustaste auf wwwroot> Hinzufügen> Client Side Library

2) Geben Sie "bootstrap" in das Suchfeld ein

3) Wählen Sie "Bestimmte Dateien auswählen".

4) Scrollen Sie nach unten und wählen Sie einen Ordner aus. In meinem Fall habe ich "Twitter-Bootstrap" gewählt

5) Überprüfen Sie "css" und "js"

6) Klicken Sie auf "Installieren".

Ein paar Sekunden später habe ich alle wwwroot Ordner. Machen Sie dasselbe für alle clientseitigen Pakete, die Sie hinzufügen möchten.

Auguste
quelle

6

Libman scheint das derzeit von Microsoft bevorzugte Tool zu sein. Es ist in Visual Studio 2017 (15.8) integriert.

In diesem Artikel wird beschrieben, wie Sie es verwenden und sogar eine vom Erstellungsprozess durchgeführte Wiederherstellung einrichten.

In der Bootstrap-Dokumentation erfahren Sie, welche Dateien Sie in Ihrem Projekt benötigen.

Das folgende Beispiel sollte als Konfiguration für libman.json funktionieren.

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
  {
    "library": "[email protected]",
    "destination": "wwwroot/lib/bootstrap",
    "files": [
    "js/bootstrap.bundle.js",
    "css/bootstrap.min.css"
    ]
  },
  {
    "library": "[email protected]",
    "destination": "wwwroot/lib/jquery",
    "files": [
      "jquery.min.js"
    ]
  }
]

}}

Marcel Melzig
quelle

Vielen Dank, ich habe ein Pro ASP.NET Core MVC 2-Buch gelesen, in dem ich aufgefordert wurde, Bower zu verwenden, das mittlerweile veraltet ist. Ich habe eine Weile gesucht, bevor mir klar wurde, dass Sie einfach mit der rechten Maustaste auf Ihr Projekt klicken und Hinzufügen -> Clientseitige Bibliothek auswählen können. Und das nutzt libman. Es ist alles eingebaut.

TxRegex

4

Wir verwenden Bootstrap 4 im asp.net-Kern, verweisen jedoch mit der Erweiterung "Package Installer" auf die Bibliotheken von "npm" und stellen fest, dass dies besser ist als Nuget für Javascript / CSS-Bibliotheken.

Wir verwenden dann die Erweiterung "Bundler & Minifier", um die relevanten Dateien für die Verteilung (aus dem Ordner npm node_modules, der sich außerhalb des Projekts befindet) nach Belieben in wwwroot für die Entwicklung / Bereitstellung zu kopieren.

Mark Redman
quelle

4

Leider fällt es Ihnen schwer, mit NuGet Bootstrap (oder die meisten anderen JavaScript / CSS-Frameworks) in einem .NET Core-Projekt zu installieren. Wenn Sie sich die NuGet-Installation ansehen, werden Sie darauf hingewiesen, dass sie nicht kompatibel ist:

Wenn Sie wissen müssen, wo sich lokale Paketabhängigkeiten befinden, befinden sie sich jetzt in Ihrem lokalen Profilverzeichnis. dh%userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts .

Ich schlage jedoch vor, zu npm oder bower zu wechseln - wie in Saineshwars Antwort.

Balah
quelle

2

BS4 ist jetzt unter .NET Core 2.2 verfügbar . Auf dem SDK 2.2.105 x64-Installationsprogramm sicher. Ich verwende Visual Studio 2017 damit. So weit so gut für neue Webanwendungsprojekte.

klewis
quelle

2

Warum nicht einfach ein CDN verwenden? Wenn Sie den Code von BS nicht bearbeiten müssen, müssen Sie nur auf die Codes in CDN verweisen.

Siehe BS 4 CDN hier:

https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

Am Ende der Seite.

Kante
quelle

1

Durch die Verwendung eines CDN wird eine Laufzeitabhängigkeit hinzugefügt. Wenn das CDN ausfällt, fällt auch Ihre Website aus. Dies ist ein Sicherheitsproblem, da jeder, der die CDN kontrolliert, beliebte Dateien ändern und Skripte in Ihre Site einfügen kann. Dies ist auch ein Datenschutzproblem, da der Browser des Benutzers die Dateien von einem Server eines Drittanbieters und nicht von Ihrem eigenen Server anfordert.

TxRegex

3

@TxRegex Irgendwann wurde tatsächlich empfohlen, dass Verweise auf CDN und nicht auf den Server einer Webanwendung erfolgen. weil der Browser eines Benutzers wahrscheinlich bereits eine beliebte Bibliothek wie Bootstrap zwischengespeichert hat, während er andere Websites durchsucht hat. Aber was auch immer ...

Joedotnot

0

Verwenden Sie die nmp-Konfigurationsdatei (fügen Sie sie Ihrem Webprojekt hinzu) und fügen Sie dann die erforderlichen Pakete auf die gleiche Weise hinzu, wie wir es mit bower.json getan haben, und speichern Sie sie. Visual Studio wird es herunterladen und installieren. Sie finden das Paket unter dem NMP-Knoten Ihres Projekts.

Alexandre le Grand
quelle