Mostrar caixa de alert personalizado com Bootstrap pelo codebehind C# AspNet

Olá leitor, neste tutorial você aprenderá a criar no codebehind uma caixa de alerta para usar em suas páginas C# AspNet após um postback. Ela deslizará do topo(jQuery .slideDown()), permanecerá na tela por alguns segundos(jQuery .delay) e se esconderá novamente(jQuery .slideUp()).

O resultado será parecido com a imagem abaixo.



Para isso, utilizaremos a biblioteca jQuery e, opcionalmente, o framework Bootstrap para aproveitar sua folha de estilo .css. Antes de tudo, referenciamos os arquivos no cabeçalho da página:


Também precisamos criar uma pequena função em jQuery para mostrar a div e logo em seguida esconde-la novamente. Ficará assim:


Por fim, vamos adicionar um botão na página para criar um evento de click que, após o Postback, mostrará o alerta criado.
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Mostrar alerta" />

No code behind vamos criar o html com a div e já chamar a função jQuery criada anteriormente. Retornaremos o código usnado o Response.Write().

Pronto! Basta clicar no botão e ver o resultado.

Para facilitar o entendimento, disponibilizo para download os arquivos .aspx e .aspx.cs criados neste link: http://goo.gl/ACvwuC

Abraço!

3 comentários:

Não esqueça de enviar um comentário. Isto motiva o autor a continuar postando e também é uma forma de agradecimento