This article is currently in the process of being translated into Czech (~99% done).

Controls:

UpdatePanel control

Prvek UpdatePanel je prvděpodobně nejdůležitějším prvkem v balíčku ASP.NET AJAX. On nám zAJAXuje všechny prvky uvnitř něj a umožní tak částečné znovunačtení oblasti. Už jsme jej použili v příkladu Hello world a v této kapitole půjdeme do hloubky s více aspekty tohoto prvku.

<asp:UpdatePanel> tag má dva potomky - ContentTemplate a Triggers tagy. ContentTemplate tag je vyžadován, protože drží obsah panelu. Obsahem může být cokoli, co byste normálně umístili na svou stránku od textu až po webové prvky. Tag Triggers vám umožní definovat příslušné triggery ( spouštěče ), které provedou změnu obsahu panelu. Následující příklad ukazuje použití obou tagů potomků.

<%@ 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>UpdatePanel</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger controlid="UpdateButton2" eventname="Click" />
        </Triggers>
            <ContentTemplate>
                <asp:Label runat="server" id="DateTimeLabel1" />
                <asp:Button runat="server" id="UpdateButton1" onclick="UpdateButton_Click" text="Update" />               
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel runat="server" id="UpdatePanel1" updatemode="Conditional">           
            <ContentTemplate>
                <asp:Label runat="server" id="DateTimeLabel2" />
                <asp:Button runat="server" id="UpdateButton2" onclick="UpdateButton_Click" text="Update" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Zde je Code Behind. Jen přidejte následující metodu do souboru:

protected void UpdateButton_Click(object sender, EventArgs e)
{
    DateTimeLabel1.Text = DateTime.Now.ToString();
    DateTimeLabel2.Text = DateTime.Now.ToString();
}

Tak o čem je tento příklad ? Zkuste spustit a klikejte na obě tlačítka. Všimnete si, že první tlačítko upravuje jen první datum, kdežto druhé tlačítko upravuje obě. Proč ? Nastavili jsme Panely k podmíněné úpravě, což znamená, že jejich obsah je upraven jen tehdy, když něco uvnitř zapřičiní postback nebo když je spuštěn jeden z triggerů.

Jak vidíte, první UpdatePanel obsahuje trigger, který odkazuje na druhé tlačítko. To zajistí, že první panel je upraven i když je použit prvek v jiném UpdatePanelu.

AsyncPostBackTrigger tag je docela jednoduchý. Obsahuje jen dva atributy : controlid - odkaz na prvek, z nějž se trigger může spouštět, a eventname - říká, jaký typ události může trigger spustit. Přejete-li si, aby obsah UpdatePanelu byl jakkoli upraven, můžete změnit vlastnost updatemode na Always ( vždy ).

Obecně, měli byste UpdatePanel použít jen kolem těch prvků, které chcete upravovat. Nedávejte do Update Panelu celou stránku a nebojte se užít více panelů, jelikož vám to dá více možností k tomu, jaké oblasti a kdy je změnit.

This article has been fully translated into the following languages:

Is your preferred language not on the list? Click here to help us translate this article into your language!

Metadata

UpdatePanel control