Obsługa postbacku z ModalPopup (C#)

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 zachować podczas tworzenia postbacku z poziomu wyskakującego okienka.

Przegląd

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 zachować podczas tworzenia postbacku z poziomu wyskakującego okienka.

Kroki

Aby aktywować funkcjonalność ASP.NET AJAX i zestawu narzędzi 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 okno modalne. W tym miejscu użytkownik może wprowadzić nazwę i adres e-mail. Przycisk służy do zamykania wyskakującego okienka i zapisywania informacji. Należy pamiętać, że atrybut OnClick jest ustawiony w taki sposób, aby po kliknięciu tego przycisku nastąpiło postback:

<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 . Ustaw atrybut PopupControlID na identyfikator panelu i atrybut TargetControlID na identyfikator przycisku:

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

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

protected void SaveData(object sender, EventArgs e)
{
    lblName.Text = HttpUtility.HtmlEncode(tbName.Text);
    lblEmail.Text = HttpUtility.HtmlEncode(tbEmail.Text);
}

Ponadto kontrolki pola tekstowego w oknie modalnym powinny być wypełnione bieżącą nazwą i adresem e-mail. Jest to jednak konieczne tylko wtedy, gdy nie nastąpi wycofanie. Jeśli istnieje postback, funkcja ASP.NET viewstate automatycznie wypełni pola tekstowe odpowiednimi wartościami.

void Page_Load()
{
    if (!Page.IsPostBack)
    {
        tbName.Text = lblName.Text;
        tbEmail.Text = lblEmail.Text;
    }
}

Okno modalne powoduje odświeżenie strony (kliknij, aby wyświetlić obraz o pełnym rozmiarze)