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

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 ]

Article lu fois.

L'auteur

Régis POUILLER

L'article

Publié le 17 novembre 2014

Version PDF Version hors-ligne

ePub, Azw et Mobi

Liens sociaux

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 :

Microsoft .NET Framework 4.5 ;
Microsoft® SQL Server® 2014 Express (With Tools qui a l'avantage de contenir également le SQL Management Studio) ;
Microsoft Visual Studio Express 2013 pour le Web ;
Ajax Control Toolkit .NET 4.5.

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. ».

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

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

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.

Les fichiers d'installation sont extraits.

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

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

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

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

Cliquer sur le bouton « Suivant > ».

Le logiciel réalise l'installation.

Cliquersur le bouton « Fermer ».

Fermer le logiciel d'installation.

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 ».

Le logiciel réalise l'installation.

Cliquer sur le bouton « Redémarrer maintenant ».

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 » ().

Cliquer sur « Me le proposer ultérieurement ».

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

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

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

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

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

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 ().

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

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

Ajouter le dossier ASP.NET « App_GlobalResources ».

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

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

Entrer les valeurs des chaines dans le fichier de ressources.

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.

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 ».

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

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

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

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

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

Choisir « Nouvelle requête ».

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 ().

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

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

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

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.

Créer la page « liste.aspx ».

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 :

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 :

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

Lancer « SQL Server 2014 Management Studio » ().

Cliquer sur le bouton « Se conn. ».

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

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

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

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 » ().

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 :

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.

Créer la page « creation.aspx ».

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 :

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

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

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

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.

Créer la page « suppression.aspx ».

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 :

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

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.

Créer la page « modification.aspx ».

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

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

Cliquer sur « Suivant ».

Cliquer sur le bouton « Nouvelle connexion ».

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

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

Cliquer sur le bouton « Suivant ».

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

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

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 :

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

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

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

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.

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

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

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 :

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 :

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

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 :

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

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

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 ».

Nommer ce nouvel onglet.

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

Cliquer sur le bouton « Parcourir ».

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

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

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 :

www.developpez.com qui me permet de publier cet article ;
Nono40 et djibril pour leurs outils ;
yahiko pour sa relecture technique ;
Claude LELOUP pour sa relecture orthographique rigoureuse.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :

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.