IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Réalisation d'application Web simple en ASP.NET

Image non disponible

Cet article présente la création d'une application Web avec ASP.NET.
Il présente divers éléments techniques : Web form, tags ASP.Net (dont DataGrid), internationalisation, accès aux données (chaîne de connexion, DataReader, Command, Entity Framework, LINQ), validation des formulaires, page maître, manipulation des fichiers et les Ajax Controls (Ajax Control Toolkit).

Une discussion a été ouverte pour les commentaires sur la publication de cet article : [13 commentaires Donner une note à l´article (5)]

Article lu   fois.

L'auteur

Profil ProHomeViadeoLinkedIn

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. INTRODUCTION

I-A. Objectif

Cet article présente avec des exemples simples les différentes techniques liées au développement d'application Web avec ASP.Net et VB.Net. Parmi celles-ci, on peut trouver :

  • les Web forms ;
  • les tags d'ASP.Net (dont le DataGrid) ;
  • l'internationalisation par les fichiers de ressources ;
  • l'accès aux données (chaîne de connexion, DataReader, Entity Framework, LINQ) ;
  • la validation des formulaires ;
  • la page maître ;
  • la manipulation des fichiers ;
  • les Ajax Controls (Ajax Control Toolkit).

I-B. Versions utilisées

Les versions utilisées des logiciels pour réaliser cet article sont :

Pour information dans un environnement 32 bits, cela donne des fichiers avec les noms suivants :

  • dotNetFx45_Full_setup.exe ;
  • SQLEXPRWT_x86_FRA.exe ;
  • VS2013_RTM_WebExp_FRA.iso ;
  • AjaxControlToolkit.Binary.NET45.zip.

II. INSTALLATIONS

II-A. Installation du framework .Net

Lancer l'exécutable « dotNetFx45_Full_setup.exe ».

Cocher la case « J'ai lu les termes du contrat de licence et je les accepte. ».

Image non disponible

Le logiciel d'installation procède au téléchargement des éléments et réalise l'installation.

Image non disponible

Une fois l'installation terminée, il suffit de cliquer que le bouton « Terminer ».

Image non disponible

II-B. Installation de SQL Server Express

Lancer l'exécutable « SQLEXPRWT_x86_FRA.exe ».

Choisir un dossier pour l'extraction des fichiers d'installation.

Image non disponible

Les fichiers d'installation sont extraits.

Image non disponible

Cliquer sur le lien « Nouvelle installation autonome SQL Server ou ajout de fonctionnalités à une installation existante ».

Image non disponible

Cocher « J'accepte les termes du contrat de licence » et cliquer sur le bouton « Suivant > ».

Image non disponible

Cocher « Utiliser Microsoft Update pour rechercher les mises à jour (recommandé) » et cliquer sur le bouton « Suivant > ».

Image non disponible

Cliquer sur le bouton « Sélectionner tout » et cliquer sur le bouton « Suivant > ».

Image non disponible

Cliquer sur le bouton « Suivant > ».

Image non disponible

Cliquer sur le bouton « Suivant > ».

Image non disponible

Cliquer sur le bouton « Suivant > ».

Image non disponible

Le logiciel réalise l'installation.

Image non disponible

Cliquersur le bouton « Fermer ».

Image non disponible

Fermer le logiciel d'installation.

Image non disponible

II-C. Installation de Visual Studio Express

Décompresser le fichier « VS2013_RTM_WebExp_FRA.iso » (avec 7-Zip par exemple).

Lancer l'exécutable « vns_full.exe ».

Cocher « J'accepte les termes du contrat de licence et la déclaration de confidentialité. ». Décocher « Adhérez au Programme d'amélioration du produit Visual Studio pour nous aider à améliorer la qualité, la fiabilité et les performances de Visual Studio (facultatif). » Cliquer sur le bouton « Installer ».

Image non disponible

Le logiciel réalise l'installation.

Image non disponible

Cliquer sur le bouton « Redémarrer maintenant ».

Image non disponible

III. « BONJOUR LE MONDE ! »

Dans ce chapitre, nous allons réaliser l'exemple de plus simple : une page qui affiche « Bonjour le monde ! ».

Cela sera fait en deux étapes : une première où le texte est inscrit directement dans la page et une deuxième où le texte est stocké dans un fichier de ressources globales.

III-A. Création de l'application

Lancer « VS Express 2013 pour le Web » (Image non disponible).

Cliquer sur « Me le proposer ultérieurement ».

Image non disponible

Choisir « Nouveau projet… » dans le menu « Fichier ».

Image non disponible

Sélectionner « Application Web ASP.NET vide ». Saisir le nom du projet. Puis, cliquer sur le bouton « OK ».

Image non disponible

III-B. Création de la page bonjour.aspx

Dans l'« Explorateur de solutions ». Choisir « Ajouter » / « Nouvel élément… ».

Image non disponible

Choisir « Web Form ». Saisir le nom du fichier (« bonjour.aspx »). Puis cliquer sur le bouton « Ajouter ».

Image non disponible

Saisir le code suivant dans « bonjour.aspx » :

bonjour.aspx
Sélectionnez
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="bonjour.aspx.vb" Inherits="DeveloppezAspNet.bonjour" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Bonjour</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    Bonjour le monde.
    </div>
    </form>
</body>
</html>

On remarque que le code de la page est très simple pour le moment. Il ne contient (presque) que du HTML. On note tout de même la présence de la directive « Page » qui indique le fichier source contenant le code VB.Net et la balise « form » qui a un attribut « runat » qui indique que cette balise nécessite un traitement sur le serveur avant envoi vers le navigateur Web.

III-C. Lancement de la page

Lancer l'application en cliquant sur l'icône de lancement (Image non disponible).

Image non disponible

Visual Studio se charge d'ouvrir une fenêtre ou un onglet dans le navigateur avec le résultat.

Image non disponible

III-D. Externalisation des libellés dans une ressource globale

Ajouter le dossier ASP.NET « App_GlobalResources ».

Image non disponible

Choisir d'ajouter un fichier de ressources dans le dossier ASP.NET « App_GlobalResources ».

Image non disponible

Conserver le nom « Resource1 » et cliquer sur le bouton « OK ».

Image non disponible

Entrer les valeurs des chaines dans le fichier de ressources.

Image non disponible

Modifier le code de « bonjour.aspx » :

bonjour.aspx
Sélectionnez
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="bonjour.aspx.vb" Inherits="DeveloppezAspNet.bonjour" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title><asp:Literal runat="server" Text="<%$ Resources:Resource1, titre_bonjour %>" /></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Label runat="server" Text="<%$ Resources:Resource1, libelle_bonjour_le_monde %>" />
    </div>
    </form>
</body>
</html>

Le code ASP.Net a très peu changé. On note juste la présence des balises « asp:Label » pour indiquer que les libellés sont dans la ressource globale « Resource1 ».

Les libellés du fichier de ressources sont désormais visibles dans la page Web.

Image non disponible

IV. AFFICHAGE DE DONNÉES EN BASE

Dans ce chapitre, nous allons réaliser une page permettant d'afficher des informations que l'on aura chargées en base par script SQL réalisant des insertions.

Nous procéderons à nouveau en plusieurs étapes. En premier, nous afficherons les valeurs d'une base locale en itérant sur les valeurs depuis le code VB.Net pour les ajouter au tableau. Ensuite, nous remplacerons ce procédé d'itérations par un contrôle DataGrid. Pour finir, nous déplacerons la base locale par une base en réseau.

IV-A. Création de la base de données en local

Ajouter le dossier ASP.NET « App_Data ».

Image non disponible

Choisir d'ajouter un nouvel élément dans le dossier ASP.NET « App_Data ».

Image non disponible

Choisir « Base de données SQL Server ». Saisir un nom. Cliquer sur le bouton « Ajouter ».

Image non disponible

Ajouter une nouvelle table dans la base juste créée.

Image non disponible

Renseigner la table LISTECOURSES. Puis cliquer sur « Mettre à jour ».

Image non disponible

Cliquer sur le bouton « Mettre à jour la base de données ».

Image non disponible

Choisir « Nouvelle requête ».

Image non disponible

Saisir la requête suivante.

 
Sélectionnez
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Banane', 3); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Sucre blanc', 75); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Oeuf', 1); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Levure', 1); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Sel', 1); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Farine', 150); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Beurre', 70);

Exécuter la requête en cliquant sur l'icône d'exécution (Image non disponible).

Image non disponible

Les enregistrements sont présents dans la base de données.

Image non disponible

IV-B. Création de la page d'affichage

Choisir d'ajouter un fichier de ressources dans le dossier ASP.NET « App_LocalResources ».

Image non disponible

Choisir d'ajouter un fichier de ressources dans le dossier ASP.NET « App_LocalResources ». Le nommer « liste.aspx.resx ». Entrer les valeurs des chaines dans le fichier de ressources.

Image non disponible

Créer la page « liste.aspx ».

Image non disponible

Modifier le code de « liste.aspx » :

liste.aspx
Sélectionnez
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="liste.aspx.vb" Inherits="DeveloppezAspNet.liste" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title><asp:Literal runat="server" Text="<%$ Resources:titre_liste_courses %>" /></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Erreur" runat="server" Font-Bold="true" ForeColor="Red" />
        </div>
    <div>
    <asp:Table ID="Table" runat="server" BorderWidth="1" GridLines="Both">
        <asp:TableHeaderRow runat="server">
            <asp:TableHeaderCell><asp:Literal runat="server" Text="<%$ Resources:colonne_identifiant %>" /></asp:TableHeaderCell>
            <asp:TableHeaderCell><asp:Literal runat="server" Text="<%$ Resources:colonne_libelle %>" /></asp:TableHeaderCell>
            <asp:TableHeaderCell><asp:Literal runat="server" Text="<%$ Resources:colonne_quantite %>" /></asp:TableHeaderCell>
        </asp:TableHeaderRow>
    </asp:Table>
    </div>
    </form>
</body>
</html>

La page ASP.Net contient un tableau vide. On remarque que les balises « asp:Table », « asp:TableHeaderRow » et « asp:TableHeaderCell » ont également un attribut « runat ».

Modifier le code de « liste.aspx.vb » :

liste.aspx.vb
Sélectionnez
Imports System.Data.SqlClient

Public Class liste
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim MyConnexion As SqlConnection = Nothing
        Try
            MyConnexion = New SqlConnection("Data Source=(LocalDB)\v11.0;" & _
                                                                 "AttachDbFilename=|DataDirectory|\Database1.mdf;" & _
                                                                 "Integrated Security=True;")
            Dim MyCommand As SqlCommand = New SqlCommand("SELECT * FROM LISTECOURSES", MyConnexion)
            MyConnexion.Open()
            Dim MyReader As SqlDataReader = MyCommand.ExecuteReader
            If MyReader.HasRows Then
                Do While MyReader.Read
                    Dim MyRow As TableRow = New TableRow
                    Dim MyCellId As TableCell = New TableCell
                    Dim MyCellLibelle As TableCell = New TableCell
                    Dim MyCellQuantite As TableCell = New TableCell

                    MyCellId.Text = MyReader.GetInt32(0)
                    MyCellLibelle.Text = MyReader.GetString(1)
                    MyCellQuantite.HorizontalAlign = HorizontalAlign.Right
                    MyCellQuantite.Text = MyReader.GetInt32(2)

                    MyRow.Cells.Add(MyCellId)
                    MyRow.Cells.Add(MyCellLibelle)
                    MyRow.Cells.Add(MyCellQuantite)
                    Table.Rows.Add(MyRow)
                Loop
            Else
                Erreur.Text = "Pas de lignes de résultat"
            End If
        Catch MyException As Exception
            Erreur.Text = MyException.Message
        Finally
            If Not IsNothing(MyConnexion) Then
                If MyConnexion.State = ConnectionState.Open Then
                    MyConnexion.Close()
                End If
            End If
        End Try
    End Sub

End Class

Le code VB.Net utilise une Command et un DataReader pour récupérer les valeurs en base et ajouter des lignes au tableau. On peut noter que l'éventuel message d'erreur est affiché grâce à une balise « asp:Label ».

Cela donne le résultat suivant :

Image non disponible

IV-C. Modification pour utiliser un DataGrid

Modifier le code de « liste.aspx » :

liste.aspx
Sélectionnez
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="liste.aspx.vb" Inherits="DeveloppezAspNet.liste" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title><asp:Literal runat="server" Text="<%$ Resources:titre_liste_courses %>" /></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Erreur" runat="server" Font-Bold="true" ForeColor="Red" />
        </div>
        <div>
            <asp:DataGrid ID="DataGrid" runat="server" BorderWidth="1" GridLines="Both" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundColumn DataField="IDOBJET" HeaderText="<%$ Resources:colonne_identifiant %>" />
                    <asp:BoundColumn DataField="LIBELLE" HeaderText="<%$ Resources:colonne_libelle %>" />
                    <asp:BoundColumn DataField="QUANTITE" HeaderText="<%$ Resources:colonne_quantite %>" ItemStyle-HorizontalAlign="Right" />
                </Columns>
            </asp:DataGrid>
        </div>
    </form>
</body>
</html>

Modifier le code de « liste.aspx.vb » :

liste.aspx.vb
Sélectionnez
Imports System.Data.SqlClient

Public Class liste
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim MyConnexion As SqlConnection = Nothing
        Try
            MyConnexion = New SqlConnection("Data Source=(LocalDB)\v11.0;" & _
                                                                 "AttachDbFilename=|DataDirectory|\Database1.mdf;" & _
                                                                 "Integrated Security=True;")
            Dim MyCommand As SqlCommand = New SqlCommand("SELECT * FROM LISTECOURSES", MyConnexion)
            MyConnexion.Open()
            Dim MyReader As SqlDataReader = MyCommand.ExecuteReader
            DataGrid.DataSource = MyReader
            DataGrid.DataBind()
        Catch MyException As Exception
            Erreur.Text = MyException.Message
        Finally
            If Not IsNothing(MyConnexion) Then
                If MyConnexion.State = ConnectionState.Open Then
                    MyConnexion.Close()
                End If
            End If
        End Try
    End Sub

End Class

Dans la page ASP.Net, le tableau est remplacé par un contrôle DataGrid. Le code VB.Net devient plus simple, car le DataReader est directement traité par le contrôle DataGrid.

Cela donne le résultat suivant :

Image non disponible

IV-D. Création de la base de données en réseau

Lancer « SQL Server 2014 Management Studio » (Image non disponible).

Cliquer sur le bouton « Se conn. ».

Image non disponible

Cliquer sur « Nouvelle base de données… ».

Image non disponible

Saisir le « Nom de la base de données ». Puis, cliquer sur « OK ».

Image non disponible

Sélectionner la base de données créée et cliquer sur « Nouvelle requête » (Image non disponible).

Image non disponible

Saisir la requête SQL suivante qui est similaire à celle d'insertion du chapitre IV-A avec en plus la création de la table LISTECOURSES.

 
Sélectionnez
CREATE TABLE LISTECOURSES (
    IDOBJET INT NOT NULL PRIMARY KEY IDENTITY,
    LIBELLE NVARCHAR(50) NULL,
    QUANTITE INT NULL
);

INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Banane', 3); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Sucre blanc', 75); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Oeuf', 1); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Levure', 1); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Sel', 1); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Farine', 150); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Beurre', 70); 
INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES('Cacao', 250);

Exécuter la requête en cliquant sur le bouton « Exécuter » (Image non disponible).

Image non disponible

IV-E. Modification pour utiliser la base en réseau

Modifier le code de « liste.aspx.vb » :

liste.aspx.vb
Sélectionnez
Imports System.Data.SqlClient

Public Class liste
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim MyConnexion As SqlConnection = Nothing
        Try
            'MyConnexion = New SqlConnection("Data Source=(LocalDB)\v11.0;" & _
            '                                                     "AttachDbFilename=|DataDirectory|\Database1.mdf;" & _
            '                                                     "Integrated Security=True;")
            MyConnexion = New SqlConnection("Data Source=.\SQLEXPRESS;Initial Catalog=dataDev;Integrated Security=True")
            Dim MyCommand As SqlCommand = New SqlCommand("SELECT * FROM LISTECOURSES", MyConnexion)
            MyConnexion.Open()
            Dim MyReader As SqlDataReader = MyCommand.ExecuteReader
            DataGrid.DataSource = MyReader
            DataGrid.DataBind()
        Catch MyException As Exception
            Erreur.Text = MyException.Message
        Finally
            If Not IsNothing(MyConnexion) Then
                If MyConnexion.State = ConnectionState.Open Then
                    MyConnexion.Close()
                End If
            End If
        End Try
    End Sub

End Class

La seule modification se situe au niveau de la chaine de connexion à la base de données.

Cela donne le résultat suivant :

Image non disponible

V. CRÉATION DE DONNÉES EN BASE

Le but de ce chapitre est de créer des données dans la base de données depuis l'application. Cela permettra de voir le mécanisme de validation des données provenant du formulaire et la modification des données en base depuis du code VB.Net.

Choisir d'ajouter un fichier de ressources dans le dossier ASP.NET « App_LocalResources ». Le nommer « creation.aspx.resx ». Entrer les valeurs des chaines dans le fichier de ressources.

Image non disponible

Créer la page « creation.aspx ».

Image non disponible

Modifier le fichier « Web.config » :

Web.config
Sélectionnez
<?xml version="1.0" encoding="utf-8"?>

<!--
  Pour plus d'informations sur la configuration de votre application ASP.NET, consultez
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->

<configuration>
    <system.web>
      <compilation debug="true" strict="false" explicit="true" targetFramework="4.5" />
      <httpRuntime targetFramework="4.5"  />
    </system.web>
<appSettings>
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
  </appSettings>
</configuration>

Modifier le code de « creation.aspx » :

creation.aspx
Sélectionnez
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="creation.aspx.vb" Inherits="DeveloppezAspNet.creation" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title><asp:Literal runat="server" Text="<%$ Resources:titre_creation_element_courses %>" /></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td colspan="3">
                    <asp:ValidationSummary runat="server" ForeColor="Red" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:RequiredFieldValidator runat="server" ControlToValidate="TextLibelle" 
                        ForeColor="Red" 
                        Display="Dynamic"
                        ErrorMessage="<%$ Resources:creation_libelle_erreur_obligatoire %>" >*
                    </asp:RequiredFieldValidator>
                </td>
                <td>
                    <asp:Label runat="server" Text="<%$ Resources:creation_element_courses_libelle_libelle %>" /> :
                </td>
                <td>
                    <asp:TextBox ID="TextLibelle" runat="server" Text="" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:RequiredFieldValidator runat="server" ControlToValidate="TextQuantite" 
                        ForeColor="Red" 
                        Display="Dynamic"
                        ErrorMessage="<%$ Resources:creation_quantite_erreur_obligatoire %>" >*
                    </asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator runat="server" ControlToValidate="TextQuantite"
                        ForeColor="Red"
                        Display="Dynamic"
                        ValidationExpression="[0-9]*"
                        ErrorMessage="<%$ Resources:creation_quantite_erreur_numerique %>" >*
                    </asp:RegularExpressionValidator>
                </td>
                <td>
                    <asp:Label runat="server" Text="<%$ Resources:creation_element_courses_libelle_quantite %>" /> :
                </td>
                <td>
                    <asp:TextBox ID="TextQuantite" runat="server" Text="" />
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <asp:Button ID="ButtonValider" runat="server" Text="<%$ Resources:creation_element_courses_libelle_valider %>" />
                </td>
            </tr>
        </table>
    </div>
        <div>
            <asp:Label ID="Erreur" runat="server" Font-Bold="true" ForeColor="Red" />
        </div>
        <div>
            <asp:DataGrid ID="DataGrid" runat="server" BorderWidth="1" GridLines="Both" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundColumn DataField="IDOBJET" HeaderText="<%$ Resources:colonne_identifiant %>" />
                    <asp:BoundColumn DataField="LIBELLE" HeaderText="<%$ Resources:colonne_libelle %>" />
                    <asp:BoundColumn DataField="QUANTITE" HeaderText="<%$ Resources:colonne_quantite %>" ItemStyle-HorizontalAlign="Right" />
                </Columns>
            </asp:DataGrid>
        </div>
    </form>
</body>
</html>

Dans la page ASP.Net, la balise « asp:ValidationSummary » permet d'afficher les différentes erreurs de validation. Les balises « asp:RequiredFieldValidator » et « asp:RegularExpressionValidator » valident les données du formulaire.

Modifier le code de « creation.aspx.vb » :

creation.aspx.vb
Sélectionnez
Imports System.Data.SqlClient

Public Class creation
    Inherits System.Web.UI.Page

    Private Sub Charger()
        Dim MyConnexion As SqlConnection = Nothing
        Try
            MyConnexion = New SqlConnection("Data Source=.\SQLEXPRESS;Initial Catalog=dataDev;Integrated Security=True")
            Dim MyCommand As SqlCommand = New SqlCommand("SELECT * FROM LISTECOURSES", MyConnexion)
            MyConnexion.Open()
            Dim MyReader As SqlDataReader = MyCommand.ExecuteReader
            DataGrid.DataSource = MyReader
            DataGrid.DataBind()
        Catch MyException As Exception
            Erreur.Text = MyException.Message
        Finally
            If Not IsNothing(MyConnexion) Then
                If MyConnexion.State = ConnectionState.Open Then
                    MyConnexion.Close()
                End If
            End If
        End Try
    End Sub

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Charger()
    End Sub

    Private Sub ButtonValider_Click(sender As Object, e As EventArgs) Handles ButtonValider.Click
        Dim MyConnexion As SqlConnection = Nothing
        Try
            MyConnexion = New SqlConnection("Data Source=.\SQLEXPRESS;Initial Catalog=dataDev;Integrated Security=True")
            Dim MyCommand As SqlCommand = New SqlCommand("INSERT INTO LISTECOURSES(LIBELLE, QUANTITE) VALUES(@Libelle, @Quantite);", MyConnexion)
            MyCommand.Parameters.Add("@Libelle", SqlDbType.NVarChar).Value = TextLibelle.Text
            MyCommand.Parameters.Add("@Quantite", SqlDbType.Int).Value = CInt(TextQuantite.Text)
            MyConnexion.Open()
            MyCommand.ExecuteNonQuery()
            Charger()
        Catch MyException As Exception
            Erreur.Text = MyException.Message
        Finally
            If Not IsNothing(MyConnexion) Then
                If MyConnexion.State = ConnectionState.Open Then
                    MyConnexion.Close()
                End If
            End If
        End Try
    End Sub
End Class

Le code VB.Net utilise une requête paramétrée pour insérer un nouvel enregistrement en base de données.

Cela donne le résultat suivant :

Image non disponible

Voici les messages d'erreur lorsque les champs ne sont pas renseignés.

Image non disponible

Voici le message d'erreur lorsque le champ numérique n'est pas respecté :

Image non disponible

Lorsque les champs sont correctement renseignés, l'application stocke les valeurs et les affiche dans la liste.

Image non disponible

VI. SUPPRESSION DE DONNÉES EN BASE

Dans ce chapitre, nous réaliserons une page avec un tableau listant les enregistrements de la table avec un bouton permettant de supprimer un de ces enregistrements.

Choisir d'ajouter un fichier de ressources dans le dossier ASP.NET « App_LocalResources ». Le nommer « suppression.aspx.resx ». Entrer les valeurs des chaines dans le fichier de ressources.

Image non disponible

Créer la page « suppression.aspx ».

Image non disponible

Modifier le code de « suppression.aspx » :

suppression.aspx
Sélectionnez
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="suppression.aspx.vb" Inherits="DeveloppezAspNet.suppression" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title><asp:Literal runat="server" Text="<%$ Resources:titre_suppression_element_courses %>" /></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Erreur" runat="server" Font-Bold="true" ForeColor="Red" />
        </div>
        <div>
            <asp:DataGrid ID="DataGrid" runat="server" BorderWidth="1" GridLines="Both" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundColumn DataField="IDOBJET" HeaderText="<%$ Resources:colonne_identifiant %>" />
                    <asp:BoundColumn DataField="LIBELLE" HeaderText="<%$ Resources:colonne_libelle %>" />
                    <asp:BoundColumn DataField="QUANTITE" HeaderText="<%$ Resources:colonne_quantite %>" ItemStyle-HorizontalAlign="Right" />
                    <asp:ButtonColumn CommandName="Delete" Text="<%$ Resources:suppression_supprimer_libelle %>" />
                </Columns>
            </asp:DataGrid>
        </div>
    </form>
</body>
</html>

Dans la page ASP.Net, nous avons encore une petite nouveauté : « asp:ButtonColumn » qui permet d'avoir une colonne avec le bouton de suppression.

Modifier le code de « suppression.aspx.vb » :

suppression.aspx.vb
Sélectionnez
Imports System.Web.UI.WebControls
Imports System.Data.SqlClient

Public Class suppression
    Inherits System.Web.UI.Page

    Private Sub Charger()
        Dim MyConnexion As SqlConnection = Nothing
        Try
            MyConnexion = New SqlConnection("Data Source=.\SQLEXPRESS;Initial Catalog=dataDev;Integrated Security=True")
            Dim MyCommand As SqlCommand = New SqlCommand("SELECT * FROM LISTECOURSES", MyConnexion)
            Dim MyAdapter As SqlDataAdapter = New SqlDataAdapter(MyCommand)
            Dim MyDataTable As DataTable = New DataTable("LISTECOURSES")
            MyAdapter.Fill(MyDataTable)
            DataGrid.DataSource = MyDataTable
            DataGrid.DataBind()
        Catch MyException As Exception
            Erreur.Text = MyException.Message
        Finally
            If Not IsNothing(MyConnexion) Then
                If MyConnexion.State = ConnectionState.Open Then
                    MyConnexion.Close()
                End If
            End If
        End Try
    End Sub

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Charger()
    End Sub

    Private Sub DataGrid_DeleteCommand(source As Object, e As DataGridCommandEventArgs) Handles DataGrid.DeleteCommand
        Dim item As DataGridItem = CType(e.Item, DataGridItem)

        Dim MyConnexion As SqlConnection = Nothing
        Try
            MyConnexion = New SqlConnection("Data Source=.\SQLEXPRESS;Initial Catalog=dataDev;Integrated Security=True")
            Dim MyCommand As SqlCommand = New SqlCommand("SELECT * FROM LISTECOURSES", MyConnexion)
            Dim MyAdapter As SqlDataAdapter = New SqlDataAdapter(MyCommand)
            Dim MyDataTable As DataTable = New DataTable("LISTECOURSES")
            MyAdapter.Fill(MyDataTable)
            Dim IdObjet As Integer = CInt(e.Item.Cells(0).Text)
            Dim MyDataRows As DataRow() = MyDataTable.Select("IDOBJET = " & IdObjet)
            MyDataRows(0).Delete()
            Dim MyCommandBuilder As SqlCommandBuilder = New SqlCommandBuilder(MyAdapter)
            MyAdapter.DeleteCommand = MyCommandBuilder.GetDeleteCommand
            MyAdapter.Update(MyDataTable)
            DataGrid.DataSource = MyDataTable
            DataGrid.DataBind()
        Catch MyException As Exception
            Erreur.Text = MyException.Message
        Finally
            If Not IsNothing(MyConnexion) Then
                If MyConnexion.State = ConnectionState.Open Then
                    MyConnexion.Close()
                End If
            End If
        End Try
    End Sub
End Class

Le code VB.Net utilise une « DataTable » pour manipuler les données. Puis, la suppression est réalisée grâce à un « CommandBuilder » en base de données sans avoir besoin d'utiliser du SQL.

Cela donne le résultat suivant :

Image non disponible

Lorsque l'on clique sur un « supprimer » (le dernier dans ce cas), l'application supprime l'enregistrement et affiche le résultat.

Image non disponible

VII. MODIFICATION DE DONNÉES EN BASE

Dans ce chapitre, nous allons modifier les données en utilisant les possibilités d'édition du contrôle DataGrid et Entity Framework.

Choisir d'ajouter un fichier de ressources dans le dossier ASP.NET « App_LocalResources ». Le nommer « modification.aspx.resx ». Entrer les valeurs des chaines dans le fichier de ressources.

Image non disponible

Créer la page « modification.aspx ».

Image non disponible

Dans l'« Explorateur de solutions ». Choisir « Ajouter » / « Nouvel élément… ».

Image non disponible

Choisir « ADO.NET Entity Data Model ». Saisir le nom du fichier (« DataModel.edmx »). Puis cliquer sur le bouton « Ajouter ».

Image non disponible

Cliquer sur « Suivant ».

Image non disponible

Cliquer sur le bouton « Nouvelle connexion ».

Image non disponible

Entrer les valeurs. Puis, cliquer sur le bouton « OK ».

Image non disponible

Saisir « dataEntities ». Puis, cliquer sur le bouton « Suivant ».

Image non disponible

Cliquer sur le bouton « Suivant ».

Image non disponible

Cocher la table « LISTECOURSES ». Saisir « dataModel ». Puis, cliquer sur le bouton « Suivant ».

Image non disponible

Le fichier « DataModel.edmx » contient les tables pour lesquelles une entité a été générée.

Image non disponible

Modifier le code de « modification.aspx » :

modification.aspx
Sélectionnez
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="modification.aspx.vb" Inherits="DeveloppezAspNet.modification" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title><asp:Literal runat="server" Text="<%$ Resources:titre_modification_element_courses %>" /></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ValidationSummary runat="server" ForeColor="Red" />
    </div>
    <div>
        <asp:DataGrid ID="DataGrid" runat="server" BorderWidth="1" GridLines="Both" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundColumn DataField="IDOBJET" HeaderText="<%$ Resources:colonne_identifiant %>" ReadOnly="True" />
                <asp:TemplateColumn HeaderText="<%$ Resources:colonne_libelle %>" >
                    <EditItemTemplate>
                        <asp:TextBox ID="textLibelle" runat="server" Text="<%# Bind('LIBELLE')%>" />
                        <asp:RequiredFieldValidator runat="server" ControlToValidate="textLibelle" 
                            ForeColor="Red" 
                            Display="Dynamic"
                            ErrorMessage="<%$ Resources:modification_libelle_erreur_obligatoire %>" >*
                        </asp:RequiredFieldValidator>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="labelLibelle" runat="server" Text="<%# Bind('LIBELLE')%>" />
                    </ItemTemplate>
                </asp:TemplateColumn>
                <asp:TemplateColumn HeaderText="<%$ Resources:colonne_quantite %>" >
                    <EditItemTemplate>
                        <asp:TextBox ID="textQuantite" runat="server" Text="<%# Bind('QUANTITE')%>" />
                        <asp:RequiredFieldValidator runat="server" ControlToValidate="textQuantite" 
                            ForeColor="Red" 
                            Display="Dynamic"
                            ErrorMessage="<%$ Resources:modification_quantite_erreur_obligatoire %>" >*
                        </asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator runat="server" ControlToValidate="textQuantite"
                            ForeColor="Red"
                            Display="Dynamic"
                            ValidationExpression="[0-9]*"
                            ErrorMessage="<%$ Resources:modification_quantite_erreur_numerique %>" >*
                        </asp:RegularExpressionValidator>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="labelQuantite" runat="server" Text="<%# Bind('QUANTITE')%>" />
                    </ItemTemplate>
                </asp:TemplateColumn>
                <asp:EditCommandColumn ButtonType="PushButton"
                    EditText="<%$ Resources:modification_element_courses_libelle_modifier %>"
                    UpdateText="<%$ Resources:modification_element_courses_libelle_valider %>"
                    CancelText="<%$ Resources:modification_element_courses_libelle_annuler %>" />
            </Columns>
        </asp:DataGrid>
    </div>
    </form>
</body>
</html>

Dans la page ASP.Net, la balise « asp:TemplateColumn » contient les balises « EditItemTemplate » et « ItemTemplate » qui permettent de définir le mode d'édition et d'affichage des valeurs.

Modifier le code de « modification.aspx.vb » :

modification.aspx.vb
Sélectionnez
Public Class modification
    Inherits System.Web.UI.Page

    Private Sub Charger()
        Dim Entities = New dataEntities()
        Dim Query = From Entity In Entities.LISTECOURSES
                    Select Entity

        DataGrid.DataSource = Query.ToList
        DataGrid.DataBind()
    End Sub

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Charger()
        End If
    End Sub

    Private Sub DataGrid_CancelCommand(source As Object, e As DataGridCommandEventArgs) Handles DataGrid.CancelCommand
        DataGrid.EditItemIndex = -1
        Charger()
    End Sub

    Private Sub DataGrid_EditCommand(source As Object, e As DataGridCommandEventArgs) Handles DataGrid.EditCommand
        DataGrid.EditItemIndex = e.Item.ItemIndex
        Charger()
    End Sub

    Private Sub DataGrid_UpdateCommand(source As Object, e As DataGridCommandEventArgs) Handles DataGrid.UpdateCommand
        DataGrid.EditItemIndex = -1

        Dim IdentifiantText = e.Item.Cells(0).Text
        Dim Identifiant = CType(IdentifiantText, Integer)
        Dim LibelleText = CType(e.Item.Cells(1).Controls(1), TextBox).Text
        Dim QuantiteText = CType(e.Item.Cells(2).Controls(1), TextBox).Text
        Dim Quantite = CType(QuantiteText, Integer)

        Dim Entities = New dataEntities()
        Dim Query = From Entity In Entities.LISTECOURSES
                    Where Entity.IDOBJET = Identifiant

        Dim Course = Query.Single
        Course.LIBELLE = LibelleText
        Course.QUANTITE = Quantite
        Entities.SaveChanges()

        Charger()
    End Sub
End Class

Le code VB.Net contient l'utilisation d'Entity Framework et de LINQ.

Cela donne le résultat suivant :

Image non disponible

Voici les messages d'erreur lorsque les champs ne sont pas renseignés :

Image non disponible

Voici le message d'erreur lorsque le champ numérique n'est pas respecté :

Image non disponible

Lorsque les champs sont correctement renseignés, l'application stocke les nouvelles valeurs et les affiche dans la liste.

Image non disponible

VIII. UNIFICATION DE L'APPLICATION PAR UN MENU

Dans ce chapitre, nous allons utiliser une page maître afin de réaliser un menu commun à toutes les pages précédemment créées.

Choisir d'ajouter un fichier de ressources dans le dossier ASP.NET « App_GlobalResources ». Le nommer « Titres.resx ». Entrer les valeurs des chaines dans le fichier de ressources.

Image non disponible

Dans l'« Explorateur de solutions ». Choisir « Ajouter » / « Nouvel élément… ».

Image non disponible

Choisir « Page maître Web Forms ». Saisir le nom du fichier (« Site.Master »). Puis cliquer sur le bouton « Ajouter ».

Image non disponible

Modifier le code de « Site.Master » :

Site.Master
Sélectionnez
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="DeveloppezAspNet.Site" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title><asp:ContentPlaceHolder ID="Titre" runat="server" /></title>
</head>
<body>
    <form id="form1" runat="server">
        <table>
            <tbody>
                <tr>
                    <td valign="top">
                        <table width="150px" border="1">
                            <tbody>
                                <tr>
                                    <td>
                                        <a href="bonjour.aspx"><asp:Literal runat="server" Text="<%$ Resources:Titres, titre_bonjour %>" /></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="liste.aspx"><asp:Literal runat="server" Text="<%$ Resources:Titres, titre_liste %>" /></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="creation.aspx"><asp:Literal runat="server" Text="<%$ Resources:Titres, titre_creation %>" /></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="suppression.aspx"><asp:Literal runat="server" Text="<%$ Resources:Titres, titre_suppression %>" /></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="modification.aspx"><asp:Literal runat="server" Text="<%$ Resources:Titres, titre_modification %>" /></a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td valign="top">
                        <asp:ContentPlaceHolder ID="Contenu" runat="server" />
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

La page maître contient deux balises « asp:ContentPlaceHolder » qui indiquent deux points d'insertion dont le contenu est à définir dans les pages utilisant la page maître. Les différentes pages sont modifiées pour indiquer qu'elles ont une page maître. Elles utilisent la balise « asp:Content » pour déterminer le contenu des points d'insertion.

Modifier le code de « bonjour.aspx » :

bonjour.aspx
Sélectionnez
<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="bonjour.aspx.vb" Inherits="DeveloppezAspNet.bonjour" %>

<asp:Content runat="server" ID="Titre" ContentPlaceHolderID="Titre">
    <asp:Literal runat="server" Text="<%$ Resources:Resource1, titre_bonjour %>" />
</asp:Content>
<asp:Content runat="server" ID="Contenu" ContentPlaceHolderID="Contenu">
    <div>
    <asp:Label runat="server" Text="<%$ Resources:Resource1, libelle_bonjour_le_monde %>" />
    </div>
</asp:Content>

Modifier le code de « liste.aspx » :

liste.aspx
Sélectionnez
<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="liste.aspx.vb" Inherits="DeveloppezAspNet.liste" %>

<asp:Content runat="server" ID="Titre" ContentPlaceHolderID="Titre">
    <asp:Literal runat="server" Text="<%$ Resources:titre_liste_courses %>" />
</asp:Content>
<asp:Content runat="server" ID="Contenu" ContentPlaceHolderID="Contenu">
    <div>
        <asp:Label ID="Erreur" runat="server" Font-Bold="true" ForeColor="Red" />
    </div>
    <div>
        <asp:DataGrid ID="DataGrid" runat="server" BorderWidth="1" GridLines="Both" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundColumn DataField="IDOBJET" HeaderText="<%$ Resources:colonne_identifiant %>" />
                <asp:BoundColumn DataField="LIBELLE" HeaderText="<%$ Resources:colonne_libelle %>" />
                <asp:BoundColumn DataField="QUANTITE" HeaderText="<%$ Resources:colonne_quantite %>" ItemStyle-HorizontalAlign="Right" />
            </Columns>
        </asp:DataGrid>
    </div>
</asp:Content>

Modifier le code de « creation.aspx » :

creation.aspx
Sélectionnez
<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="creation.aspx.vb" Inherits="DeveloppezAspNet.creation" %>

<asp:Content runat="server" ID="Titre" ContentPlaceHolderID="Titre">
    <asp:Literal runat="server" Text="<%$ Resources:titre_creation_element_courses %>" />
</asp:Content>
<asp:Content runat="server" ID="Contenu" ContentPlaceHolderID="Contenu">
    <div>
        <table>
            <tr>
                <td colspan="3">
                    <asp:ValidationSummary runat="server" ForeColor="Red" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:RequiredFieldValidator runat="server" ControlToValidate="TextLibelle" 
                        ForeColor="Red" 
                        Display="Dynamic"
                        ErrorMessage="<%$ Resources:creation_libelle_erreur_obligatoire %>" >*
                    </asp:RequiredFieldValidator>
                </td>
                <td>
                    <asp:Label runat="server" Text="<%$ Resources:creation_element_courses_libelle_libelle %>" /> :
                </td>
                <td>
                    <asp:TextBox ID="TextLibelle" runat="server" Text="" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:RequiredFieldValidator runat="server" ControlToValidate="TextQuantite" 
                        ForeColor="Red" 
                        Display="Dynamic"
                        ErrorMessage="<%$ Resources:creation_quantite_erreur_obligatoire %>" >*
                    </asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator runat="server" ControlToValidate="TextQuantite"
                        ForeColor="Red"
                        Display="Dynamic"
                        ValidationExpression="[0-9]*"
                        ErrorMessage="<%$ Resources:creation_quantite_erreur_numerique %>" >*
                    </asp:RegularExpressionValidator>
                </td>
                <td>
                    <asp:Label runat="server" Text="<%$ Resources:creation_element_courses_libelle_quantite %>" /> :
                </td>
                <td>
                    <asp:TextBox ID="TextQuantite" runat="server" Text="" />
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <asp:Button ID="ButtonValider" runat="server" Text="<%$ Resources:creation_element_courses_libelle_valider %>" />
                </td>
            </tr>
        </table>
    </div>
    <div>
        <asp:Label ID="Erreur" runat="server" Font-Bold="true" ForeColor="Red" />
    </div>
    <div>
        <asp:DataGrid ID="DataGrid" runat="server" BorderWidth="1" GridLines="Both" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundColumn DataField="IDOBJET" HeaderText="<%$ Resources:colonne_identifiant %>" />
                <asp:BoundColumn DataField="LIBELLE" HeaderText="<%$ Resources:colonne_libelle %>" />
                <asp:BoundColumn DataField="QUANTITE" HeaderText="<%$ Resources:colonne_quantite %>" ItemStyle-HorizontalAlign="Right" />
            </Columns>
        </asp:DataGrid>
    </div>
</asp:Content>

Modifier le code de « supression.aspx » :

supression.aspx
Sélectionnez
<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="suppression.aspx.vb" Inherits="DeveloppezAspNet.suppression" %>

<asp:Content runat="server" ID="Titre" ContentPlaceHolderID="Titre">
    <asp:Literal runat="server" Text="<%$ Resources:titre_suppression_element_courses %>" />
</asp:Content>
<asp:Content runat="server" ID="Contenu" ContentPlaceHolderID="Contenu">
    <div>
        <asp:Label ID="Erreur" runat="server" Font-Bold="true" ForeColor="Red" />
    </div>
    <div>
        <asp:DataGrid ID="DataGrid" runat="server" BorderWidth="1" GridLines="Both" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundColumn DataField="IDOBJET" HeaderText="<%$ Resources:colonne_identifiant %>" />
                <asp:BoundColumn DataField="LIBELLE" HeaderText="<%$ Resources:colonne_libelle %>" />
                <asp:BoundColumn DataField="QUANTITE" HeaderText="<%$ Resources:colonne_quantite %>" ItemStyle-HorizontalAlign="Right" />
                <asp:ButtonColumn CommandName="Delete" Text="<%$ Resources:suppression_supprimer_libelle %>" />
            </Columns>
        </asp:DataGrid>
    </div>
</asp:Content>

Modifier le code de « modification.aspx » :

modification.aspx
Sélectionnez
<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="modification.aspx.vb" Inherits="DeveloppezAspNet.modification" %>

<asp:Content runat="server" ID="Titre" ContentPlaceHolderID="Titre">
    <asp:Literal runat="server" Text="<%$ Resources:titre_modification_element_courses %>" />
</asp:Content>
<asp:Content runat="server" ID="Contenu" ContentPlaceHolderID="Contenu">
    <div>
        <asp:ValidationSummary runat="server" ForeColor="Red" />
    </div>
    <div>
        <asp:DataGrid ID="DataGrid" runat="server" BorderWidth="1" GridLines="Both" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundColumn DataField="IDOBJET" HeaderText="<%$ Resources:colonne_identifiant %>" ReadOnly="True" />
                <asp:TemplateColumn HeaderText="<%$ Resources:colonne_libelle %>" >
                    <EditItemTemplate>
                        <asp:TextBox ID="textLibelle" runat="server" Text="<%# Bind('LIBELLE')%>" />
                        <asp:RequiredFieldValidator runat="server" ControlToValidate="textLibelle" 
                            ForeColor="Red" 
                            Display="Dynamic"
                            ErrorMessage="<%$ Resources:modification_libelle_erreur_obligatoire %>" >*
                        </asp:RequiredFieldValidator>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="labelLibelle" runat="server" Text="<%# Bind('LIBELLE')%>" />
                    </ItemTemplate>
                </asp:TemplateColumn>
                <asp:TemplateColumn HeaderText="<%$ Resources:colonne_quantite %>" >
                    <EditItemTemplate>
                        <asp:TextBox ID="textQuantite" runat="server" Text="<%# Bind('QUANTITE')%>" />
                        <asp:RequiredFieldValidator runat="server" ControlToValidate="textQuantite" 
                            ForeColor="Red" 
                            Display="Dynamic"
                            ErrorMessage="<%$ Resources:modification_quantite_erreur_obligatoire %>" >*
                        </asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator runat="server" ControlToValidate="textQuantite"
                            ForeColor="Red"
                            Display="Dynamic"
                            ValidationExpression="[0-9]*"
                            ErrorMessage="<%$ Resources:modification_quantite_erreur_numerique %>" >*
                        </asp:RegularExpressionValidator>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="labelQuantite" runat="server" Text="<%# Bind('QUANTITE')%>" />
                    </ItemTemplate>
                </asp:TemplateColumn>
                <asp:EditCommandColumn ButtonType="PushButton"
                    EditText="<%$ Resources:modification_element_courses_libelle_modifier %>"
                    UpdateText="<%$ Resources:modification_element_courses_libelle_valider %>"
                    CancelText="<%$ Resources:modification_element_courses_libelle_annuler %>" />
            </Columns>
        </asp:DataGrid>
    </div>
</asp:Content>

Cela donne le résultat suivant :

Image non disponible
Image non disponible
Image non disponible

IX. MANIPULATION DES FICHIERS

IX-A. Écriture d'un fichier texte

Maintenant, nous allons modifier la page d'affichage des données de la base pour ajouter un bouton qui crée un fichier contenant la liste de ces données.

Ajouter la correspondance suivante dans « liste.aspx.resx » (Clic droit sur le fichier puis « Ouvrir avec… » / « Éditeur XML (Texte) avec encodage ») :

liste.aspx.resx
Sélectionnez
  <data name="creation_fichier" xml:space="preserve">
    <value>Création d'un fichier avec la liste</value>
  </data>

Modifier le code de « liste.aspx » :

liste.aspx
Sélectionnez
<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="liste.aspx.vb" Inherits="DeveloppezAspNet.liste" %>

<asp:Content runat="server" ID="Titre" ContentPlaceHolderID="Titre">
    <asp:Literal runat="server" Text="<%$ Resources:titre_liste_courses %>" />
</asp:Content>
<asp:Content runat="server" ID="Contenu" ContentPlaceHolderID="Contenu">
    <div>
        <asp:Label ID="Erreur" runat="server" Font-Bold="true" ForeColor="Red" />
    </div>
    <div>
        <asp:DataGrid ID="DataGrid" runat="server" BorderWidth="1" GridLines="Both" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundColumn DataField="IDOBJET" HeaderText="<%$ Resources:colonne_identifiant %>" />
                <asp:BoundColumn DataField="LIBELLE" HeaderText="<%$ Resources:colonne_libelle %>" />
                <asp:BoundColumn DataField="QUANTITE" HeaderText="<%$ Resources:colonne_quantite %>" ItemStyle-HorizontalAlign="Right" />
            </Columns>
        </asp:DataGrid>
    </div>
    <asp:Label runat="server" ID="Message" /><br />
    <asp:Button runat="server" ID="Creation" Text="<%$ Resources:creation_fichier %>" />
</asp:Content>

Modifier le code de « liste.aspx.vb » pour ajouter la méthode suivante :

liste.aspx.vb
Sélectionnez
    Private Sub Creation_Click(sender As Object, e As EventArgs) Handles Creation.Click
        Dim Dossier = System.IO.Path.GetTempPath
        Dim SousDossier = Dossier & "fic\"
        If Not IO.Directory.Exists(SousDossier) Then
            IO.Directory.CreateDirectory(SousDossier)
        End If
        Dim Fichier = SousDossier & "fichier.txt"
        Dim Stream As IO.StreamWriter = New IO.StreamWriter(Fichier, False)
        Message.Text = "Création du fichier à l'emplacement " & Fichier

        Dim MyConnexion As SqlConnection = New SqlConnection("Data Source=.\SQLEXPRESS;Initial Catalog=dataDev;Integrated Security=True")
        Dim MyCommand As SqlCommand = New SqlCommand("SELECT * FROM LISTECOURSES", MyConnexion)
        MyConnexion.Open()
        Dim MyReader As SqlDataReader = MyCommand.ExecuteReader
        If MyReader.HasRows Then
            Do While MyReader.Read
                Stream.WriteLine(MyReader.GetInt32(0) & " - " & MyReader.GetString(1) & " : " & MyReader.GetInt32(2))
            Loop
        End If
        MyConnexion.Close()
        Stream.Close()
    End Sub

Dans la méthode appelée lors du clic du bouton, on retrouve des classes du namespace « System.IO ». « Path » permet de retrouver le dossier temporaire, « Directory » de manipuler des sous-dossiers et « StreamWriter » d'écrire dans le fichier.

Cela donne le résultat suivant :

Image non disponible

Lorsque l'on clique sur le bouton, le chemin de stockage du fichier sur le serveur apparaît.

Image non disponible

Le fichier « fichier.txt » contient ceci :

fichier.txt
Sélectionnez
1 - Banane : 30
2 - Sucre blanc : 75
3 - Oeuf : 1
4 - Levure : 1
5 - Sel : 1
6 - Farine : 150
7 - Beurre : 70
8 - Cacao : 250

IX-B. Lecture d'un fichier texte

Dans ce chapitre, nous allons relire le fichier créé dans le chapitre précédent pour le proposer au téléchargement grâce à un bouton.

Ajouter la correspondance suivante dans « liste.aspx.resx » :

liste.aspx.resx
Sélectionnez
  <data name="lecture_fichier" xml:space="preserve">
    <value>Téléchargement du fichier avec la liste</value>
  </data>

Modifier le code de « liste.aspx » :

liste.aspx
Sélectionnez
<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="liste.aspx.vb" Inherits="DeveloppezAspNet.liste" %>

<asp:Content runat="server" ID="Titre" ContentPlaceHolderID="Titre">
    <asp:Literal runat="server" Text="<%$ Resources:titre_liste_courses %>" />
</asp:Content>
<asp:Content runat="server" ID="Contenu" ContentPlaceHolderID="Contenu">
    <div>
        <asp:Label ID="Erreur" runat="server" Font-Bold="true" ForeColor="Red" />
    </div>
    <div>
        <asp:DataGrid ID="DataGrid" runat="server" BorderWidth="1" GridLines="Both" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundColumn DataField="IDOBJET" HeaderText="<%$ Resources:colonne_identifiant %>" />
                <asp:BoundColumn DataField="LIBELLE" HeaderText="<%$ Resources:colonne_libelle %>" />
                <asp:BoundColumn DataField="QUANTITE" HeaderText="<%$ Resources:colonne_quantite %>" ItemStyle-HorizontalAlign="Right" />
            </Columns>
        </asp:DataGrid>
    </div>
    <asp:Label runat="server" ID="Message" /><br />
    <asp:Button runat="server" ID="Creation" Text="<%$ Resources:creation_fichier %>" />
    <asp:Button runat="server" ID="Lecture" Text="<%$ Resources:lecture_fichier %>" />
</asp:Content>

Modifier le code de « liste.aspx.vb » pour ajouter la méthode suivante :

liste.aspx.vb
Sélectionnez
    Private Sub Lecture_Click(sender As Object, e As EventArgs) Handles Lecture.Click
        Dim Dossier = System.IO.Path.GetTempPath
        Dim SousDossier = Dossier & "fic\"
        Dim Fichier = SousDossier & "fichier.txt"
        If IO.File.Exists(Fichier) Then
            Dim Stream As IO.StreamReader = New IO.StreamReader(Fichier)
            Dim Info As System.IO.FileInfo = New System.IO.FileInfo(Fichier)
            Response.Clear()
            Response.AddHeader("Content-Disposition", "attachment; filename=fichier.txt")
            Response.AddHeader("Content-Length", Info.Length.ToString())
            Response.ContentType = "application/octet-stream"
            Dim Ligne As String = Stream.ReadLine
            Do While Not Ligne Is Nothing
                Response.Write(Ligne & vbCrLf)
                Ligne = Stream.ReadLine
            Loop
            Stream.Dispose()
            Stream.Close()
            Response.End()
        Else
            Message.Text = "Le fichier " & Fichier & " n'existe pas : il faut le créer au préalable"
        End If
    End Sub

On retrouve des classes du namespace « System.IO ». Cette fois-ci, nous utilisons la classe « StreamReader » pour lire le fichier. L'objet implicite « Response » (il est une instance de HttpResponse, il n'est pas déclaré dans le code, mais il est utilisable) permet d'envoyer le contenu du fichier au navigateur).

Cela donne le résultat suivant :

Image non disponible

Lorsque l'on clique sur le bouton de téléchargement, cela donne ceci :

Image non disponible

Lorsque l'on clique sur le bouton de téléchargement après avoir créé le fichier, on obtient le résultat suivant :

Image non disponible

X. AMÉLIORATION PAR LES AJAX CONTROLS

Dans ce chapitre, nous allons faire appel à contrôle Ajax pour bloquer la saisie de caractères alphabétiques dans le champ de « quantité ».

Faire un clic droit dans « Boîte à outils ». Puis choisir « Ajouter un onglet ».

Image non disponible

Nommer ce nouvel onglet.

Image non disponible

Faire un clic droit dans « Boîte à outils ». Puis choisir « Choisir les éléments… ».

Image non disponible

Cliquer sur le bouton « Parcourir ».

Image non disponible

Sélectionner le fichier « AjaxControlToolkit.dll » contenu dans l'archive d'Ajax Control Toolkit (décompresser l'archive au préalable).

Image non disponible

Les nouveaux contrôles ont été ajoutés. Cliquer sur le bouton « OK ».

Image non disponible

Modifier le code de « creation.aspx » :

creation.aspx
Sélectionnez
<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="creation.aspx.vb" Inherits="DeveloppezAspNet.creation" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<asp:Content runat="server" ID="Titre" ContentPlaceHolderID="Titre">
    <asp:Literal runat="server" Text="<%$ Resources:titre_creation_element_courses %>" />
</asp:Content>
<asp:Content runat="server" ID="Contenu" ContentPlaceHolderID="Contenu">
    <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajax:ToolkitScriptManager>
    <div>
        <table>
            <tr>
                <td colspan="3">
                    <asp:ValidationSummary runat="server" ForeColor="Red" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:RequiredFieldValidator runat="server" ControlToValidate="TextLibelle" 
                        ForeColor="Red" 
                        Display="Dynamic"
                        ErrorMessage="<%$ Resources:creation_libelle_erreur_obligatoire %>" >*
                    </asp:RequiredFieldValidator>
                </td>
                <td>
                    <asp:Label runat="server" Text="<%$ Resources:creation_element_courses_libelle_libelle %>" /> :
                </td>
                <td>
                    <asp:TextBox ID="TextLibelle" runat="server" Text="" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:RequiredFieldValidator runat="server" ControlToValidate="TextQuantite" 
                        ForeColor="Red" 
                        Display="Dynamic"
                        ErrorMessage="<%$ Resources:creation_quantite_erreur_obligatoire %>" >*
                    </asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator runat="server" ControlToValidate="TextQuantite"
                        ForeColor="Red"
                        Display="Dynamic"
                        ValidationExpression="[0-9]*"
                        ErrorMessage="<%$ Resources:creation_quantite_erreur_numerique %>" >*
                    </asp:RegularExpressionValidator>
                </td>
                <td>
                    <asp:Label runat="server" Text="<%$ Resources:creation_element_courses_libelle_quantite %>" /> :
                </td>
                <td>
                    <asp:TextBox ID="TextQuantite" runat="server" Text="" />
                    <ajax:FilteredTextBoxExtender ID="FiltreTextQuantite" TargetControlID="TextQuantite" FilterType="Numbers" runat="server" />
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <asp:Button ID="ButtonValider" runat="server" Text="<%$ Resources:creation_element_courses_libelle_valider %>" />
                </td>
            </tr>
        </table>
    </div>
    <div>
        <asp:Label ID="Erreur" runat="server" Font-Bold="true" ForeColor="Red" />
    </div>
    <div>
        <asp:DataGrid ID="DataGrid" runat="server" BorderWidth="1" GridLines="Both" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundColumn DataField="IDOBJET" HeaderText="<%$ Resources:colonne_identifiant %>" />
                <asp:BoundColumn DataField="LIBELLE" HeaderText="<%$ Resources:colonne_libelle %>" />
                <asp:BoundColumn DataField="QUANTITE" HeaderText="<%$ Resources:colonne_quantite %>" ItemStyle-HorizontalAlign="Right" />
            </Columns>
        </asp:DataGrid>
    </div>
</asp:Content>

Modifier le code de « modification.aspx » :

modification.aspx
Sélectionnez
<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="modification.aspx.vb" Inherits="DeveloppezAspNet.modification" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<asp:Content runat="server" ID="Titre" ContentPlaceHolderID="Titre">
    <asp:Literal runat="server" Text="<%$ Resources:titre_modification_element_courses %>" />
</asp:Content>
<asp:Content runat="server" ID="Contenu" ContentPlaceHolderID="Contenu">
    <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajax:ToolkitScriptManager>
    <div>
        <asp:ValidationSummary runat="server" ForeColor="Red" />
    </div>
    <div>
        <asp:DataGrid ID="DataGrid" runat="server" BorderWidth="1" GridLines="Both" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundColumn DataField="IDOBJET" HeaderText="<%$ Resources:colonne_identifiant %>" ReadOnly="True" />
                <asp:TemplateColumn HeaderText="<%$ Resources:colonne_libelle %>" >
                    <EditItemTemplate>
                        <asp:TextBox ID="textLibelle" runat="server" Text="<%# Bind('LIBELLE')%>" />
                        <asp:RequiredFieldValidator runat="server" ControlToValidate="textLibelle" 
                            ForeColor="Red" 
                            Display="Dynamic"
                            ErrorMessage="<%$ Resources:modification_libelle_erreur_obligatoire %>" >*
                        </asp:RequiredFieldValidator>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="labelLibelle" runat="server" Text="<%# Bind('LIBELLE')%>" />
                    </ItemTemplate>
                </asp:TemplateColumn>
                <asp:TemplateColumn HeaderText="<%$ Resources:colonne_quantite %>" >
                    <EditItemTemplate>
                        <asp:TextBox ID="textQuantite" runat="server" Text="<%# Bind('QUANTITE')%>" />
                        <asp:RequiredFieldValidator runat="server" ControlToValidate="textQuantite" 
                            ForeColor="Red" 
                            Display="Dynamic"
                            ErrorMessage="<%$ Resources:modification_quantite_erreur_obligatoire %>" >*
                        </asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator runat="server" ControlToValidate="textQuantite"
                            ForeColor="Red"
                            Display="Dynamic"
                            ValidationExpression="[0-9]*"
                            ErrorMessage="<%$ Resources:modification_quantite_erreur_numerique %>" >*
                        </asp:RegularExpressionValidator>
                        <ajax:FilteredTextBoxExtender ID="FiltreTextQuantite" TargetControlID="textQuantite" FilterType="Numbers" runat="server" />
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="labelQuantite" runat="server" Text="<%# Bind('QUANTITE')%>" />
                    </ItemTemplate>
                </asp:TemplateColumn>
                <asp:EditCommandColumn ButtonType="PushButton"
                    EditText="<%$ Resources:modification_element_courses_libelle_modifier %>"
                    UpdateText="<%$ Resources:modification_element_courses_libelle_valider %>"
                    CancelText="<%$ Resources:modification_element_courses_libelle_annuler %>" />
            </Columns>
        </asp:DataGrid>
    </div>
</asp:Content>

Dorénavant, il n'est plus possible de saisir de texte dans les champs « quantité » de la page de création et de modification.

Il est nécessaire d'ajouter la balise « ajax:ToolkitScriptManager » pour que les contrôles Ajax fonctionnent. La balise « ajax:FilteredTextBoxExtender » filtre le champ « quantité » pour que seuls les nombres soient saisissables.

Il aurait également été possible d'ajouter le tag « ToolkitScriptManager » dans la page maître « Site.Master ».

XI. CONCLUSION

Cet article ne présente pas de conseils sur l'organisation des sources d'une application. Il présente simplement quelques techniques.

Pour aller plus loin, je vous conseille de regarder du côté de MVC avec ASP.Net.

XII. REMERCIEMENTS

Je remercie très sincèrement :

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Copyright © 2014 Régis POUILLER. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.