Combien savez-vous sur le framework bootstrap
Bootstrap est un cadre technique frontal qui peut être adopté par de nombreuses plateformes. Java / php / .net peut être utilisé comme interface frontale. L'intégration de JQuery peut obtenir des effets d'interface très riches. Actuellement, il existe de nombreux plug-ins bootstrap qui peuvent être fournis à tout le monde. Cependant, de nombreuses introductions basées sur Bootstrap domestiques se concentrent toujours sur l'enseignement, l'introduction de diverses connaissances de base et l'utilisation simple de bootstrap; Cet article espère fournir une introduction complète de cas au cadre de développement bootstrap basé sur le projet MVC réel basé sur C #, et l'expliquez avec des captures d'écran du code et de l'effet du projet réels, s'efforçant d'introduire l'expérience et l'expérience dans ce domaine en détail et intuitivement.
1. Présentation du cadre de développement bootstrap basé sur Metronic
Metronic est un cadre de développement de bootstrap étranger basé sur HTML, JS et d'autres technologies, intégrant de nombreuses technologies et plug-ins frontaux bootstrap. C'est un très bon cadre technique. Sur la base de cet article, combiné à mes recherches sur le cadre Web de MVC, cet article intègre le cadre de développement bootstrap basé sur MVC pour lui permettre de répondre aux besoins structurels des projets réels.
Ce qui suit est le rendu global de mon projet global.
Le contenu de la zone de menu est obtenu dynamiquement à partir de la base de données, et certaines informations sont placées sur la colonne supérieure du système, et elle fournit aux utilisateurs un traitement rapide des données personnelles, telles que la visualisation des informations personnelles, la déconnexion, le verrouillage de l'écran, etc. La zone de contenu est principalement affichée visuellement, qui peut être affichée via les contrôles de liste d'arbres et les commandes de table. Généralement, les données doivent également être ajoutées, supprimées, modifiées et paginées, de sorte que diverses fonctions doivent être intégrées. En plus d'interroger et d'afficher les données de l'utilisateur, il nécessite également des opérations liées à l'importation et à l'exportation, qui sont des fonctions de traitement de données de routine. Après avoir déterminé ces règles et effets d'interface, nous pouvons les générer via des outils de génération de code pour générer rapidement les effets d'interface de ces projets Web.
2. Affichage du menu du framework de développement bootstrap
L'ensemble du framework implique beaucoup de contenu, y compris l'utilisation de diverses fonctionnalités CSS de Bootstrap ordinaire, ainsi que la barre de menu, la gestion de l'icône de bootstrap, la barre supérieure du système, le contrôle de l'arborescence JStree, le conteneur de portlet, la boîte de dialogue modale, le contrôle de l'onglet, la liste déroulante SELECT2, la case à cocher TouchSpin, vidéo de contrôle vidéo de lecture de lecture vidéo, etc. Ces fonctionnalités sont conçues dans la solution holistique. La collecte de ces excellents plug-ins peut fournir à notre cadre des fonctions plus puissantes et une expérience d'interface riche.
Cette section continue de revenir au début du cadre, le traitement et la présentation du menu. Généralement, pour la commodité de la gestion, les menus sont divisés en trois niveaux. Les menus sélectionnés sont différents des autres styles de menu. Les menus peuvent être pliés et minimisés. L'effet est le suivant.
Dans Bootstrap, la construction de menus est une tâche relativement facile. Il utilise principalement UL et Li. Grâce au traitement de style, la disposition du menu peut être définie. Le code est le suivant.
<ul data-keep-expanded = "false" Data-Auto-Scroll = "true" Data-Slide-Speed = "200"> <li id = "1"> <a href = "/ home / index"> <i> </i> <span> home </span> <span> </ span> <span> </span> </a> </li> <li id = "2"> <a href = "javascript; <i> </i> <span> Tendances de l'industrie </span> <span> </span> <span> </span> </a> <ul> <li style = "Font-Size: 14px; Color: Yellow"> <i> </i> Tendances de l'industrie </li> <li> <a href = "#"> <i> </i> <pan> 4 </pan> href = "#"> <i> </i> <span> 4 </ span> notices </a> </li> <li> <a href = "#"> <i> </i> <span> 4 </span> Informations dynamiques </a> </li> </li> </li> </li> </ul> </li> </ul> </ul>
Cependant, nos menus généraux sont modifiés dynamiquement, c'est-à-dire que nous devons les obtenir à partir de la base de données et les définir sur l'affichage frontal. De cette façon, nous devons sortir le contenu du menu dans le contrôleur MVC, puis les lier à l'interface frontale pour réaliser la dynamique des données de menu. Dans le même temps, il s'agit également du traitement de base du contrôle de l'autorisation.
Dans la classe de base, nous pouvons obtenir les données de menu et les mettre dans l'objet ViewBag après que l'utilisateur se soit connecté.
Le code spécifique est le suivant. Tout d'abord, déterminez si l'utilisateur est connecté. Si vous êtes connecté, obtenez les données de menu de l'utilisateur et elle est disponible dans ViewBag pour une utilisation.
/// <summary> /// réécriture le traitement de la classe de base avant que l'action ne soit exécutée /// </summary> /// <param name = "filterContext"> réécrivez les paramètres de la méthode </ param> Protected Override void onaCtionExecuting (ActionExecutingContext FilterContext) {Base.OnactionExecuting (FilterConText); // Obtenez les informations sur l'utilisateur de connexion CurrentUser = session ["userInfo"] comme userInfo; if (currentUser == null) {réponse.redirect ("/ login / index"); // Si l'utilisateur est vide, sautez à l'interface de connexion} else {// Définissez l'attribut d'autorisation, puis attribuez la valeur à Viewbag pour enregistrer convertAuthorizedInfo (); Viewbag.AuthorizeKey = AuthorizeKey; // Set d'information de connexion Viewbag.fullName = CurrentUser.FullName; Viewbag.name = currentUser.name; Viewbag.Menustring = getMenustring (); //Viewbag.Menustring = GetMenUstringCache (); // Utilisez le cache et mettez-le à jour de temps en temps}}Parmi eux, la fonction GetMenustring est l'assemblage et le traitement des menus. Les informations du menu dans la base de données sont une structure d'arbre comme indiqué ci-dessous.
Nous pouvons créer un code HTML utilisé dans l'interface en fonction des informations du menu de la base de données.
#Region Template de format défini // javascript:; // {0}? Tid = {1} var firstTemplate = @ "<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> <span class = 'title'> {2} </span> <span class = 'Selected'> </pank> <pan class = 'arrow Open'> <pan> </a>" Selected '> </span> <pank class =' arrow Open '> <pan> ". var secondemplate = @ "<li class = 'heading' style = 'font-size: 14px; couleur: jaune'> <i class = '{0}'> </i> {1} </li>"; var tierstemplate = @ "<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> {2} </a> </li>"; var firstTemplateEnd = "</li>"; var secondemplateStart = "<ul class = 'sub-menu'>"; var secondemplateEnd = "</ul>"; #endregionPar exemple, le menu de troisième niveau peut être généré via le code.
// Niveau 3 icon = subnodeInfo.WeBiCon; // tid est l'ID de classification de niveau supérieur, Sid est l'ID de menu de troisième niveau tmpurl = string.format ("{0} {1} tid = {2} & sid = {3}", subnodeinfo.url, geturljoiner (subnodeinfo.url), info.id, subnodeinfo.id); url = (! string.isnullorempty (subnodeinfo.url) && subnodeinfo.url.trim ()! = "#")? tmpurl: "javascript:;"; sb = sb.appendFormat (tierstemplate, url, icon, subnodeinfo.name, subnodeinfo.id);Bien sûr, si vous souhaitez augmenter la concurrence, vous pouvez réduire la récupération fréquente du menu et mettre cette partie des données dans MemeryCache, comme suit.
public String getMenUstringCache () {String itemValue = MemoryCacheHelper.getCacheItem <string> ("getMenustRingCache", delegate () {return getMenustring ();}, null, dateTime.Now.AddMinutes (5) // Expiration en 5 minutes, reget); return itemValue; }3. Utilisation des pages de mise en page
Dans le même temps, afin d'améliorer la réutilisation de la page, nous extraisons généralement le contenu de la même partie de chaque page et le plaçons sur la page de mise en page globale. De cette façon, les autres parties sont toutes héritées de la page de vue de mise en page. Notre pièce de menu dynamique fait également partie du contenu dans la vue de mise en page.
Le _layout.cshtml dans la figure ci-dessus est la page MVC globale de mise en page basée sur C #. De cette façon, nous définissons le contenu d'affichage du menu dans cette page, ainsi que la partie du contenu de la page principale et de l'écran de l'écran, et il suffit.
Le code d'affichage du menu est le suivant:
La section d'affichage de la page laissée sur la page de mise en page est la suivante.
Étant donné que Bootstrap met généralement des fichiers JS à la fin, en plus de conserver une partie des jQuery et d'autres scripts nécessaires sur la page de mise en page, nous devons également mettre une partie du contenu du script en bas de la page pour le chargement, et notre chargement de script peut être compressé et intégré à l'aide de la technologie des faisceaux de MVC. Pour cette technologie, veuillez vous référer à mon article précédent pour introduire "Résumé de l'expérience du cadre de développement Web basé sur MVC4 + EasyUi (11) - Utilisation de Bundles pour traiter le code de page simplifié".
De cette façon, après avoir introduit la page de vue de mise en page dans les vues de chaque sous-page, nous avons seulement besoin d'écrire la partie du contenu d'affichage personnalisé, le code spécifique est le suivant.
Ensuite, au bas de la page, incluez simplement le code de script pour la pièce requise. Une fois la page générée, elle sera affichée raisonnablement en fonction des blocs de commande définis par la page de mise en page, et toutes les parties du contenu seront intégrées.
4. Utilisation de l'outil d'édition de page SUBLIME Texte
Beaucoup de captures d'écran de la précédente proviennent de l'environnement VS, mais généralement lorsque nous modifions la page de vue, nous utilisons du texte sublime, un puissant outil d'édition, des plug-ins riches, des invites de syntaxe intelligentes, etc., qui vous feront l'aimer après l'avoir utilisé. Il s'agit d'un outil très rapide pour modifier les pages de vue et est fortement recommandé.
VS est généralement utilisé pour effectuer la gestion des fichiers, la compilation et d'autres traitements.
Le contenu ci-dessus est le résumé de l'expérience du cadre de développement basé sur Bootstrap Metronic introduit pour vous [i] Présentation du framework et traitement du module de menu. J'espère que ce sera utile à tout le monde. Si vous souhaitez en savoir plus d'informations, veuillez faire attention au site Web Wulin.com!