Exercice 1
Créer un projet “ASP.NET Core Web Application” appelé “Exercice_Cours_4”. Celui-ci doit être de type “Web Application”.
Supprimez les fichiers suivants qui sont offert par défaut:
- Shared / Layout.cshtml
- Shared / ValidationScriptsPartial.cshtml
- Privacy.cshtml
- Index.cshtml
Exercice 2
Créez un layout “_LayoutSite.cshtml”. Vous pouvez définir votre layout comme layout par défaut dans le fichier “ViewStart.cshtml”. Vous devez remplacer “_Layout” par “_LayoutSite”.
Exercice 3
Créez une page “Index” en lui assignant le Layout précédemment créé. Ajoutez-y du lorem ipsum comme contenu dans une balise <p>.
Exécuter votre projet pour vous assurez que tout fonctionne bien jusqu’ici.
Vous pouvez ensuite fermer la fenêtre pour revenir à Visual Studio.
Exercice 4
Créez les 3 pages suivantes: “Exemple_JavaScript”, “Exemple_Objet” et “Exemple_Bocue”. Dans votre layout (_layoutSite.cshtml), ajouter un menu qui permet de naviguer entre les 4 pages: “Index”, “Exemple JavaScript”, “Exemple Objet” et “Exemple Boucle”.
Attention. Les hyperliens sont un peu différent en ASP.NET Core. Plutot que d’utiliser la proprié “href” pour indiquer le nom de la page, utiliser “asp-page”. L’extension de la page n’a pas a être spécié.
Par exemple: <a asp-page=”Index”>Index</a>
Tester le bon fonctionnement de votre menu et de vos pages.
Exercice 5
Créer un fichier “fonction.js” sous le répertoire “wwwroot / js”. Créez-y une fonction “addition(x,y)” qui retourne le résultat de deux valeurs numériques passées en paramètre. Faites l’importation du fichier JavaScript dans votre Layout. Dans la page “Exemple JavaScript”, ajoutez 3 champs de texte et un bouton. Faites en sorte que lorsque le bouton est appuyé, la valeur des deux premiers champs de texte soit additionné avec la fonction préalablement créée, et que le résultat soit affichée dans le troisièmes champs de texte.
Exercice 6
Créez une classe “Client” dans votre projet. Celui-ci à un nom, un prenom et un age (Attributs publics) ainsi qu’un constructeur qui permet de les initialiser. Dans votre page “Exemple Objet”, créer un objet de type Client dans votre fonction OnGet. En utilisant ViewData pour le transférer dans votre code client, faite l’affichage de ses attributs dans la page en question.
Indice: Un transtypage (cast) pourrait être nécessaire effectuer l’affichage
Exercice 7
Dans la page “Exemple_Boucle”, utiliser un bloc d’instruction pour créer un tableau à une dimension de string. Ajouter quelques noms au choix. En utilisant une boucle, afficher un tableau à deux colonnes afin d’afficher tous les noms. La première colonne indique l’index de la position et la deuxième colonne indique le nom de la personne.
Exercice 8
Dans votre page “Index”, ajoutez une image de votre choix sous le Lorem Ipsum. Pour se faire, ajouter le fichier image sous le répertoire “wwwroot / image” que vous devez créer.
Exercice 9
Ajouter un fichier “style.css” à votre projet sous “wwwroot / css /”. Utilisez ce fichier doubler la taille de votre image (Ou diviser par 2 si l’image est déjà grande). Définissez également une largeur maximale de 1000px pour vos balise <p> (Pour votre Lorem Ipsum). La propriété CSS est “max-width”.