O ASP.NET MessageBox é um Web User Control que integra a framework jQuery , é um controlo extensível que possibilita várias formas diferentes de apresentar MessageBox’s ao utilizador, utilizando duas tecnologias que em conjunto permitem a construção de um controlo dinâmico, extensível e de agradável utilização.
Disponível em http://jquerymessagebox.codeplex.com
Nesta primeira versão o controlo permite dois tipos diferentes de messagebox, uma do tipo “bubble” e outra standard.
O controlo possibilita a criação automática de um botão para interagir com o controlo, no entanto este é apenas opcional e pode-se desligar esta funcionalidade facilmente.
O design do controlo assenta nos plugins de jquery jQueryUI e plugin BlockUI, apenas com alguma modificações para estes se integrarem melhor num Web User Control de ASP.NET.
Vou passar agora a exemplificar a utilização do ASP.NET jQuery MessageBox com um exemplo para a MessageBox do tipo buble:
Página de exemplo que vai utilizar o controlo (default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryMessageBox._Default" %> <%@ Register src="WebUserControl/MessageBoxControl.ascx" tagname="MessageBoxControl" tagprefix="uc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <uc1:MessageBoxControl ID="MessageBoxControl1" runat="server" /> </div> </form> </body> </html>
Code behind (default.aspx.cs)
using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text; namespace jQueryMessageBox { public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { MessageBoxControl1.Title = "Test jQueryMessageBox"; MessageBoxControl1.NameBtn = "Open Message"; MessageBoxControl1.NameBtnMessageBox = "Close"; MessageBoxControl1.tipo = WebUserControl.MessageBoxControl.typeMessageBox.growlMessageBox; MessageBoxControl1.Text = "Login succeeded!"; } protected void btn_Click(object sender, EventArgs e) { MessageBoxControl1.btn_Click(sender, e); } } }
Ao carregar no botão visível na imagem, pode-se visualizar a mensagem dirigida ao utilizador.
Por outro lado se o tipo de mensagem que nos interessa mostrar ao utilizador contém muita informação e obriga a uma maior atenção por parte do utilizador, podemos utilizar este tipo de MessageBox, alterando o tipo de mensagem a apresentar e alterando o ficheiro default.aspx.cs:
using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text; namespace jQueryMessageBox { public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { MessageBoxControl1.Title = "Test jQueryMessageBox"; MessageBoxControl1.NameBtn = "Open Message"; MessageBoxControl1.NameBtnMessageBox = "Close"; /*Alteração do tipo de MessageBox*/ MessageBoxControl1.tipo = WebUserControl.MessageBoxControl.typeMessageBox.centerMessageBox; var dados = new StringBuilder(); dados.Append("jQuery is a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. It was released in "); dados.Append("January 2006 at BarCamp NYC by John Resig. Used by over 27% of the 10,000 most visited websites, jQuery is the most popular "); dados.Append("JavaScript library in use today."); dados.Append("jQuery is free, open source software, dual-licensed under the MIT License and the GNU General Public License, Version 2. jQuerys "); dados.Append("syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax "); dados.Append("applications. jQuery also provides capabilities for developers to create plugins on top of the JavaScript library. Providing this option, "); dados.Append("developers are able to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. This"); dados.Append("contributes to the creation of powerful and dynamic web pages."); dados.Append("Microsoft and Nokia have announced plans to bundle jQuery on their platforms, Microsoft adopting it initially within Visual Studio for use "); dados.Append("within Microsoft ASP.NET AJAX framework and ASP.NET MVC Framework whilst Nokia will integrate it into their Web Run-Time platform."); MessageBoxControl1.Text = dados.ToString(); } protected void btn_Click(object sender, EventArgs e) { MessageBoxControl1.btn_Click(sender, e); } } }
E o resultado ao executar o click no mesmo botão é apresentado em baixo:
O projecto de teste e o código fonte do controlo está disponível em http://jquerymessagebox.codeplex.com
Fontes de informação úteis:
http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx
Olá Bruno, achei muito show esse Messagebox, sou novo no ASP.NET e gostaria de utilizar este jQuery na minha aplicação. Gostaria de saber o que devo passar por parametro no caso do vb.net
tentei desta forma, mas não deu certo
Protected Sub btn_click(ByVal sender As Object, ByVal e As System.EventArgs)
MessageBoxControl1.btn_Click(ByVal sender As Object, ByVal e As System.EventArg)
End Sub
esse componente pode ser usado com o VS2010?
Sem problema, eu utilizo esse componente em um projecto de VS2010.
Como eu instalo isso no VS 2008
Como eu instalo isso no vs 2008?
Olá Bruno,
Parabéns pelo artigo! Como eu poderia chamar a mensagem através dos botões da minha aplicação?
Se vires com atenção o exemplo no post tens a resposta para a tua pergunta
Muito bom.. Parabéns.
Boa tarde,
e seu quisesse que os dois tipos aparecessem no centro da tela?