ASP.NET => UpdatePanel

Introduction

Cette rubrique explique comment ajouter un support de mise à jour de page partielle à une page Web à l'aide de deux contrôles serveur Microsoft Ajax: le contrôle ScriptManager et le contrôle UpdatePanel. Ces contrôles suppriment la nécessité d'actualiser toute la page avec chaque publication, ce qui améliore l'expérience utilisateur.

Syntaxe

<asp: UpdatePanel ID = "UpdatePanel1" runat = "serveur">
</ asp: UpdatePanel>

Remarques

Un scriptManager doit être ajouté à la page pour que UpdatePanel fonctionne.

Mise à jour de l'exemple de panneau

Étape 1: Ajouter ScriptManager à votre page

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

Étape 2: Ajoutez UpdatePanel à votre page juste après ScriptManager.

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

Étape 3: Après avoir ajouté du contenu à votre modèle de contenu UpdatePanels, votre page aspx devrait ressembler à ceci:

<%@ Page Language="C#" %>

<!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>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="padding-top: 10px">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        </div>

    </div>
    </form>
</body>
</html>

Étape 4: Ajoutez cette partie à votre page C #:

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

Étape 5: Exécutez maintenant votre application.

Résultat attendu:

Le contenu du panneau change à chaque fois que vous cliquez sur le bouton, mais la page entière n'est pas actualisée. Par défaut, la propriété ChildrenAsTriggers d'un contrôle UpdatePanel est vraie. Lorsque cette propriété est définie sur true, les contrôles à l'intérieur du panneau participent aux mises à jour de pages partielles lorsqu'un contrôle dans le panneau provoque une publication.

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

ASP.NET
UpdatePanel

Recherche…

Introduction

Syntaxe

Remarques

Mise à jour de l'exemple de panneau