Sdílet prostřednictvím


Zpracování postbacků z ovládacího prvku ModalPopup (VB)

Christian Wenz

Stáhnout PDF

Ovládací prvek ModalPopup v sadě nástrojů AJAX Control Nabízí jednoduchý způsob, jak vytvořit modální automaticky otevírané okno pomocí prostředků na straně klienta. Při vytváření postbacku z místní nabídky je potřeba věnovat zvláštní pozornost.

Přehled

Ovládací prvek ModalPopup v sadě nástrojů AJAX Control Nabízí jednoduchý způsob, jak vytvořit modální automaticky otevírané okno pomocí prostředků na straně klienta. Při vytváření postbacku z místní nabídky je potřeba věnovat zvláštní pozornost.

Postup

Aby bylo možné aktivovat funkce ASP.NET AJAX a Control Toolkit, ScriptManager musí být ovládací prvek umístěn kdekoli na stránce (ale v rámci elementu <form> ):

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

Dále přidejte panel, který slouží jako modální automaticky otevírané okno. Tam může uživatel zadat jméno a e-mailovou adresu. Tlačítko slouží k zavření automaticky otevírané nabídky a uložení informací. Všimněte si, že OnClick atribut je nastavený tak, aby při kliknutí na toto tlačítko došlo k zpětnému odeslání:

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
 Name: <asp:TextBox ID="tbName" runat="server" /><br/>
 Email: <asp:TextBox ID="tbEmail" runat="server" /><br/>
 <asp:Button ID="OKButton" runat="server" Text="Save"OnClick="SaveData" />
</asp:Panel>

Samotná stránka se skládá ze dvou popisků pro přesně stejné informace: jméno a e-mailovou adresu. K aktivaci modálního automaticky otevírané nabídky se používá tlačítko:

<div>
 Contact Information:
 <asp:Label ID="lblName" runat="server" Text="AJAX Fanatic"/><br />
 <asp:Label ID="lblEmail" runat="server" Text="ajax@fanatic"/><br />
 <asp:Button ID="btn1" runat="server" Text="Edit"/>
</div>

Aby se automaticky otevírané okno zobrazilo, přidejte ovládací ModalPopupExtender prvek. PopupControlID Nastavte atribut na ID panelu a TargetControlID na ID tlačítka:

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btn1" PopupControlID="ModalPanel" />

Nyní při každém kliknutí na Save tlačítko v modálním automaticky otevírané nabídce se spustí metoda na straně SaveData() serveru. Tam můžete zadaná data uložit do úložiště dat. Pro zjednodušení jsou nová data pouze výstupem v popisku:

Protected Sub SaveData(ByVal sender As Object, ByVal e As EventArgs)
 lblName.Text = HttpUtility.HtmlEncode(tbName.Text)
 lblEmail.Text = HttpUtility.HtmlEncode(tbEmail.Text)
End Sub

Ovládací prvky textového pole v modálním automaticky otevírané nabídce by také měly být vyplněné aktuálním jménem a e-mailem. To je však nutné pouze v případě, že nedojde k žádnému zpětnému odeslání. Pokud dojde k zpětnému odeslání, funkce ASP.NET viewstate automaticky vyplní textová pole příslušnými hodnotami.

Sub Page_Load()
 If Not Page.IsPostBack Then
 tbName.Text = lblName.Text
 tbEmail.Text = lblEmail.Text
 End If
End Sub

Modální automaticky otevírané okno způsobí postback.

Modální automaticky otevírané okno způsobí postback (kliknutím zobrazíte obrázek v plné velikosti).