Le contrôle GridView est un composant puissant pour afficher et manipuler des données tabulaires. Voici un exemple complet illustrent la gestion du tri, du paginage, et l'ouverture d'une fenêtre modale pour afficher des détails.

1. Déclaration du GridView et du pagineur

<asp:GridView ID="gvData" runat="server" AutoGenerateColumns="False" Width="100%" AllowPaging="True" EmptyDataText="Aucun enregistrement trouvé" PagerSettings-Visible="false"
    OnRowDataBound="gvData_RowDataBound" OnRowCreated="gvData_RowCreated" OnSorting="gvData_Sorting" OnDataBound="gvData_DataBound">
    <Columns>
        <asp:BoundField HeaderText="Code société" DataField="COMPANY_CODE" SortExpression="COMPANY_CODE" Visible="False" />
        <asp:BoundField HeaderText="Nom société" DataField="COMPANY_NAME" SortExpression="nlssort(COMPANY_NAME,'NLS_SORT=SCHINESE_PINYIN_M')" />
    </Columns>
    <PagerStyle HorizontalAlign="Center" />
    <EmptyDataTemplate>
        Aucune donnée correspondante.
    </EmptyDataTemplate>
</asp:GridView>
<Mes:AspNetPager ID="Pager1" runat="server" OnPageChanging="Pager1_PageChanging"></Mes:AspNetPager>

2. Événements côté serveur

Les méthodes suivantes doivent être implémentées dans le code-behind :

• gvData_RowDataBound
• gvData_RowCreated
• gvData_Sorting
• gvData_DataBound

La propriété SortExpression de chaque BoundField contient la chaîne de tri (par exemple avec une fonction SQL pour le tri chinois).

3. Lien vers une fenêtre modale avec paramètres

a. Inclusion des scripts et styles

<script type="text/javascript" src="../../js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="<%=Page.ResolveUrl("~/") %>Manager/js/jquery.windows-engine.js"></script>
<link type="text/css" rel="stylesheet" href="<%= Page.ResolveUrl("~/") %>Manager/Css/jquery.windows-engine.css" />

b. TemplateField avec lien et image

<asp:TemplateField HeaderText="Paramètre" SortExpression="DataValue">
    <ItemTemplate>
        <a href="javascript:showParam('<%# Eval("DataValue")%>')">
            <img src='<%# GetImageUrl(Eval("DataValue").ToString(), Eval("DataValue").ToString())%>' />
        </a>
    </ItemTemplate>
</asp:TemplateField>

c. Fonction JavaScript d'ouverture

<script type="text/javascript">
    function showParam(val) {
        $.window.create({
            id: "paramWindow",
            posx: 500, posy: 100,
            width: 600, height: 300,
            title: "Détail paramètre",
            type: "iframe",
            url: 'Details.aspx?param=' + val + '&extra=' + val
        });
    }
</script>

d. Page de destination (Details.aspx)

Créez une page ASPX nommée Details.aspx.

e. Récupération des paramètres côté serveur dans Details.aspx.cs

public string paramValue = (string)CommonUtil.sink("param", MethodType.Get, 255, 0, DataType.Str);
public string extraValue = (string)CommonUtil.sink("extra", MethodType.Get, 255, 0, DataType.Str);

Avec cette configuration, vous pouvez afficher, trier, paginer les données dans le GridView et ouvrir dynamiquement une fenêtre modale contenant les détails correspondant à la ligne cliquée.