Guide de survie front-end
en environnement .NET

Luc Poupard

CDI

Contexte

  • Designer front-end
  • Chez CDI (Conseils et Développements Informatiques)
    • Développement d’applications web
    • Gestion d’infrastructures informatiques
  • Projets de développement
    • WordPress
    • Solutions .NET

La plateforme .NET

  • Ensemble de composants technologiques complet pour créer des applications de A à Z
    • Framework de développement
    • Environnement de développement
    • Serveur web
    • Système d’exploitation
  • Développement d’applications de bureau, web, mobile,…
  • Code pré-compilé permettant d’utiliser différents langages de programmation

ASP.NET

  • Framework permettant de créer des pages web dynamiques
  • Plusieurs évolutions majeures
    1. 2002 : WebForms
    2. 2009 : MVC
    3. 2016 : .NET Core
  • Chaque « version » est indépendante

ASP.NET WebForms

  • Adaptation pour le web de la logique de Windows Forms
    • Abstraction du protocole HTTP et du langage HTML
  • Découpage d’une page WebForms
    1. Page ASP : code ASP et HTML
    2. Code behind : contient toute la logique
  • Code ASP compilé en HTML

Dans WebForms, il y a « form »

Toute la page doit être contenue dans une balise <form>

<!DOCTYPE html>
<html>
<head runat="server"></head>
<body>
	<form runat="server">

	</form>
</body>

Les balises HTML ASP.NET

  • Chaque balise HTML a son équivalent ASP
    • Exemple : <asp:HyperLink> pour faire un lien
  • Problème : les développeurs n’ont aucune idée du code généré en sortie…

Images avec <asp:Image>

<asp:Image ImageUrl="~/Images/logo-parisweb.png" Width="300" Height="137" AlternateText="Paris Web" runat="server" />

Après compilation :

<img src="Images/logo-parisweb.png" alt="Paris Web" style="height:137px; width:300px;">

À éviter !

Images avec <asp:Image> <img>

À la place, il vaut mieux utiliser une balise <img> à enrichir avec :

  • L’attribut runat="server"
  • L’attribut id
<img src="~/Images/logo-parisweb.png" width="300" height="137" alt="Paris Web" id="mon_id" runat="server" />

À noter : c’est valable pour toutes les balises !
À noter 2 : l’id ne peut pas contenir le caractère tiret -

Images avec <asp:Image> <img> <asp:Image>

<Image ImageUrl="~/Images/logo-parisweb.png" AlternateText="" runat="server" />

Après compilation :

<img src="Images/logo-parisweb.png">

Il y a un autre attribut pour ça… GenerateEmptyAlternateText

<Image ImageUrl="~/Images/logo-parisweb.png" GenerateEmptyAlternateText="true" runat="server" />

Après compilation :

<img src="Images/logo-parisweb.png" alt="">

Tableaux avec <asp:Table>

Un tableau de base est assez simple :
<asp:Table> pour un tableau, <asp:TableRow> pour une ligne et <asp:TableCell> pour une cellule. 

<asp:Table runat="server">
	<asp:TableRow>
		<asp:TableCell>Cellule</asp:TableCell>
		<asp:TableCell>Cellule</asp:TableCell>
	</asp:TableRow>
</asp:Table>
<table>
	<tr>
		<td>Cellule<td>
		<td>Cellule<td>
	</tr>
</table>

Tableaux : avec un titre c’est mieux

C’est toujours assez simple, il y a un attribut Caption pour ça.

<asp:Table Caption="Titre du tableau" runat="server">
	<asp:TableRow>
		<asp:TableCell>Cellule</asp:TableCell>
		<asp:TableCell>Cellule</asp:TableCell>
	</asp:TableRow>
</asp:Table>
<table>
	<caption>Titre du tableau</caption>
	<tr>
		<td>Cellule</td>
		<td>Cellule</td>
	</tr>
</table>

Tableaux : cellules d’entête peut-être ?

Pas trop violent non plus, on remplace <asp:TableCell> par <asp:TableHeaderCell>.
Il y a même l’attribut Scope ! 

<asp:Table Caption="Titre du tableau" runat="server">
	<asp:TableRow>
		<asp:TableHeaderCell Scope="Column">Entête</asp:TableHeaderCell>
	</asp:TableRow>
	<asp:TableRow>
		<asp:TableCell>Cellule</asp:TableCell>
	</asp:TableRow>
</asp:Table>
<table>
	<caption>Titre du tableau</caption>
	<tr>
		<th scope="col">Entête</th>
	</tr>
	<tr>
		<td>Cellule</td>
	</tr>
</table>

Tableaux : un peu de thead, tbody et tfoot avec ça ?

Il y a les balises <asp:TableHeaderRow> par <asp:TableFooterRow> pour ça : 

<asp:Table Caption="Titre du tableau" runat="server">
	<asp:TableHeaderRow>
		<asp:TableHeaderCell Scope="Column">Entête</asp:TableHeaderCell>
	</asp:TableHeaderRow>
	<asp:TableRow>
		<asp:TableCell>Cellule</asp:TableCell>
	</asp:TableRow>
	<asp:TableFooterRow>
		<asp:TableCell>Pied</asp:TableCell>
	</asp:TableFooterRow>
</asp:Table>
<table>
	<caption>Titre du tableau</caption>
	<tr>
		<th scope="col">Pas entête</th>
	</tr>
	<tr>
		<td>Cellule</td>
	</tr>
	<tr>
		<td>Pas pied</td>
	</tr>
</table>

Tableaux : thead, tbody et tfoot pour de bon

L’attribut secret TableSection s’en charge :

<asp:Table Caption="Titre du tableau" runat="server">
	<asp:TableHeaderRow TableSection="TableHeader">
		<asp:TableHeaderCell Scope="Column">Entête</asp:TableHeaderCell>
	</asp:TableHeaderRow>
	<asp:TableRow>
		<asp:TableCell>Cellule</asp:TableCell>
	</asp:TableRow>
	<asp:TableFooterRow TableSection="TableFooter">
		<asp:TableCell>Pied</asp:TableCell>
	</asp:TableFooterRow>
</asp:Table>
<table>
	<caption>Titre du tableau</caption>
	<thead>
		<th scope="col">Entête</th>
	</thead>
	<tbody>
		<tr><td>Cellule</td></tr>
	</tbody>
	<tfoot>
		<tr><td>Pied</td></tr>
	</tfoot>
</table>

Champs de formulaire avec <asp:Textbox>

  • L’attribut TextMode permet de spécifier le type de champ
    • Tous les types HTML5 depuis ASP.NET 4.5 : Search, Number, Color, Date, Url, Mail, Range…
<asp:TextBox ID="Number" TextMode="Number" runat="server">

Autres champs de formulaire

  • <select> avec <asp:DropDownList> ou <asp:ListBox>
  • <input type="radio"> avec <asp:RadioButton> ou <asp:RadioButtonList>
  • <input type="checkbox"> avec <asp:CheckBox> ou <asp:CheckBoxList>

Étiquettes de formulaire avec <asp:Label>

<asp:Label Text="Nom du label" for="Input" runat="server" />
<asp:TextBox ID="Input" runat="server" />

Après compilation :

<span for="Input">Nom du label</span>
<input id="MainContent_Input" type="text" />

Dans sa configuration par défaut, c’est un <span> qui est généré…

À noter : l’id est généré dynamiquement, en fonction de la hiérarchie des éléments dans le code !

Étiquettes de formulaire avec <asp:Label>. Pour de vrai.

Il faut utiliser AssociatedControlID.

<asp:Label Text="Nom du label" AssociatedControlID="Input" runat="server" />
<asp:TextBox ID="Input" runat="server" />

Après compilation :

<label for="MainContent_Input">Nom du label</label>
<input id="MainContent_Input" type="text" />

Boutons avec <asp:Button>

Génère un <input type="submit"> par défaut.

<asp:Button Text="Bouton" runat="server" />
<input type="submit" value="Bouton" />

On peut créer un <input type="button"> à l’aide de l’attribut UseSubmitBehavior="false".

<asp:Button Text="Bouton" UseSubmitBehavior="false" runat="server" />
<input type="button" value="Bouton" />

Pas de <button> ? Nope.

<button ID="Bouton" runat="server">Bouton</button>

Par contre il y a <asp:LinkButton>… pour faire des liens-boutons…

Displays a hyperlink-style button control on a Web page.

En pratique ça donne ça :

<asp:LinkButton Text="Kill me!" runat="server" />

Après compilation :

<a href="javascript:__doPostBack('ctl00$MainContent$ctl04','')">Kill me!</a>

Boucles avec <asp:Repeater>

Permet de générer des contenus en boucle, avec plusieurs balises pratiques :

<asp:Repeater runat="server">
    <HeaderTemplate>
        <ul>
    </HeaderTemplate>
    <ItemTemplate>
        <li>Item</li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
    <SeparatorTemplate>
        <li class="separator"></li>
    </SeparatorTemplate>
</asp:Repeater>

Bonus

Ajouter un peu de classe

<asp:Label CssClass="ma-classe-css" runat="server" />

Identifiant statique

<asp:Label ClientIDMode="Static" ID="Identifiant" runat="server" />

À noter : force la valeur de l’attribut id, même s’il y a plusieurs occurrences.

Merci !

On se voit en ligne !

Crédits