Zoeken…


Invoering

In dit onderwerp wordt beschreven hoe u update van gedeeltelijke pagina's toevoegt aan een webpagina met behulp van twee Microsoft Ajax-serverbesturingselementen: het ScriptManager-besturingselement en het UpdatePanel-besturingselement. Deze besturingselementen verwijderen de vereiste om de hele pagina bij elke postback te vernieuwen, wat de gebruikerservaring verbetert.

Syntaxis

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

Opmerkingen

Er moet een ScriptManager aan de pagina worden toegevoegd om het UpdatePanel te laten werken.

Voorbeeld van paneel bijwerken

Stap 1: Voeg ScriptManager toe aan uw pagina

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

Stap 2: Voeg UpdatePanel toe aan uw pagina net na ScriptManager.

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

Stap 3: Na het toevoegen van inhoud aan uw UpdatePanels Content Template zou uw aspx-pagina er ongeveer zo uit moeten zien:

<%@ 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>

Stap 4: Voeg dit onderdeel toe aan uw C # pagina:

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

Stap 5: Voer nu uw applicatie uit.

Verwacht resultaat:

De paneelinhoud verandert elke keer dat u op de knop klikt, maar de hele pagina wordt niet vernieuwd. Standaard is de eigenschap ChildrenAsTriggers van een besturingselement UpdatePanel waar. Wanneer deze eigenschap is ingesteld op true, nemen besturingselementen in het paneel deel aan updates van gedeeltelijke pagina's wanneer een besturingselement in het paneel een terugzending veroorzaakt.



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow