Tutoriel bootstrap MVC [Eng]

Problème à signaler:

Télécharger



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Tutoriel bootstrap MVC [Eng]

...

1 Premiers pas avec ASP.NET

MVC et Bootstrap En tant que développeurs, il peut être difficile de créer de belles interfaces utilisateur à partir de zéro lorsque vous utilisez HTML et CSS. Cela est particulièrement difficile lorsque les développeurs ont des années d'expérience en développement d'applications Windows Forms. Microsoft a introduit Web Forms pour résumer la complexité de la création de sites Web pour les développeurs Windows Forms et pour faciliter le passage de Windows Forms au Web. En conséquence, il était très difficile pour les développeurs Web Forms de passer à ASP.NET MVC et encore plus difficile pour Développeurs Windows Forms. Twitter

Bootstrap est un ensemble de composants stylisés, de plug-ins et une grille de présentation prenant en charge les tâches les plus ardues. Microsoft a inclus Bootstrap dans tous les modèles de projet ASP.NET MVC depuis 2013. Dans l'exemple de projet, nous allons commencer par créer un nouveau projet ASP.NET MVC en utilisant le modèle de projet Visual Studio MVC standard ou en démarrant avec un projet MVC vide. et en ajoutant les fichiers nécessaires selon nos besoins.

Dans ce chapitre, nous aborderons les sujets suivants:

  • Les fichiers inclus dans la distribution Bootstrap
  • Comment créer un site ASP.NET MVC à l'aide du modèle de projet Visual Studio standard et de Bootstrap
  • Comment créer un site ASP.NET MVC vide et ajouter les fichiers Bootstrap manuellement
  • Comment créer un fichier Layout qui référence les fichiers Bootstrap
  • Ajouter des fichiers Bootstrap en utilisant NuGet
  • Améliorer les performances du site avec le groupement et la minification

La distribution Bootstrap

Avant de pouvoir démarrer avec Bootstrap, nous devons d'abord télécharger ses fichiers source.

Au moment de la rédaction de ce livre, Bootstrap était à la version 3.1.1. Vous pouvez télécharger la dernière version à partir de http://getbootstrap.com.

L'archive zip contient les trois dossiers suivants:

  • css
  • les polices
  • js

Feuilles de style bootstrap (le dossier css)

Ne vous inquiétez pas de la quantité de fichiers contenus dans le dossier css. Ce dossier contient quatre fichiers .css et deux fichiers .map. Nous aurions seulement besoin d'inclure le fichier bootstrap.css dans notre projet pour que les styles Bootstrap soient appliqués à nos pages. Le fichier bootstrap.min.css est simplement une version détaillée du fichier susmentionné. Les fichiers .map peuvent être ignorés pour le projet que nous allons créer. Ces fichiers sont utilisés comme un type de symbole de débogage (similaire aux fichiers .pdb de Visual Studio), qui permettent aux développeurs d’éditer en direct leurs fichiers source de préprocesseur, ce qui dépasse le cadre de ce manuel.

Polices d'amorçage (le dossier des polices)

Bootstrap utilise Font Awesome pour afficher divers icônes et glyphes sur des sites Bootstrap.

Font Awesome a été spécialement conçu pour Bootstrap et le dossier Polices contient les quatre formats de fichiers de police suivants:

  • OpenType intégré (glyphicons-halflings-regular.eot)
  • Graphiques vectoriels évolutifs (glyphicons-halflings-regular.svg)
  • Police TrueType (glyphicons-halflings-regular.ttf)
  • Format de police ouvert sur le Web (glyphicons-halflings-regular.woff)

C'est une bonne idée d'inclure tous ces fichiers dans votre projet Web, car cela permettra à votre site d'afficher correctement les polices dans différents navigateurs.

Le format de police EOT est requis pour Internet Explorer 9 et versions ultérieures.

TTF est l'ancien format de police traditionnel et WOFF est une forme comprimée de polices TTF. Si vous devez uniquement prendre en charge Internet Explorer 8 et versions ultérieures, iOS 4 et versions ultérieures, ainsi que Android, il vous suffira d'inclure la police WOFF.

Fichiers d'amorçage JavaScript (le dossier js)

Le dossier js contient deux fichiers. Tous les plugins Bootstrap sont contenus dans le fichier bootstrap.js. Le fichier bootstrap.min.js est simplement une version agrandie du fichier susmentionné. Avant d'inclure le fichier dans votre projet, assurez-vous de disposer d'une référence à la bibliothèque jQuery car tous les plug-in Bootstrap nécessitent jQuery. Le modèle de projet par défaut ajoute automatiquement la bibliothèque jQuery à votre projet et crée un ensemble pour celle-ci. Le bundle jQuery sera inclus dans vos pages si vous avez la ligne de code suivante dans votre vue:

@ Scripts.Render ("~ / bundles / jquery")

Téléchargement de l'exemple de code Vous pouvez télécharger les exemples de fichiers de code de tous les livres Packt que vous avez achetés sur votre compte à l'adresse http://www.packtpub.com. Si vous avez acheté ce livre ailleurs, vous pouvez visiter http: // www. packtpub.com/support et inscrivez-vous pour que les fichiers vous soient envoyés directement par courrier électronique.

La structure du dossier Bootstrap

La structure du dossier décompressé pour Bootstrap ressemblera à la capture d'écran suivante:

Utilisation de Bootstrap avec un site créé avec le modèle de projet Visual Studio standard

À partir de Visual Studio 2013, lors de la création d'un projet ASP.NET, vous ne pouvez choisir qu'un seul modèle de projet, à savoir le modèle de projet d'application Web ASP.NET, comme illustré dans la capture d'écran suivante:

Dans la boîte de dialogue Nouveau projet ASP.NET, vous avez le choix de sélectionner le type d'application Web ASP.NET que vous souhaitez créer. Pour créer une application Web ASP.NET MVC utilisant Bootstrap pour son style et sa présentation, sélectionnez le modèle MVC. Vous remarquerez que la case à cocher MVC est automatiquement sélectionnée, comme illustré dans la capture d'écran suivante:

Tutoriel bootstrap MVC [Eng]

Cliquez sur le bouton OK pour terminer la création du projet MVC dans Visual Studio. Vous remarquerez que le modèle de projet ajoute automatiquement un certain nombre de packages NuGet à votre projet, y compris le package Bootstrap NuGet.

Examen de la structure de projet MVC par défaut

Le modèle de projet par défaut ajoute tous les fichiers Bootstrap nécessaires décrits précédemment, bien qu'il n'utilise pas la même convention de dénomination de dossier que la distribution Bootstrap par défaut. La structure de projet par défaut ressemblera à la capture d'écran suivante:

Le dossier de contenu

Le dossier Content contient les fichiers bootstrap.css et bootstrap.min.css, ainsi qu'une feuille de style appelée Site.css. Ce fichier est utilisé pour appliquer un style supplémentaire par-dessus les styles par défaut fournis par Bootstrap, mais également pour spécifier les styles à utiliser pour le plug-in de validation jQuery requis par ASP.NET MVC pour la validation de formulaire. Par exemple, la CSS suivante met en surbrillance un élément d’entrée de couleur rougeâtre et dessine une bordure autour de cet élément si la validation de ce champ échoue:

.field-validation-error {

 couleur: # b94a48;

}

.field-validation-valid {

 affichage: aucun;

}

input.input-validation-error {

 bordure: solide 1px # b94a48;

}

input [type = "case à cocher"]. input-validation-error {

 bordure: 0 aucune;

}

.validation-summary-errors {

 couleur: # b94a48;

}

.validation-summary-valid {

 affichage: aucun;

}

Le dossier des polices

Le dossier Polices contient la police Glyphicon dans tous les formats nécessaires.

Le dossier Scripts

Le dossier Scripts contient un certain nombre de scripts. Plus particulièrement pour ce livre, il contient les fichiers JavaScript bootstrap.js et bootstrap.min.js. Le modèle de projet ASP.NET MVC par défaut ajoute également des fichiers normalisés et normalisés pour les bibliothèques et plug-ins JavaScript suivants:

  • jQuery
  • plugin de validation jQuery
  • Bibliothèque de support de validation jQuery et jQuery pour une validation non intrusive
  • Modernisation
  • Répondre JS

Visual Studio active intelliSense pour jQuery, Bootstrap et Modernizr et répond en ajoutant le fichier _reference.js au dossier Scripts. C'est une fonctionnalité très utile lorsque vous travaillez avec JavaScript et qui vaut la peine d'être utilisée lorsque vous travaillez avec les composants Bootstrap. La plupart de ces bibliothèques et fichiers vont au-delà de la portée de ce livre, mais nous en aborderons quelques-uns au fur et à mesure de notre progression.

Création d'un site ASP.NET MVC vide et ajout de Bootstrap manuellement

La structure de projet par défaut est un bon début pour tout projet ASP.NET MVC, mais pour l'exemple de projet que nous allons construire tout au long de ce livre, nous allons créer un site ASP.NET MVC vide et ajouter les fichiers nécessaires manuellement. Ceci est fait en effectuant les étapes suivantes:

  1. Commencez par créer un nouveau projet d'application Web ASP.NET dans Visual Studio et nommez le projet Northwind.Web.
  2. Cette fois, sélectionnez le modèle vide dans la boîte de dialogue Nouveau projet ASP.NET et assurez-vous que la case à cocher MVC est cochée, comme illustré dans la capture d'écran suivante:
  3. Une mise en page de projet vide sera créée pour vous et vous remarquerez que nous n'avons pas le dossier Contenu, Polices ou Scripts - nous les ajouterons nous-mêmes!

Ajout des feuilles de style Bootstrap

Pour ajouter les fichiers de feuille de style Bootstrap à votre projet, procédez comme suit:

  1. Créez un nouveau dossier en cliquant avec le bouton droit de la souris sur le nom du nouveau projet.

Explorateur de solutions de Visual Studio et navigation vers Ajouter | Nouveau dossier, nommez le nouveau dossier css.

  1. Ensuite, cliquez avec le bouton droit sur le dossier css nouvellement créé et accédez à Ajouter | Elément existant… dans le menu contextuel.
  2. Naviguez jusqu'au dossier dans lequel vous avez extrait les fichiers de distribution Bootstrap et sélectionnez le fichier bootstrap.css que vous pouvez localiser dans le dossier css.

Ajout des polices Bootstrap

Ajoutez les polices Bootstrap requises en procédant comme suit:

  1. Comme pour les feuilles de style, créez un nouveau dossier appelé polices.
  2. Ensuite, accédez à l'emplacement où vous avez extrait le téléchargement Bootstrap et ajoutez tous les fichiers du dossier Polices à votre dossier Polices dans Visual Studio.
  3. Il doit y avoir quatre fichiers au total, chacun nommé glyphicons-halflings regular mais avec les extensions de fichier différentes suivantes:

° .eot

° .svg

° .ttf

° .woff

Ajout des fichiers JavaScript Bootstrap

Le fichier Bootstrap final dont nous aurons besoin est bootstrap.js. Pour l'ajouter, procédez comme suit:

  1. Avant d'ajouter le fichier bootstrap.js à votre projet Visual Studio, créez un nouveau dossier appelé js.
  2. Ajoutez le fichier bootstrap.js à ce dossier.
  3. Une fois terminé, la présentation du projet devrait ressembler à la capture d'écran suivante dans l'Explorateur de solutions de Visual Studio:

Création du fichier de mise en page du site

Pour conserver un aspect persistant sur les pages de notre site, nous utiliserons un fichier de présentation. Ce fichier de mise en page utilisera le modèle HTML de base Bootstrap dans un premier temps et nous le développerons au fur et à mesure de notre progression dans le livre. Pour créer ce fichier, procédez comme suit:

  1. Créez un nouveau fichier de présentation en cliquant avec le bouton droit de la souris sur le dossier Vues dans la fenêtre Visual.

Explorateur de solutions de Studio et accédez à Ajouter | Nouveau dossier. Nommez le nouveau dossier Shared.

  1. Ensuite, cliquez avec le bouton droit sur le dossier partagé et naviguez jusqu'à Ajouter | Nouvel article….

Sélectionnez le modèle d'élément MVC 5 Layout Page (Razor), nommez le nouvel élément.

_Layout.cshtml et cliquez sur Ajouter, comme indiqué dans la capture d'écran suivante:

  1. Une fois le nouveau fichier ajouté à votre projet, ouvrez-le et remplacez son contenu par le balisage HTML suivant:

<! DOCTYPE html>

<html lang = "en">

<tête>

 <meta charset = "utf-8">

<meta http-equiv = "Compatible X-UA" content = "IE = edge">

 <meta name = "viewport" content = "width = device-width,

 échelle initiale = 1 ">

 <title> @ ViewBag.Title </ title>

 <! - Bootstrap ->

 <link href = "@ Url.Content (" ~ / css / bootstrap.css ")"

 rel = "stylesheet">

 <! - [si lt IE 9]>

 <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/

 html5shiv.js "> </ script>

 <script src = "https://oss.maxcdn.com/libs/respond.js/1.4.2/

 respond.min.js "> </ script>

 <! [endif] ->

</ head>

<body>

 @RenderBody ()

<script src = "https://ajax.googleapis.com/ajax/libs/

 jquery / 1.11.0 / jquery.min.js "> </ script>

 <script src = "@ Url.Content (" ~ / js / bootstrap.js ")"> </ script>

</ body>

</ html>

Dans le balisage précédent, nous définissons la propriété width de la fenêtre d'affichage sur la largeur du périphérique et la valeur d'échelle initiale sur 1. Cela obligera notre site à s'adapter à la taille de l'écran du périphérique à partir duquel l'utilisateur le visualise. Ensuite, nous référençons la feuille de style Bootstrap en utilisant la méthode d'assistance Url.Content. Cette méthode d'assistance convertit un chemin virtuel ou relatif en un chemin absolu, en veillant à ce que la feuille de style soit chargée correctement lors de l'ouverture de la page Web. Nous vérifions ensuite si le navigateur accédant au site est Internet Explorer 9 ou une version antérieure. Si c'est le cas, nous incluons la solution de contournement HTML5Shiv qui permet de styliser les éléments HTML5 dans Internet Explorer version 9 et antérieure. Nous incluons également la version de la bibliothèque Respond JS adaptée aux versions de IE9 et antérieures. Juste avant la fermeture de la balise du fichier, nous incluons la bibliothèque jQuery et la bibliothèque JavaScript bootstrap.

Notez que la solution de contournement HTML5Shiv, les fichiers Respond JS et jQuery sont chargés à partir d'un réseau de diffusion de contenu (CDN). C'est une bonne approche à utiliser pour référencer la plupart des bibliothèques JavaScript largement utilisées. Cela devrait permettre à votre site de se charger plus rapidement si l'utilisateur a déjà visité un site utilisant la même bibliothèque à partir du même CDN, car la bibliothèque sera mise en cache dans son navigateur.

Créer un contrôleur domestique avec un

Vue thématique Bootstrap

Pour le moment, le site que nous avons créé renvoie un message d'erreur indiquant que la ressource demandée est introuvable, lors de l'exécution du projet. Nous devons d’abord ajouter un nouveau contrôleur domestique et associer une vue à son action par défaut afin d’éviter les erreurs. Pour ajouter un nouveau contrôleur, procédez comme suit:

  1. Cliquez avec le bouton droit sur le dossier Contrôleur dans la section Explorateur de solutions et accédez à Ajouter | Manette….
  2. Dans la boîte de dialogue Ajouter un échafaudage, sélectionnez l'élément Contrôleur MVC 5 - vide, comme illustré dans la capture d'écran suivante:
  3. Lorsque vous y êtes invité, dans la boîte de dialogue Ajouter un contrôleur, entrez HomeController comme nouveau nom du contrôleur et cliquez sur Ajouter.
  4. Une fois le contrôleur ajouté, cliquez avec le bouton droit de la souris sur la méthode Index vide et sélectionnez Ajouter une vue. La méthode est considérée comme vide si elle ne contient qu'une seule instruction View ().
  5. Dans la boîte de dialogue Ajouter une vue, laissez tous les champs à leurs valeurs par défaut et sélectionnez la page de disposition que nous avons ajoutée précédemment. Cliquez sur Ajouter pour continuer, comme indiqué dans la capture d'écran suivante:
  6. Une vue vide sera générée et vous remarquerez que la propriété ViewBag.Title ainsi que la page de disposition à utiliser pour cette vue ont été ajoutés en haut de la vue. Prenons l'exemple suivant:

@ {

 ViewBag.Title = "Index";

 Layout = "~ / Views / Shared / _Layout.cshtml";

}

Tutoriel bootstrap MVC [Eng]

Il y aura également un seul élément <h2> dans la vue que vous pouvez laisser tel quel.

Si vous exécutez votre projet, vous devriez voir la vue affichée avec la valeur par défaut.

Style de démarrage appliqué à l'élément <h2>.


3