Gridview et DetailView avec ASP.NET AJAX

9 Novembre 2006 , Rédigé par Hugues MEUNIER Publié dans #.NET

Le but de cet article est de construire une page AJAX contenant une gridView et une detailView du genre master/detail.

Les pré-requis sont :

Visual studio 2005
asp.net ajax 1.0 beta2

L'installation de asp.net ajax fournit un ensemble d'outils supplémentaires dans la toolbox :

Timer : permet le rafraichissement partiel et périodique d'une page
ScriptManager : objet de base qui permet d'éviter le postback (à condition de positionner à true la propriété EnablePartialRendering
ScriptManagerProxy (gestion du scriptmanager dans des pages complexes avec des frames par exemple)
UpdatePanel : permet de définir une entité (un panel) pour le rafraîchissement partiel

L'installation permet également de disposer d'un template de projet et de page pour asp.net ajax.

Pour commencer :

construire un nouveau site Web Ajax : File-->New-->Web site et choisir Asp.Net Ajax Enabled Web Site
Le template génère une page par défaut (Default.aspx) blanche qui contient le code suivant :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Untitled Page</title>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

</div>

</form>

</body>

</html>

La seule différence avec une page asp.net habituelle est le tag <asp:ScriptManager>
Donc la première chose à faire est de positionner à true la propriété EnablePartialRendering de l'objet ScriptManager1
Ensuite faites glisser un updatePanel sur la page
Faire glisser un gridview et un detailView à côté (on s'occupera de la mise en page plus tard!)
Dans notre exemple, une interface métier IOperations fournira les données. La méthode getComptesForClient(long idclient)
Pour le gridView, afficher les smarttags et choisir "Choose datasource". Créer un nouveau ObjectDatasource comptesDS (ici on choisit un type business object). Comme la méthode de l'objet métier prend un paramètre un entrée, celui-ci sera cherché dans la session (variable idclient) de l'utilisateur.
Pour le detailView, même principe appel de la méthode getFicheCompte(long idcompte) qui prendra son paramètre dans la sélection de la gridview
Il faut donc positionner les propriétés suivante de gridView1 :
- AutogenerateColumns à true
- AutogenerateSelectButton à true
- Datakeynames à id (clé primaire)
- SelectedIndex à 0
et voilà c'est tout : pas de code javascript à écrire ni de code c# ou vb. Pas de postback lors du changement de sélection et le detailView est rendu en partiel.

CODE HTML COMPLET DE LA PAGE

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="comptes.aspx.cs" Inherits="comptes" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Consultation des comptes</title>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">

</asp:ScriptManager>

<br />

<asp:Menu ID="Menu1" runat="server" BackColor="#E0E0E0" DynamicHorizontalOffset="2"

Font-Names="Arial" Font-Size="Large" ForeColor="#0000C0" Orientation="Horizontal"

StaticSubMenuIndent="10px" Width="780px">

<Items>

<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Accueil" Value="Accueil"></asp:MenuItem>

<asp:MenuItem NavigateUrl="~/comptes.aspx" Text="Comptes" Value="Comptes"></asp:MenuItem>

<asp:MenuItem NavigateUrl="~/mouvements.aspx" Text="Mouvements" Value="Mouvements"></asp:MenuItem>

<asp:MenuItem Text="Données personnelles" Value="Données personnelles" NavigateUrl="~/client.aspx"></asp:MenuItem>

<asp:MenuItem Text="Etats" Value="Etats"></asp:MenuItem>

</Items>

</asp:Menu>

</div>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:ObjectDataSource ID="comptesDS" runat="server" SelectMethod="getComptesForClient"

TypeName="bankdemoBL.Operations">

<asp:SessionParameter Name="idclient" SessionField="idclient" Type="Int64" />

</SelectParameters>

</asp:ObjectDataSource>

<table>

<tr>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White"

BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" DataKeyNames="id"

DataSourceID="comptesDS" ForeColor="Black" GridLines="Vertical" SelectedIndex="0"

Width="347px">

<asp:CommandField ShowSelectButton="True" />

<asp:BoundField DataField="id" Visible="False" />

<asp:BoundField DataField="numcompte" />

<asp:BoundField DataField="libcompte" />

</Columns>

</asp:GridView>

</td>

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" CellPadding="4"

DataSourceID="compteDS" ForeColor="#333333" GridLines="None" Height="50px" Width="265px">

<asp:BoundField DataField="id" HeaderText="id" SortExpression="id" />

<asp:BoundField DataField="numcompte" HeaderText="N° compte" SortExpression="numcompte" />

<asp:BoundField DataField="libcompte" HeaderText="Libellé" SortExpression="libcompte" />

<asp:BoundField DataField="datecreat" DataFormatString="{0:dd/MM/yyyy}" HeaderText="Date création"

HtmlEncode="False" SortExpression="datecreat" />

</Fields>

</asp:DetailsView>

 <asp:ObjectDataSource ID="compteDS" runat="server" SelectMethod="getFicheCompte"

TypeName="bankdemoBL.Operations">

<asp:ControlParameter ControlID="GridView1" Name="idcompte" PropertyName="SelectedValue"

Type="Int64" />

</SelectParameters>

</asp:ObjectDataSource>

</td>

</tr>

</table>

</div>

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

Partager cet article

Repost0

Custom membership provider minimaliste appelant une fonction métier

Modèle MVC et AJAX

Retour à l'accueil

Commenter cet article