Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

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 :

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

 

 

<title>Untitled Page</title>

</head>

<body>

 

 

<form id="form1" runat="server">

<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">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

 

 

<title>Consultation des comptes</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

 

 

<form id="form1" runat="server">

 

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

</asp:ScriptManager>

<div id="header" style="width: 678px; height: 65px">

<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">

<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

<DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />

<DynamicMenuStyle BackColor="#F7F6F3" />

<StaticSelectedStyle BackColor="#5D7B9D" />

<DynamicSelectedStyle BackColor="#5D7B9D" />

<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

<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&#233;es personnelles" Value="Donn&#233;es personnelles" NavigateUrl="~/client.aspx"></asp:MenuItem>

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

</Items>

<StaticHoverStyle BackColor="#7C6F57" ForeColor="White" />

</asp:Menu>

</div>

 

 

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

<ContentTemplate>

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

TypeName="bankdemoBL.Operations">

<SelectParameters>

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

</SelectParameters>

</asp:ObjectDataSource>

<div style="text-align: center">

<table>

<tr>

<td style="width: 500px; height: 210px;">

<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">

<FooterStyle BackColor="#CCCCCC" />

<Columns>

<asp:CommandField ShowSelectButton="True" />

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

<asp:BoundField DataField="numcompte" />

<asp:BoundField DataField="libcompte" />

</Columns>

<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />

<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />

<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />

<AlternatingRowStyle BackColor="#CCCCCC" />

</asp:GridView>

</td>

<td style="width: 850px; height: 210px;">

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

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

<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />

<CommandRowStyle BackColor="#E2DED6" Font-Bold="True" />

<EditRowStyle BackColor="#999999" />

<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />

<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />

<Fields>

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

<asp:BoundField DataField="numcompte" HeaderText="N&#176; compte" SortExpression="numcompte" />

<asp:BoundField DataField="libcompte" HeaderText="Libell&#233;" SortExpression="libcompte" />

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

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

</Fields>

<FieldHeaderStyle BackColor="#E9ECF1" Font-Bold="True" />

<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />

<AlternatingRowStyle BackColor="White" ForeColor="#284775" />

</asp:DetailsView>

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

TypeName="bankdemoBL.Operations">

<SelectParameters>

<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

Repost 0
Pour être informé des derniers articles, inscrivez vous :

Commenter cet article