Tratamento de postbacks de um ModalPopup (VB)

por Christian Wenz

Baixar PDF

O controle ModalPopup no Kit de Ferramentas de Controle AJAX oferece uma maneira simples de criar um pop-up modal usando meios do lado do cliente. Cuidados especiais devem ser tomados quando um postback é criado de dentro do pop-up.

Visão geral

O controle ModalPopup no Kit de Ferramentas de Controle AJAX oferece uma maneira simples de criar um pop-up modal usando meios do lado do cliente. Cuidados especiais devem ser tomados quando um postback é criado de dentro do pop-up.

Etapas

Para ativar a funcionalidade de ASP.NET AJAX e o Kit de Ferramentas de Controle, o ScriptManager controle deve ser colocado em qualquer lugar na página (mas dentro do <form> elemento):

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

Em seguida, adicione um painel que serve como o pop-up modal. Lá, o usuário pode inserir um nome e um endereço de email. Um botão é usado para fechar o pop-up e salvar as informações. Observe que o OnClick atributo é definido para que um postback ocorra quando este botão é clicado:

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

A página em si consiste em dois rótulos para exatamente as mesmas informações: nome e endereço de email. Um botão é usado para disparar o pop-up modal:

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

Para que o pop-up apareça, adicione o ModalPopupExtender controle . Defina o PopupControlID atributo como a ID do painel e TargetControlID para a ID do botão:

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

Agora, sempre que o Save botão dentro do pop-up modal é clicado, o método do lado SaveData() do servidor é executado. Lá, você pode salvar os dados inseridos em um armazenamento de dados. Para simplificar, os novos dados são apenas saída no rótulo:

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

Além disso, os controles de caixa de texto dentro do pop-up modal devem ser preenchidos com o nome e o email atuais. No entanto, isso só é necessário quando nenhum postback ocorre. Se houver um postback, o recurso ASP.NET viewstate preencherá automaticamente as caixas de texto com os valores apropriados.

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

O pop-up modal causa um postback (Clique para exibir imagem em tamanho real)

AnteriorAvançar