Udostępnij za pośrednictwem


Obsługiwanie ogłaszania zwrotnego w kontrolce ModalPopup (VB)

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka ModalPopup w zestawie narzędzi AJAX Control Toolkit oferuje prosty sposób tworzenia modalnego okna podręcznego przy użyciu środków po stronie klienta. Szczególną ostrożność należy wziąć pod uwagę podczas tworzenia ogłaszania zwrotnego z poziomu wyskakującego okienka.

Omówienie

Kontrolka ModalPopup w zestawie narzędzi AJAX Control Toolkit oferuje prosty sposób tworzenia modalnego okna podręcznego przy użyciu środków po stronie klienta. Szczególną ostrożność należy wziąć pod uwagę podczas tworzenia ogłaszania zwrotnego z poziomu wyskakującego okienka.

Kroki

Aby można było aktywować funkcje ASP.NET AJAX i Control Toolkit, kontrolka ScriptManager musi zostać umieszczona w dowolnym miejscu na stronie (ale w elemecie <form> ):

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

Następnie dodaj panel, który służy jako modalne okno podręczne. W tym miejscu użytkownik może wprowadzić nazwę i adres e-mail. Przycisk służy do zamykania okna podręcznego i zapisywania informacji. Należy pamiętać, że atrybut jest ustawiony tak, OnClick aby po kliknięciu tego przycisku następuje ogłaszanie zwrotne:

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

Sama strona składa się z dwóch etykiet dla dokładnie tych samych informacji: nazwy i adresu e-mail. Przycisk służy do wyzwalania modalnego wyskakującego okienka:

<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 wyświetlić wyskakujące okienko, dodaj kontrolkę ModalPopupExtender . PopupControlID Ustaw atrybut na identyfikator panelu i TargetControlID identyfikator przycisku:

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

Teraz po kliknięciu Save przycisku w modalnym oknie podręcznym jest wykonywana metoda po stronie SaveData() serwera. W tym miejscu można zapisać wprowadzone dane w magazynie danych. Dla uproszczenia nowe dane są po prostu danymi wyjściowymi w etykiecie:

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

Ponadto kontrolki pola tekstowego w modalnym oknie podręcznym powinny być wypełnione bieżącą nazwą i adresem e-mail. Jest to jednak konieczne tylko wtedy, gdy nie nastąpi ogłaszanie zwrotne. W przypadku ogłaszania zwrotnego funkcja ASP.NET widoku automatycznie wypełni pola tekstowe odpowiednimi wartościami.

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

Modalne wyskakujące okienko powoduje ogłaszanie zwrotne

Modalne wyskakujące okienko powoduje powrót (kliknij, aby wyświetlić obraz o pełnym rozmiarze)