ASP.NET Part 1 - Aide scolaire - 2009 - FR

  • Published on
    12-Nov-2014

  • View
    853

  • Download
    1

Embed Size (px)

DESCRIPTION

A tutorial I did for my school in 2008/2009 about ASP.NET. It is the 1st part and it's in french only. ------------------------------------------------------------ Un tutorial que j'ai fait pour mon cole en 2008/2009 sur ASP.NET. C'est la premire partie et c'est en franais seulement.

Transcript

ASP.NET Aide scolaire Partie 1Par Sonny Brabez, pour les tudiants de SUPINFO.

Rsum de cours les points suivants sont tudis dans ce document:1. Mettre en place une solution ASP.NET sur Visual Studio 2008.1. Mettre en place une MasterPage.1. Ajouter des pages ASPX en fonction de la MasterPage.1. Prvoir un thme et lassocier notre solution: lui placer un fichier CSS et un fichier SKIN.1. Connatre la gestion des pages ASPX: comment la mettre en mode source, en mode design, savoir utiliser du code-behind.1. Savoir mettre en place des contrleurs dans les pages ASPX: label, textbox, dropdownlist1. Utiliser le fichier web.config en lui demandant la mise en place dun debug, dun thme ou encore de variables (AppSettings).1. Savoir grer les AppSettings au niveau de votre code-behind.1. Savoir utiliser des objets serveurs dont notamment Response.1. Comprendre la notion de PostBack et la faire appliquer sur les pages.1. Utiliser des Validators sur vos contrleurs: RequiredFieldValidator, RangeValidator, CustomValidator1. Savoir mettre en place un rsum des Validators: ValidationSummary.1. Savoir utiliser un ObjectDataSource, savoir remplir un contrle avec laide du ObjectDataSource.1. Mettre en place des contrles utilisateurs personnaliss: les fichiers ASCX.1. Savoir mettre en place un SiteMap et construire via ce SiteMap, un menu.

1. Mettre en place une solution ASP.NET sur Visual Studio 2008.

Cest trs simple, il suffit de faire: File > New > Web site.Ensuite, vous remarquez que le nom de votre site web sera en fait le chemin que vous lui mettez en place. De plus, vous pouvez choisir le framework sur lequel vous voulez travailler (de prfrence, utiliser le 3.5) ainsi que le type de langage (C# ou VB.NET).

Ici, ma solution sera nomme MerciSonny.

Votre solution au dpart ne contient que trs peu de chose. De prfrence, supprimez la page Default.aspx.

1. Mettre en place une MasterPage.

La mise en place dune MasterPage demande daller sur la racine de votre solution (l ou vous avezC:\...\NomWebSite) et clic-droit: Add New Item.Choisir MasterPage et laisser le reste par dfaut.Remarquez que la case Place code in separate file est coche pour permettre la mise en place du code-behind (= partie programmable en C#) dans une classe nomme: NomMaster.master.cs (ou .vb si VB.NET). La logique est la mme pour les pages ASPX (nommes Web Form).

Votre MasterPage est une sorte de modle de vos pages. Si vous lassociez une page ASPX (Web Form), la page ASPX va obligatoirement contenir tous les lments prsents dans la MasterPage. La MasterPage est donc trs intressante pour la mise en page par dfaut de toutes vos pages (: pour lentte du site, le pied du site, le menu etc).Les balises ContentPlaceHolder de la MasterPage sont les endroits qui pourront tre modifies par chaque page ASPX.Attention ne mettre aucune balise dedans tant donnes quelles doivent tre redfinies niveau page ASPX.

Ici, ma MasterPage permet une modification du title au niveau du head pour chacune de mes pages. Je pourrais galement modifier le contenu de mon unique div sur les pages ASPX.

1. Ajouter des pages ASPX en fonction de la MasterPage.

Pour crer une page ASPX dpendante de ma MasterPage, sur la racine de notre solution, faire: Add New Item et choisir Web Form.Attention: ici penser cocher la case Select master page pour la faire dpendre de notre MasterPage!

Penser ensuite choisir la MasterPage adquate.

Le rsultat de votre page devrait ressembler ceci:

Vous remarquez quune page dpendante dune MasterPage ne peut avoir de balises HTML que dans les Content, qui sont les lments modifiables de notre MasterPage (en effet, elles dpendent des ContentPlaceHolder via ContentPlaceHolderID).Si vous placer des balises en dehors des Content, votre solution ne fonctionnera pas!

1. Prvoir un thme et lassocier notre solution: lui placer un fichier CSS et un fichier SKIN.

Pour mettre en place du CSS en passant par un fichier CSS, il est ncessaire en ASP.NET de mettre en place un thme. Pour cela, il faut dabord dployer un rpertoire App_Themes.Pour ceci, aller sur la racine de votre solution et cliquez-droit: faire Add ASP.NET Folder > Theme.Un rpertoire App_Themes sera automatiquement cr ainsi quun premier thme.

Dans ce premier thme, cliquer droit: faire Add New Item > StyleSheet. Ceci ajoute un CSS.Maintenant, mettons en place un skin. Dans le premier thme, cliquer droit: faire Add New Item > Skin File.

Les fichiers CSS fonctionnent comme en HTML classique: noubliez pas que lattribut id dun lment HTML demande dutiliser dans le CSS, #valeurID et en ce qui concerne lattribut class dun lment HTML demande dutiliser dans le CSS, .valeurClass.

En ce qui concerne le skin, le but cest de pouvoir grer le style de tous les contrleurs ASP.NET (Label, TextBox, DropDownList etc) associs au thme. Malheureusement, un fichier skin ne possde pas lauto-compltion (donc prparer tout sur une page ASPX et copier le direction le fichier skin en enlevant videmment lattribut ID et lattribut Text).

Exemple de CSS:

Exemple de skin:

Attention: dans un fichier skin, noubliez surtout pas lattribut runat=server.

A ce moment l, nos CSS et skin ne sont pas encore associes notre solution. On peut le faire via la directive @Page dans une page ASPX, mais pas pour la MasterPage. Nous allons voir cela au moment de la partie sur web.config!

1. Connatre la gestion des pages ASPX: comment la mettre en mode source, en mode design, savoir utiliser du code-behind.

Il faut savoir quune page ASPX contient des balises HTML de deux types: les balises classiques (div, span) et les balises dtes contrleurs. Les balises contrleurs seront vues juste aprs.

Ces balises peuvent tre mises de deux manires: en les tapant dans la source de la page ou en les glissant/dposant en mode design.Pour pouvoir interchanger entre les deux, aller au niveau de votre page ASPX et double cliquez dessus.De base, vous tes en mode source. En bas gauche, vous trouverez le moyen de mettre en mode design ou les deux ensembles.

Version source.

Version design.

Pour glisser/dposer une balise/un contrleur en mode design, penser placer votre Toolbox (View > Toolbox) [ou raccourci clavier: Ctrl+W puis X].

Une page ASPX ne se gre jamais toute seule, il y a galement la prsence de code, dans un fichier spar (si on a choisi loption de le sparer) qui se nomme le code-behind. Pour louvrir, il suffit daller sur votre page ASPX et cliquer sur le + qui est devant.Double cliquer ensuite sur llment nomm en XXX.aspx.cs (ou .vb).

Remarque: Dans le code-behind, vous pouvez appeler tout contrleur possdant un attribut ID.

Le code-behind contient par dfaut la mthode Page_Load(object sender, EventArgs e). Elle peut contenir dautres mthodes venant des contrleurs.

Ex de code-behind:

1. Savoir mettre en place des contrleurs dans les pages ASPX: label, textbox, dropdownlist

Dans les pages ASPX, on peut mettre des contrleurs qui sont des lments en fait grs par des classes mais totalement invisibles pour nous.Les contrleurs commencent toujours par (XXX = Label etc).Attention: toujours mettre lattribut runat=serversinon a ne fait rien!

Les contrleurs les plus importants retenir sont: 1. Label: met en place du texte non ditable.1. TextBox: met en place une bote texte.1. Button: met en place un bouton denvoi/de validation.1. DropDownList: met en place une liste droulante.

Voici sur une page ASPX, en source, comment un TextBox se prsente:

Remarque: Lattribut ID dun contrleur permet de lutiliser dans le code-behind.

Essayons maintenant de mettre en place un vnement de clic sur notre bouton. Voici comment faire:

Premier point: glisser/dposer le bouton.

Mettez vous sur votre bouton en mode design et aller voir ses Proprits, cliquer sur lclair puis double-cliquer sur Click

Rsultat dans votre code behind de la page:

Maintenant, regarder galement la source de votre bouton sur la page ASPX, lvnement a t li notre bouton:

A savoir: Le code behind peut tre intressant pour remplir dynamiquement une DropDownList (au lieu des ListItem).

1. Utiliser le fichier web.config en lui demandant la mise en place dun debug, dun thme ou encore de variables (AppSettings).

Le fichier web.config est un fichier prsent par dfaut dans votre projet. Ce qui nous intresse cest de prvoir des lments pour le site: ceci seront dans la balise .

Pour mettre en place du debug dans notre solution, il faut penser rgler la balise de .

Maintenant, nous avons auparavant vu quil est impossible de mettre un thme sur une MasterPage. Et bien, ce sera possible via la balise de .

Evidemment, lattribut theme prend comme valeur le nom dun de vos thmes.

Maintenant, il faut savoir quil est galement possible de placer des valeurs utilisables dans nos pages, ceci via la balise suivi de balises . ATTENTION: il ne faut pas le mettre dans mais dans !Voyons un exemple:

Ici je joins ma cl Sonny, une valeur MyPassword.

Voyons maintenant comment intgrer a dans notre code-behind:

ATTENTION: par dfaut, WebConfigurationManager nest pas import. Il faut penser le rajouter en Using (clic-droit sur WebConfigurationManager et aller sur Resolve).Remarquer que je reprends ma valeur de mot de passe via un tableau AppSettings dont je prcise la cl.

1. Savoir utiliser des objets serveurs dont notamment Response.

Si je veux passer dune page ASPX A vers une page B, il me faut un vnement dclenchant une rponse du serveur laction cliente. Pour cela, il suffit de grer des objets serveurs.L je me penche que sur Response mais il existe Session, Request, Application et Server.Via Response, je peux donc grer ce que le serveur donne au client.

Pour cela, faisons nous mme un vnement (clic sur un bouton par exemple) qui permet de rpondre daller une autre page. Voici comment on ferait:

On redirige vers une page prsente dans notre solution.

1. Comprendre la notion de PostBack et la faire appliquer sur les pages.

Le PostBack est en fait la rponse automatique une action client. Cette rponse est souvent de naviguer vers une autre page ou bien de revenir sur la page en cours.Il ny a rien a grer sauf de prciser la page o il faut revenir et galement la mise en place du PostBack via lattribut AutoPostBack ( mettre true).

1. Utiliser des Validators sur vos contrleurs: RequiredFieldValidator, RangeValidator, CustomValidator

Les Validators ont pour but de valider un contrle. Trs souvent le contrle valider est un TextBox.Un Validator est en soi un contrle: .Il en existe plusieurs dont:1. RequiredFieldValidator: force mettre une valeur dans le contrle.1. RangeValidator: la valeur (si remplie) doit tre entre la valeur minimale et la valeur maximale.1. CompareValidator: la valeur (si remplie) doit tre gale la valeur place dans ce validator.1. CustomValidator: la valeur va passer une validation selon du code javascript et/ou code-behind personnalis.

ATTENTION: Un CustomValidator ne grant que du code behind ne sera lanc QUE SI les autres Validators ont t valids.

Autre note importante: un Validator doit dpendre dun autre contrle. Pour cela mettre lattribut ControlToValidate=idDuControleAValider.Pour dire lutilisateur pourquoi le Validator considre son entre non valide, il faut mettre lattribut ErrorMessage suivi dun message derreur.Une fois de plus, ne pas oublier lattribut runat=server!

Petit exemple de RequiredFieldValidator rattach un TextBox:

Vous pouvez gnrer un rsum des messages derreurs des Validators via le contrle ValidationSummary.

1. Savoir utiliser un ObjectDataSource, savoir remplir un contrle avec laide du ObjectDataSource.1. Mettre en place des contrles utilisateurs personnaliss: les fichiers ASCX.

Pour ces deux l, je ne vais pas les tudier dans ce mail. Sachez que un fichier ASCX permet de mettre en place son propre contrleur.LObjectDataSource sera simplement une liste/une collection dlments.

Sachez galement quune DropDownList peut prendre une DataSource en charge et ainsi obtenir les valeurs de cette DataSource (dans ce cas, faut quand mme penser grer les proprits DataNameField et DataValueField).

1. Savoir mettre en place un SiteMap et construire via ce SiteMap, un menu.

Pour crer un SiteMap, il faut mettre en place un fichier XML nomm: web.sitemap. Celui-ci est unique pour un projet et se fait en allant sur la racine du projet, clic-droit: Add New Item > Site Map.Dans ce fichier, vous trouverez un siteMapNode racine (qui est unique) qui contient dautre siteMapNode.Ceux-ci doivent tre remplis par une URL permettant daccder la page puis un titre pour les faire apparatre sur le menu.

Exemple:

De Accueil, je peux aller vers Default.

Maintenant, il faut savoir quon peut le mettre en place avec 3 contrles: Menu, TreeView et SiteMapPath (partie Navigation dans Toolbox).Le Menu et le TreeView ncessite quon leur cr un SiteMapDataSource et quon leur attribue la DataSource.SiteMapPath quant lui ne demande aucune modification, juste le placer.

Exemple de Menu:

A savoir: Dans le SiteMapDataSource, il existe une proprit capable dviter la prsence de llment racine: ShowStartingNode (true ou false).

Recommended

View more >