Обработка обратных вызовов из ModalPopup (C#)

Кристиан Венц

Скачать в формате PDF

Элемент управления ModalPopup в наборе средств управления AJAX предоставляет простой способ создания модального всплывающего окна с помощью клиентских средств. Необходимо уделить особое внимание при создании обратной передачи данных внутри всплывающего окна.

Обзор

Элемент управления ModalPopup в наборе средств управления AJAX предоставляет простой способ создания модального всплывающего окна с помощью клиентских средств. Необходимо уделить особое внимание при создании обратной передачи данных внутри всплывающего окна.

Шаги

Чтобы активировать функциональные возможности ASP.NET AJAX и набора средств управления, ScriptManager элемент управления должен быть помещен в любое место на странице (но в элементе <form> ):

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

Затем добавьте панель, которая выступает в качестве модального всплывающего окна. Там пользователь может ввести имя и адрес электронной почты. Кнопка используется для закрытия всплывающего окна и сохранения сведений. Обратите внимание, что атрибут задается таким образом, OnClick чтобы при нажатии этой кнопки произошла обратная обратная связь:

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

Сама страница состоит из двух меток для точно такой же информации: имя и адрес электронной почты. Кнопка используется для активации модального всплывающего окна:

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

Добавьте элемент управления ModalPopupExtender, чтобы появилось всплывающее окно. PopupControlID Задайте атрибут идентификатору панели и TargetControlID идентификатору кнопки:

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

Теперь при клике на кнопку Save в модальном всплывающем окне выполняется метод SaveData() на серверной стороне. Там можно сохранить введенные данные в хранилище данных. Для простоты новые данные просто отображаются на метке.

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

Кроме того, текстовые поля управления в модальном всплывающем окне должны быть заполнены текущим именем и адресом электронной почты. Однако это необходимо только при отсутствии постбэка. Если есть обратная связь, функция представления ASP.NET автоматически заполняет текстовые поля соответствующими значениями.

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

Модальное всплывающее окно вызывает постбэк (кликните, чтобы увеличить изображение)