Labs ASP.NET v1.

1 Aurélien Norie & Sébastien Bovo [Microsoft]

Lab04

But du Lab

Le but de ce Lab est de facilement manipuler les données à travers les contrôles Web
serveur fournis à l’aide d’ADO.NET.

Exercice 1 – Mise à jour de données à l’aide d’une DataList

- Lancer Visual Studio .NET

- Activer le menu « Fichier/Nouveau/Projet… »
- Choisir « Projets Visual Basic » et « Application Web ASP.NET »
- Pour l’emplacement, utiliser « http://localhost/04VBAccesAuxDonnees »
- Placer un contrôle DataList sur la page « WebForm1.aspx »

- En haut de la page de code behind, ajouter l’espace de nom SqlClient de la

manière suivante :
Imports System.Data.SqlClient

- Ajouter dans le code de la page une méthode appelée « FillDataList() » qui va lier
la DataList à une base de données. Dans cet exemple, nous utiliserons la table
« authors » de la base de données « pubs » du serveur SQL local.

Private Sub fillDataList()

Dim cn As New SqlConnection("server=(local);database=pubs;user
id=sa;password=saPassword")
Dim sql As String = "Select * from authors"
Dim cmd As New SqlDataAdapter(sql, cn)
Dim ds As New DataSet
cmd.Fill(ds, "Authors")
DataList1.DataSource = ds.Tables("authors").DefaultView
DataList1.DataBind()
End Sub

- Dans l'événement « Page_Load », placer le code permettant d'appeler la méthode

FillDataList la première fois que l'on navigue sur la page.

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles MyBase.Load
If Not Page.IsPostBack Then
fillDataList()
End If
End Sub

Page 1 sur 7
Labs ASP.NET v1.1 Aurélien Norie & Sébastien Bovo [Microsoft]

- Paramétrer la DataList afin d’afficher les données. Pour cela, dans le code HTML de la
page, ajouter un « ItemTemplate » entre les balises ouvrantes et fermantes du contrôle
DataList comme montré ci-dessous.

<ItemTemplate>
<table bgcolor="#f0f0f0" width="100%">
<tr bgcolor="#000000">
<td colspan="2">
<asp:Label Font-Bold="True" ForeColor="#ffffff"
text='<%#Databinder.Eval(Container.DataItem, "au_id")%>' Runat="server"
ID="Label1"/>
</td>
</tr>
<tr>
<td>Prénom :</td>
<td>
<%#Databinder.Eval(Container.DataItem, "au_fname")%>
</td>
</tr>
<tr>
<td>Nom :</td>
<td>
<%#Databinder.Eval(Container.DataItem, "au_lname")%>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button CommandName="Edit" Text="Edition"
Runat="server" ID="Button1"/>
</td>
</tr>
</table>
</ItemTemplate>

- Un ItemTemplate est un modèle qui est utilisé pour l'affichage de chaque élément
de la liste retournée par la requête SQL. Ce modèle va afficher les données de la
manière suivante :
o Chaque élément de la liste est affiché sous forme de tableau.
o L'identifiant de l'auteur est affiché dans un Label.
o Le nom de l'auteur est rendu en tant que texte.
o Un bouton est ajouté à ce modèle afin de passer en mode "Edition".

- Pour en terminer avec l'affichage des données, attribuer à la propriété

« RepeatColumns » du contrôle DataList la valeur 4. Cela a pour effet d'afficher
les données sur 4 colonnes.

- Compiler et afficher la page dans le navigateur.

Page 2 sur 7
Labs ASP.NET v1.1 Aurélien Norie & Sébastien Bovo [Microsoft]

- Afin de pouvoir éditer les données, ajouter au contrôle Datalist un

« EditItemTemplate ». Comme son nom l'indique, l'EditItemTemplate est un
modèle spécifiant l'affichage à mettre en œuvre pour effectuer l'édition des
données. Construire ce modèle de la même manière que l'ItemTemplate créé dans
la partie précédente (à savoir sous forme de tableau). Apporter les modifications
suivantes :
o Le nom et le prénom seront affichés dans une zone de saisie afin de
pouvoir les modifier.
o Deux boutons "Annuler" et "Mettre à jour" sont ajoutés. Ils ont pour but
d'annuler l'édition ou d'appeler une méthode de mise à jour des données
saisies dans la base de données.

<EditItemTemplate>
<table bgcolor="#f0f0f0" width="100%">
<tr bgcolor="#000000">
<td colspan="2">
<asp:Label id="lblId" Font-Bold="True"
ForeColor="#ffffff" text='<%#Databinder.Eval(Container.DataItem, "au_id")
%>' Runat="server" />
</td>
</tr>
<tr>
<td>Prénom :</td>
<td>
<input type="text" id="txtFirst" value='<
%#Databinder.Eval(Container.DataItem, "au_fname")%>' runat="server"
NAME="txtFirst"/>
</td>
</tr>
<tr>
<td>Nom :</td>
<td>
<input type="text" id="txtLast" value='<
%#Databinder.Eval(Container.DataItem, "au_lname")%>' runat="server"
NAME="txtLast"/>
</td>

Page 3 sur 7
Labs ASP.NET v1.1 Aurélien Norie & Sébastien Bovo [Microsoft]

</tr>
<tr>
<td colspan="2">
<asp:Button CommandName="Update" Text="Mettre à jour"
Runat="server" ID="Button2"/>
<asp:Button CommandName="Cancel" Text="Annuler"
Runat="server" ID="Button3"/>
</td>
</tr>
</table>
</EditItemTemplate>

- Afin d'afficher en mode édition l'élément choisi, ajouter un gestionnaire

d'événement « EditCommand » pour le contrôle DataList dans le code behind.
- Spécifier l'élément qui doit être affiché en mode édition à l’aide de la propriété
« EditItemIndex » de la DataList
- Appeller de nouveau la méthode FillDataList() afin de mettre à jour l'affichage de
la table. Le code est le suivant.

Private Sub DataList1_EditCommand(ByVal source As Object, ByVal e As

System.Web.UI.WebControls.DataListCommandEventArgs) Handles
DataList1.EditCommand
DataList1.EditItemIndex = e.Item.ItemIndex
fillDataList()
End Sub

- Compiler et naviguer vers la page.

- Cliquer sur un bouton « Edition » afin de voir le changement

- Dans le code behind, créer une méthode appelée « SaveRecordToDatabase » qui

va mettre à jour la base de données :

Private Sub SaveRecordToDatabase(ByVal _id As String, ByVal _first As

String, ByVal _last As String)
Dim sql As String
Dim cnn As SqlConnection = New

Page 4 sur 7
Labs ASP.NET v1.1 Aurélien Norie & Sébastien Bovo [Microsoft]

SqlConnection("server=(local);database=pubs;user id=sa;password=
saPassword")

sql = "update authors set au_fname='" & _first & "', "
sql = sql & "au_lname='" & _last & "' where au_id='" & _id & "'"

Dim cmd As New SqlCommand(sql, cnn)

cnn.Open()
cmd.ExecuteNonQuery()
cnn.Close()
End Sub

- Appeler cette méthode dans le gestionnaire d'événements « UpdateCommand »

du contrôle DataList.
- Une fois la méthode  « SaveRecordToDatabase » appelée, sortir du mode édition
en précisant -1 comme valeur de « EditItemIndex » du contrôle DataList.
- Appeler la méthode « fillDataList ».

Private Sub DataList1_UpdateCommand(ByVal source As Object, ByVal e As

System.Web.UI.WebControls.DataListCommandEventArgs) Handles
DataList1.UpdateCommand
Dim first As HtmlInputText = CType(e.Item.FindControl("txtFirst"),
HtmlInputText)
Dim last As HtmlInputText = CType(e.Item.FindControl("txtLast"),
HtmlInputText)
Dim id As Label = CType(e.Item.FindControl("LblId"), Label)

SaveRecordToDatabase(id.Text, first.Value, last.Value)

DataList1.EditItemIndex = -1
fillDataList()
End Sub

- Tester la mise à jour des données : Modifier le nom ou le prénom d'un auteur et
cliquez sur le bouton « Mettre à jour ». Observer que la modification a été prise
en compte et que la liste affiche maintenant les auteurs avec la valeur saisie.

- Il ne reste plus qu'à gérer le clic sur le bouton « Annuler ». Pour cela, écrire le
gestionnaire d'événement « CancelCommand » du contrôle DataList.
- Dans ce gestionnaire, sortir du mode édition en précisant -1 comme valeur de
EditItemIndex du contrôle DataList, puis réafficher la liste.

Private Sub DataList1_CancelCommand(ByVal source As Object, ByVal e As

System.Web.UI.WebControls.DataListCommandEventArgs) Handles
DataList1.CancelCommand
DataList1.EditItemIndex = -1
fillDataList()
End Sub

Page 5 sur 7
Labs ASP.NET v1.1 Aurélien Norie & Sébastien Bovo [Microsoft]

Exercice 2 – Contrôle DataGrid et Appel d’une procédure stockée

- Ajouter une nouvelle page « DataGridProcedure.aspx »

- Ajouter sur cette page, sans renommer les contrôles :
o deux contrôles « Label »
o deux « Calendar »
o un contrôle « Button »
o ajouter aussi un autre « Label » pour le titre

- Ajouter un contrôle « DataGrid » en dessous du bouton :

Page 6 sur 7
Labs ASP.NET v1.1 Aurélien Norie & Sébastien Bovo [Microsoft]

- Double-cliquer sur le bouton pour afficher le code behind

- Ajouter en tout début de la page « DataGridProcedure.aspx.vb » :
Imports System.Data
Imports System.Data.SqlClient

- Pour l’évènement « click » du bouton, utiliser le code suivant :

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles Button1.Click
Dim DS As DataSet
Dim MyConnection As SqlConnection
Dim MyCommand As SqlDataAdapter

MyConnection = New
SqlConnection("server=(local);database=northwind;user id=sa;password=
saPassword")

MyCommand = New SqlDataAdapter("Employee Sales By Country",

MyConnection)

MyCommand.SelectCommand.CommandType = CommandType.StoredProcedure

MyCommand.SelectCommand.Parameters.Add(New
SqlParameter("@Beginning_Date", SqlDbType.DateTime))

MyCommand.SelectCommand.Parameters("@Beginning_Date").Value =
Calendar1.SelectedDate

MyCommand.SelectCommand.Parameters.Add(New SqlParameter("@Ending_Date",
SqlDbType.DateTime))
MyCommand.SelectCommand.Parameters("@Ending_Date").Value =
Calendar2.SelectedDate

DS = New DataSet
MyCommand.Fill(DS, "Sales")

DataGrid1.DataSource = DS.Tables("Sales").DefaultView
DataGrid1.DataBind()
End Sub

- Dans l’évènement « Page_Load », sélectionner deux dates utilisables pour l’appel

de la procédure stockée :
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles MyBase.Load
Calendar1.SelectedDate = New Date(1996, 12, 6)
Calendar1.VisibleDate = Calendar1.SelectedDate
Calendar2.SelectedDate = New Date(1997, 1, 18)
Calendar2.VisibleDate = Calendar2.SelectedDate
End Sub

- Compiler et naviguer sur la page « DataGridProcedure »

Page 7 sur 7