Comment utiliser Bootstrap 4 dans ASP.NET de Base
Je veux mettre à jour Bootstrap dans ASP.NET de Base avec NuGet. J'ai utilisé ceci:
Install-Package bootstrap -Version 4.0.0
Il fait ajouter les dépendances, mais comment puis-je ajouter à mon projet maintenant? Qu'est-ce que le chemin d'accès local NuGet dépendances?
- BS4 ne devriez pas avoir de Verdure de soutien (source: getbootstrap.com/docs/4.0/migration/#breaking)
- Remplacer [email protected] avec [email protected]: stackoverflow.com/questions/47985337/...
Vous devez vous connecter pour publier un commentaire.
Comme déjà mentionné, le gestionnaire de paquets Bower, qui est habituellement utilisé pour les dépendances de ce genre dans l'application, qui ne reposent pas sur des gros script côté client, est sur le moyen de sortir et activement à recommander pour passer à d'autres solutions:
Ainsi, bien que vous pouvez toujours l'utiliser dès maintenant, Bootstrap a également annoncé déposer le support. En conséquence, le haut-ASP.NET Base de modèles sont en train d'être modifié pour s'en éloigner trop.
Malheureusement, il n'y a pas de voie claire vers l'avant. Ceci est principalement dû au fait que les applications web sont en permanence d'aller plus loin dans le côté client, complexe nécessitant une côté client, systèmes de construction et de nombreuses dépendances. Donc, si vous construisez quelque chose comme ça, vous savez peut être déjà, comment résoudre ce problème alors, et vous pouvez élargir votre processus de génération de simplement inclure également Bootstrap et jQuery là.
Mais il y a encore de nombreuses applications web qui ne sont pas lourd sur le côté client, lorsque l'application s'exécute principalement sur le serveur et le serveur sert des vues statiques comme un résultat. Bower déjà rempli ce faire, il est facile de simplement publier côté client dépendances sans trop d'un processus.
Dans le .NET monde nous avons également NuGet et avec les précédentes ASP.NET versions, nous pourrions utiliser NuGet ainsi ajouter des dépendances à certains côté client dépendances depuis NuGet serait juste de placer le contenu dans notre projet correctement. Malheureusement, avec la nouvelle
.csproj
format et la nouvelle NuGet, les paquets installés sont situés à l'extérieur de notre projet, nous ne pouvons pas simplement référence à ceux-ci.Ce qui nous laisse avec quelques options sur la manière d'ajouter nos dépendances:
Un temps d'installation
C'est ce que l'ASP.NET Base de modèles, qui ne sont pas sur une seule page des applications, sont en train de faire. Lorsque vous utilisez ceux-ci pour créer une nouvelle application, le
wwwroot
dossier contient un dossierlib
qui contient les dépendances:Si vous regardez de près les fichiers actuellement, vous pouvez voir qu'ils ont été placés là avec Bower pour créer le modèle, mais qui est susceptible de changer rapidement. L'idée de base est que les fichiers sont copiés une fois à la
wwwroot
dossier de sorte que vous pouvez compter sur eux.Pour ce faire, il suffit de suivre Bootstrap introduction et télécharger les fichiers compilés directement. Comme mentionné sur le site de téléchargement, cela n'inclut pas jQuery, nous avons donc besoin de les télécharger séparément trop; il ne contiennent Popper.js mais si nous choisissons d'utiliser le
bootstrap.bundle
fichier plus tard—ce que nous allons faire. Pour jQuery, nous pouvons simplement obtenir un seul comprimé, production de” fichier de le site de téléchargement.Ce qui nous laisse avec quelques fichiers qui seront il suffit de l'extraire et de copier dans le
wwwroot
dossier. Nous pouvons également faire unlib
dossier pour le rendre plus clair que ce sont des dépendances externes:C'est tout ce dont nous avons besoin, alors maintenant nous avons juste besoin de régler nos
_Layout.cshtml
fichier à inclure ces dépendances. Pour cela, nous avons ajouter le bloc suivant à la<head>
:Et le bloc suivant à la fin de la
<body>
:Vous pouvez aussi inclure le minifiés versions et passez la
<environment>
tag assistants ici pour le rendre un peu plus simple. Mais c'est tout ce que vous devez faire pour vous garder de départ.Dépendances de MNP
La plus moderne, aussi si vous souhaitez conserver vos dépendances mises à jour, serait d'obtenir les dépendances du mécanisme national de prévention dépôt de paquets. Vous pouvez utiliser NPM ou de la Laine pour cela; dans mon exemple, je vais utiliser NPM.
Pour commencer, nous avons besoin de créer un
package.json
fichier pour notre projet, nous pouvons spécifier nos dépendances. Pour ce faire, il nous suffit de faire “Ajouter un Nouvel Élément” dialogue:Une fois que nous avons cela, nous avons besoin de le modifier pour inclure nos dépendances. Il quelque chose devrait ressembler à ceci:
Par l'épargne, Visual Studio va déjà NPM pour installer les dépendances pour nous. Ils seront installés dans la
node_modules
dossier. Donc ce qui reste à faire est de récupérer les fichiers à partir de là dans notrewwwroot
dossier. Il ya quelques options pour ce faire:bundleconfig.json
pour le regroupement et la minificationNous pouvons utiliser l'une des différentes façons de consommer un
bundleconfig.json
pour le regroupement et la minification, comme expliqué dans la documentation. Un moyen très simple est d'utiliser simplement le BuildBundlerMinifier package NuGet qui établit automatiquement une tâche de génération de cette.Après l'installation de ce package, nous avons besoin de créer un
bundleconfig.json
à la racine du projet avec le contenu suivant:Fondamentalement configure les fichiers à combiner dans ce. Et quand nous construisons, nous pouvons voir que la
vendor.min.css
etvendor.js.css
sont créés correctement. Donc, tout ce que nous devons faire, c'est régler nos_Layouts.html
nouveau pour inclure ces fichiers:À l'aide d'un gestionnaire de tâches comme Gulp
Si nous voulons aller un peu plus dans le développement côté client, nous pouvons aussi commencer à utiliser les outils que nous utilisons là. Par exemple Webpack qui est très couramment utilisée outil de construction pour vraiment tout. Mais on peut aussi commencer avec un simple gestionnaire de tâches comme Gulp et faire les quelques étapes nécessaires nous-mêmes.
Pour cela, nous ajoutons une
gulpfile.js
dans notre racine du projet, avec le contenu suivant:Maintenant, nous avons également besoin d'ajuster nos
package.json
pour avoir des dépendances surgulp
etgulp-concat
:Enfin, nous avons modifier notre
.csproj
pour ajouter la tâche suivante qui permet de s'assurer que nos Gulp l'exécution de la tâche lorsque nous construisons le projet:Maintenant, quand nous construisons la
default
Gulp l'exécution de la tâche, qui gère lebuild-vendor
tâches, qui établit alors notrevendor.min.css
etvendor.min.js
comme nous l'avons fait avant. Ainsi, après le réglage de notre_Layout.cshtml
comme ci-dessus, nous pouvons faire usage de jQuery et Bootstrap.Tandis que la configuration initiale de Gulp est un peu plus compliqué que le
bundleconfig.json
ci-dessus, nous avons maintenant ont saisi le Nœud du monde et peut commencer à faire usage de tous les autres outils sympas là. Il pourrait donc être intéressant de commencer par cela.Conclusion
Tout ce soudainement devenu beaucoup plus compliqué qu'avec juste l'aide de Verdure, nous faisons également de gagner beaucoup de contrôle avec ces nouvelles options. Par exemple, nous pouvons maintenant décider quels fichiers sont inclus dans le
wwwroot
dossier et comment ces exactement ressembler. Et on peut aussi l'utiliser pour faire le premier se déplace dans le développement côté client monde, avec Nœud qui devrait au moins aider un peu avec la courbe d'apprentissage.node -v
, et obtenir une version actuelle ici sur nodejs.org_ViewStart
et_ViewImports
de garder MVC fonctionne parfaitement, mais en dehors de cela, vous pouvez faire ce que vous voulez. J'ai l'habitude de remplacer l'ensemble de la mise en page avec mes propres trucs et complètement remplacer tout ce qui est à l'intérieur dewwwroot
. J'ai aussi supprimer le<environment>
les commutateurs de la mise en page depuis que j'ai l'habitude de ne pas travailler sur des projets qui prennent l'avantage sur les différentes sources de ces fichiers. Je viens d'héberger mes fichiers dans lewwwroot
directement.wwwroot
dossier. Il est donc possible que Visual Studio ne permet pas de détecter les fichiers lorsqu'ils sont automatiquement placés là lors de la construction. Avez-vous essayer d'exécuter des scripts (pour avoir les fichiers déplacés là-bas), puis de redémarrer Visual Studio?wwwroot
dossier. Et puis de vérifier si le redémarrage de Visual Studio est assez pour lui faire ramasser les règles CSS..min.css
les fichiers. Donc, si vous changez legulpfile.js
(ou lebundleconfig.json
) pour créer unvendor.css
(au lieu devendor.min.css
), puis doit de travail. Redémarrer Visual Studio pourrait encore être nécessaire.vendor.min.js
etvendor.min.css
àvendor.js
etvendor.css
. Le redémarrage de la SV n'est pas nécessaire, en fait, simplement de reconstruire la solution. Je vous remercie beaucoup.Se pencher sur cette question, il semble que le LibMan approche qui fonctionne le mieux pour mes besoins avec l'ajout de Bootstrap. Je l'aime parce qu'il est à présent intégré dans Visual Studio 2017(15.8 ou plus tard) et a ses propres boîtes de dialogue.
La méthode par défaut VS ajoute à des projets utilise Bower, mais on dirait qu'il est sur le départ. Dans l'en-tête de Microsoft bower page, ils écrivent:
À la suite d'un couple de liens conduisent à Utilisation LibMan avec ASP.NET de Base dans Visual Studio où il montre comment les bibliothèques peuvent être ajoutés à l'aide d'un construit-dans la boîte de Dialogue:
Alors pour bootstrap juste (1) sélectionnez le unpkg, (2) tapez "bootstrap@.." (3) Installer. Après cela, vous voulez juste pour vérifier tous les inclut dans les _Layout.cshtml ou d'autres lieux sont corrects. Ils devraient être quelque chose comme href="~/lib/bootstrap/dist/js/bootstrap...")
Essayer Libman, c'est aussi simple que de Verdure et vous pouvez spécifier wwwroot/lib/comme le dossier de téléchargement.
Quoi le truc pour moi c'est:
1) clic Droit sur wwwroot > Ajouter > Côté Client Bibliothèque
2) Tapé "bootstrap" sur la boîte de recherche
3) Sélectionnez "sélectionner les fichiers"
4) faites Défiler vers le bas et sélectionnez un dossier. Dans mon cas j'ai choisi "twitter bootstrap"
5) cochez la Case "css" et "js"
6) Cliquez Sur "Installer".
Quelques secondes plus tard, je les ai tous dossier wwwroot. Faire de même pour tous les côté client, packages que vous souhaitez ajouter.
Malheureusement, vous allez avoir un moment difficile de l'utiliser NuGet pour installer Bootstrap (ou la plupart des autres JavaScript/CSS cadres) sur une .NET de Base du projet. Si vous regardez la NuGet l'installer, il vous dit qu'il est incompatible:
si vous devez savoir où les locaux les dépendances des paquets sont, ils sont maintenant dans votre répertoire de profil. c'est à dire
%userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts
.Cependant, je suggère de commutation de mnp, ou bower - comme dans Saineshwar de réponse.
Libman semble être l'outil privilégié par Microsoft maintenant. Il est intégré dans Visual Studio 2017(15.8).
Cet article décrit comment l'utiliser et même comment mettre en place une restauration effectuée par le processus de construction.
Bootstrap, documentation vous indique quels fichiers vous avez besoin dans votre projet.
L'exemple suivant devrait fonctionner comme une configuration pour libman.json.
}
Nous utiliser bootstrap 4 dans asp.net base de référence, mais les bibliothèques de "mnp" en utilisant le "programme d'installation du Package" extension et trouvé que c'était mieux que Nuget pour Javascript/CSS bibliothèques.
Nous utilisons ensuite la "Bundler & Minifier" extension de copier les fichiers pertinents pour la distribution (à partir de la ngp dossier node_modules, qui se trouve en dehors du projet) dans wwwroot comme on les aime pour le développement/déploiement.
BS4 est maintenant disponible sur .NET Core 2.2. Sur le SDK 2.2.105 x64 installer pour vous. Je suis en cours d'exécution Visual Studio 2017 avec elle. C'est très bien pour les nouveaux projets d'application web.
Pourquoi ne pas simplement utiliser un CDN? Sauf si vous avez besoin de modifier le code de BS, alors vous avez juste besoin de faire référence à des codes de la CAN.
Voir BS 4 CA Ici:
https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
Au bas de la page.
Utilisation nmp fichier de configuration (ajouter à votre projet web), puis ajouter les paquets nécessaires de la même manière que nous avons fait à l'aide de la charmille.json et économisez. Visual studio va télécharger et l'installer. Vous trouverez le paquet dans la nmp nœud de votre projet.