wake-up-neo.com

So verwenden Sie Bootstrap 4 in ASP.NET Core

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? Wie ist der Pfad für lokale NuGet-Abhängigkeiten?

Installed NuGet dependencies

68
developer

Wie bereits erwähnt, ist der Paketmanager Bower , der normalerweise für Abhängigkeiten wie diese in Anwendungen verwendet wurde, die nicht auf umfangreichem clientseitigen Scripting beruhen, auf dem Weg nach draußen und aktiv empfehlen, zu anderen Lösungen zu wechseln:

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

Also, obwohl Sie es jetzt noch verwenden können, Bootstrap hat auch angekündigt, nterstützung für es fallen zu lassen . Folglich sind die integrierten ASP.NET Core-Vorlagen wird langsam bearbeitet, um sich auch davon zu entfernen.

Leider gibt es keinen klaren Weg nach vorne. Dies ist hauptsächlich auf die Tatsache zurückzuführen, dass Webanwendungen immer weiter in die Client-Seite vordringen und komplexe clientseitige Build-Systeme und viele Abhängigkeiten erfordern. Wenn Sie also so etwas erstellen, wissen Sie möglicherweise bereits, wie Sie dieses Problem lösen können, und Sie können Ihren vorhandenen Erstellungsprozess erweitern, indem Sie einfach Bootstrap und jQuery dort einfügen.

Es gibt jedoch immer noch viele Webanwendungen, die auf der Clientseite nicht so umfangreich sind. Die Anwendung wird jedoch hauptsächlich auf dem Server ausgeführt, und der Server stellt daher statische Ansichten bereit. Bower füllte dies zuvor, indem es einfach machte, clientseitige Abhängigkeiten zu veröffentlichen, ohne dass dies ein aufwändiger Prozess wäre.

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

Dies lässt uns ein paar Möglichkeiten, 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, enthält der Ordner wwwroot einfach einen Ordner lib, der die Abhängigkeiten enthält:

wwwroot folder contains lib folder with static dependencies

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

Folgen Sie dazu einfach der Einführung von Bootstrap und laden Sie die kompilierten Dateien herunter direkt. Wie auf der Download-Site erwähnt, ist jQuery nicht enthalten, daher müssen wir das auch separat herunterladen. es enthältPopper.js allerdings, wenn wir später die Datei bootstrap.bundle verwenden - was wir tun werden. Für jQuery können wir einfach eine einzelne „komprimierte Produktionsdatei“ von der Download-Site abrufen.

Dies lässt uns ein paar Dateien übrig, die einfach extrahiert und in den Ordner wwwroot kopiert werden. Wir können auch einen lib -Ordner erstellen, um zu verdeutlichen, dass es sich um externe Abhängigkeiten handelt:

wwwroot folder contains lib folder with our installed dependencies

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

<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 nur die verkleinerten Versionen einschließen 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

Die modernere Möglichkeit, 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 dafür entweder NPM oder Yarn verwenden. In meinem Beispiel verwende ich NPM.

Zunächst müssen wir eine package.json - Datei für unser Projekt erstellen, damit wir unsere Abhängigkeiten angeben können. Dazu machen wir das einfach über den Dialog „Add New Item“:

Add New Item: npm Configuration file

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

Beim Speichern führt Visual Studio bereits NPM aus, um die Abhängigkeiten für uns zu installieren. Sie werden im Ordner node_modules Installiert. Nun müssen Sie die Dateien von dort in unseren Ordner wwwroot kopieren. Hierfür gibt es einige Möglichkeiten:

bundleconfig.json Zum Bündeln und Minimieren

Es gibt verschiedene Möglichkeiten, einen bundleconfig.json Für die Bündelung und Minimierung zu verwenden, wie in die Dokumentation erläutert. Eine sehr einfache Möglichkeit besteht darin, einfach das BuildBundlerMinifier NuGet-Paket zu verwenden, das automatisch eine Build-Aufgabe dafür erstellt.

Nach der Installation dieses Pakets müssen wir im Stammverzeichnis des Projekts einen bundleconfig.json Mit folgendem Inhalt 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 }
  }
]

Dies konfiguriert im Grunde, welche Dateien in was kombiniert werden sollen. Und wenn wir bauen, können wir sehen, dass vendor.min.css Und vendor.js.css Korrekt erstellt wurden. Alles, was wir tun müssen, ist, unseren _Layouts.html Erneut 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 Sie einen Task-Manager wie Gulp

Wenn wir uns etwas mehr der clientseitigen Entwicklung widmen möchten, können wir auch damit beginnen, Tools zu verwenden, die wir dort verwenden würden. Zum Beispiel Webpack das ist 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 erforderlichen Schritte selbst ausführen.

Dazu fügen wir unserem Projektstamm ein gulpfile.js Mit folgendem Inhalt 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 unseren package.json Anpassen, um Abhängigkeiten von gulp und gulp-concat Zu haben:

{
  "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 unseren .csproj, Um die folgende Aufgabe hinzuzufügen, die sicherstellt, dass unsere Gulp-Aufgabe ausgeführt wird, wenn wir das Projekt erstellen:

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

Wenn wir jetzt erstellen, wird die Gulp-Task default ausgeführt, die die Tasks build-vendor Ausführt, die dann unsere Tasks vendor.min.css Und vendor.min.js Wie zuvor erstellen . Nachdem wir also unseren _Layout.cshtml Wie oben eingestellt haben, können wir jQuery und Bootstrap verwenden.

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

Fazit

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

184
poke

Diesbezüglich scheint es, als würde der LibMan-Ansatz am besten zu meinen Anforderungen passen, wenn ich Bootstrap hinzufüge. Ich mag es, weil es jetzt in Visual Studio 2017 (15.8 oder höher) integriert ist und eigene Dialogfelder hat.

Die Standardmethode, die VS Projekten hinzufügt, verwendet Bower. In der Kopfzeile von Microsofts Bower Seite schreiben sie: Bower is maintained only.Recommend using LibManager

Die folgenden Links führen zu Verwenden Sie LibMan mit ASP.NET Core in Visual Studio wo es zeigt wie Libs über einen eingebauten Dialog 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"> "Clientseitige Bibliothek". Das Dialogfeld "Clientseitige Bibliothek hinzufügen" wird angezeigt: [source: Scott Addie 2018 ]

enter image description here

Dann wählen Sie für bootstrap nur (1) das Unpkg aus, (2) geben Sie "bootstrap @ .." ein _Layout.cshtml oder andere Stellen sind korrekt. Sie sollten etwa href = "~/lib/bootstrap/dist/js/bootstrap ..." sein )

33
Sunsetquest

Versuchen Sie Libman , es ist so einfach wie Bower und Sie können wwwroot/lib/als Downloadordner angeben. 

14
ysabih

Leider wird es für NuGet schwierig sein, Bootstrap (oder die meisten anderen JavaScript/CSS-Frameworks) in einem .NET Core-Projekt zu installieren. Wenn Sie sich die NuGet-Installation ansehen, wird Ihnen mitgeteilt, dass sie nicht kompatibel ist:

 enter image description here

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

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

3
Balah

Wir verwenden bootstrap 4 in asp.net core, referenzieren jedoch die Bibliotheken von "npm" mit der Erweiterung "Package Installer" und haben festgestellt, dass dies für JavaScript/CSS-Bibliotheken besser ist als Nuget.

Anschließend verwenden wir 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) in wwwroot zu kopieren, je nach Wunsch für die Entwicklung/Bereitstellung.

3
Mark Redman

Was macht der Trick für mich ist:

1) Klicken Sie mit der rechten Maustaste auf wwwroot> Add> 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) "css" und "js" ankreuzen

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.

1
Auguste

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

1
klewis

Sie sollten sich auch darüber im Klaren sein, dass Ihre Navigationsleiste und Ihr Karussell nach dem Upgrade auf Bootstrap 4 seltsam aussehen werden. Sie müssen die Navigationsleisten-Klassen und -Elemente in _Layout.cshtml entsprechend der neuen Vorgehensweise von Bootstrap 4 aktualisieren es.

Siehe Bootstrap 4 Navbar-Dokumentation .

Warum nicht einfach einen CDN verwenden? Sofern 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.

0
Edge

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

Dieser Artikel beschreibt, wie man es verwendet und wie man eine Wiederherstellung einrichtet, die vom Build-Prozess ausgeführt wird.

Bootstraps Dokumentation gibt an, 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"
    ]
  }
]

}

0
Marcel Melzig

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

0