Accueil > Non classé > ASP.NET MVC 4 [Cinquième partie] : L’inspecteur de page

ASP.NET MVC 4 [Cinquième partie] : L’inspecteur de page

Vue2

  1. ASP.NET MVC 4 [Première partie]   : Introduction
  2. .NET MVC 4 [Deuxième partie]  : Ajout d’un model
  3. ASP.NET MVC 4 [Troisième partie]  : Ajout d’un contrôleur
  4. ASP.NET MVC 4 [Quatrième partie] : Ajout d’une vue
  5. ASP.NET MVC 4 [Cinquième partie] : Page Inspector
  6. ASP.NET MVC 4 [Sixième partie]      : Razor ou ASPX
  7. ASP.NET MVC 4 [Septième partie]   : Conclusion

Dans cette partie nous parlerons de l’inspecteur de page.

L’inspecteur de page  est l’une des nouvelles fonctionnalités de Visual Studio 2012, qui   affiche une page Web directement dans l’IDE de Visual Studio.

Il permet de modifier des propriétés CSS et des attributs des éléments DOM et de consulter les modifications répercutées immédiatement dans le navigateur intégré. Les modifications faites ne sont pas persistantes et les fichiers sources d’origine ne sont pas affectés.

Lorsque vous choisissez un élément rendu, l’inspecteur de page ouvre le fichier dans lequel le balisage a été généré et met en surbrillance la source.

Pour une mise en pratique, nous allons faire un click droit sur le fichier Create.cshtml qui se trouve dans notre solution, comme le montre l’image ci-dessous.

 

Vue2

Présentation de l’inspecteur de page

L’inspecteur de page est docké dans Visual Studio 2012 et se présente sous cette forme :

 

Modification du mot “Create/ en se servant de l’inspecteur de page

En cliquant sur le bouton “Inspecter” et en se positionnant sur le mot “Create”, l’inspecteur de page nous positionne dans le code HTML correspondant.

 

Pour éditer le mot "Create" faire un doucle clic sur ce dernier dans le code HTML.

 

En modifiant "Create" par "Liste des adhérents", voici ce que l’on obtient :

Modification de la couleur

Nous allons modifier la couleur du texte suivant en vert en utilisant l’inspecteur de page.

 

 

Déplacer la souris au dessus des mots "Liste des adhérents", ensuite éditer la couleur correspondate dans la feuille de style CSS et taper "green".

 

 

Vous devez obtenir ceci :

 

Ici s’achève la présentation consacrée à l’inspecteur de page. Il est à noter que, Vous pouvez encore faire plusieurs choses avec l’inspecteur de page.

 

Be connected!

Loading

Categories: Non classé Tags:
  1. Pas encore de commentaire
  1. Pas encore de trackbacks


neuf + 9 =