A forma da qual os clientes e servidores usavam para buscar pequenos trechos de dados em uma página, eram nada funcionais e traziam vários transtornos para os usuários. Resumidamente, quando necessário uma interação da qual uma informação parcial é solicitada, a página inteira era enviada pelo servidor desnecessariamente, causando lentidão devido ao recarregamento e experiências ruins ao utilizar a plataforma.
Com a criação do AJAX (Asynchronous Javascript and XML), esse processo é feito de maneira inteligente, utilizando de requisições assíncronas das quais o servidor só retorna uma pequena parte da página que foi solicitada, evitando assim, o recarregamento completo quando desnecessário e possibilitando uma melhor interatividade e experiência de usuário.
ASP.NET AJAX:
A microsoft possuí uma integração total com o ajax no asp.net, possibilitando fazer uso do recurso em suas ferramentas de desenvolvimento.
O objetivo deste artigo é ensinar uma das possíveis formas de implementar uma janela modal em um sistema Web Forms utilizando o controller ModalPopUp.
ModalPopUp Extender:
Um controller que permite carregar uma janela sobreposta (modal) sobre a página principal, da qual pode ser exibida como um diálogo, alerta, receber uma entrada, uma condicional (com OK ou Cancelar), etc.
Propriedades:
- TargetControlID — Propriedade que recebe o ID do elemento que irá disparar a janela modal;
- PopupControlID — O ID do elemento que será exibido na janela modal;
- BackgroundCssClass — Referencia a classe CSS que será aplicada no background da janela modal enquanto ela estiver em exibição;
- DropShadow — Propriedade booleana que sendo “true”, define automaticamente sombreamento na janela modal;
- OkControlID — O ID do elemento que aceitará a janela modal, consequentemente a fechando;
- OnOkScript — O Script que será executado quando o elemento anterior for selecionado;
- CancelControlID — O ID do elemento que cancelará a janela modal, consequentemente a fechando;
- OnCancelScript —O Script que será executado quando o elemento anterior for selecionado;
- PopupDragHandleControlID — O ID do elemento que contém o cabeçalho popup/título que será usado como um identificador de drag
X — A coordenada X do canto superior esquerdo do popup modal (o pop-up será centralizado horizontalmente se não especificado)
Y — A coordenada Y do canto superior esquerdo do popup modal (o pop-up será centrado na vertical, se não especificado); - RepositionMode — Configurações que determinam se será necessário reposicionar o popup quando a janela for redimensionada ou o a barra de scroll for movimentada;
Ideal para qualquer aprendizado é a prática:
Você deverá instalar o AjaxControlToolKit através do nuget packet manager na sua aplicação.
Primeiramente, você deverá adicionar sua referência de assembly no topo da sua pagina .aspx, nas diretivas, dessa forma:
<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”ajaxToolkit” %>
Após importarmos os recursos necessário para utilizar, podemos adicionar o nosso controller na pagina:
<ajaxToolkit:ModalPopupExtender ID=”PopUpAjaxExemplo” runat=”server” TargetControlID=”ButtonGenericoID” PopupControlID=”divPopUp” BackgroundCssClass=”modalBackground” CancelControlID=”DivbtnFechar”></ajaxToolkit:ModalPopupExtender>
<div id=”divPopUp” class=”divPopUpClass”>
<span id=”DivbtnFechar” class=”ClickFechar”>×</span>
Utilizaremos um iframe que exibe a página inicial do Lorem Ipsum:
<iframe src=”https://www.lipsum.com/“ width=”100%” height=”90%”></iframe>
</div>
Para as personalizarmos a nossa janela modal, utilizaremos os seguintes estilos:
Para o background que ficará sobreposto quando a janela modal estiver ativada:
.modalBackground{
position: fixed; /* Manter na posição */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: scroll; /* Habilitar o scroll */
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4); /* opacidade escura */
}
Div que será exibida dentro da janela modal:
.divPopUpClass{
background-color: #fefefe;
/*margin: 15% auto; 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
height: 80%;
overflow-y: initial;
}
Botão de fechar da janela modal:
.ClickFechar{
color: red;
float: right;
font-size: 28px;
font-weight: bold;
}
.ClickFechar:hover,
.ClickFechar:focus{
color: black;
text-decoration: none;
cursor: pointer;
}
Contudo, está pronto! Adicionamos o controller, configuramos seus atributos e estilizamos as suas classes, basta ver os resultados na prática:
Conclusão:
O objetivo deste artigo é ajudar aqueles que precisam aplicar manutenções em sistemas legados com tecnologias da microsoft, mais precisamente focado no ASP.NET web forms mas pode ser utilizado de maneira geral tendo em vista as ferramentas e princípios que focamos em destacar aqui.
Referências:
Cristo vive!
