JQuery com .Net – Criando algumas features
Faz tempo que não posto nada. Minhas desculpas por isso.
Mas hoje quero falar de algo que venho criando nas aplicações desenvolvidas na empresa.
Venho evoluindo desde o começo do ano, uma classe de base derivada da System.Web.UI.Page, para ser usada como base para qualquer web form, onde estou implementando vários métodos com base no JQuery para enriquecer as aplicações desenvolvidas na empresa. Basicamente é criar uma class.cs nova chamada PageBase (ou BasePage, como quiser) e começar assim:
using System;
using System.Text;
…
public class BasePage : System.Web.UI.Page
{
…
Se trata de uma coleção de métodos, enriquecendo o desenvolvimento de web forms com código c sharp, para realizar de forma mais elegante coisas simples mas fundamentais. Ao invés do velho e feio Alert e do Confirm usaremos o Dialog. Ao invés do maskedit do velho ajaxtoolkit usaremos o UI.MaskEdit.
Vamos ao código. Abaixo vou dar uma breve explicação do que é necessário. O básico. Mas não se preocupem, eu disponibilizei o projeto para vocês baixarem, usarem e até melhorarem.
Breve Explicação
Primeiro é necessário implementar nos web forms, ou em um masterpage para ser herdade nos demais web forms:
<script src=”/javascript/jquery.js” type=”text/javascript”></script>
<script src=”/javascript/ui/ui.core.js” type=”text/javascript”></script>
<script src=”/javascript/ui/ui.dialog.js” type=”text/javascript”></script>
<script src=”/javascript/ui/ui.draggable.js” type=”text/javascript”></script>
<script src=”/javascript/ui/ui.resizable.js” type=”text/javascript”></script>
<script src=”/javascript/ui/ui.datepicker.js” type=”text/javascript”></script>
<script src=”/javascript/ui/ui.datepicker-pt-BR.js” type=”text/javascript”></script>
<script src=”/javascript/ui/ui.accordion.js” type=”text/javascript”></script>
<script src=”/javascript/dateentry.min.js” type=”text/javascript”></script>
<script src=”/javascript/dateentry-br.js” type=”text/javascript”></script>
<script src=”/javascript/timeentry.min.js” type=”text/javascript”></script>
<script src=”/javascript/timeentry-pt.js” type=”text/javascript”></script>
<script src=”/javascript/bgiframe.js” type=”text/javascript”></script>
<script src=”/javascript/dimensions.js” type=”text/javascript”></script>
<script src=”/javascript/tooltip.js” type=”text/javascript”></scrip>
<script src=”/javascript/blockUI.js” type=”text/javascript”></script>
…
Importante: Não esqueça de incluir todos os arquivos de estilo. Muitos recursos não funcionam adequadamente sem isso.
Você pode encontrar todas as bibliotecas acima no site do jquery.
Agora um exemplo de código que teremos na BasePage. Lembre-se que a classe personalizada BasePage (ou PageBase) é a classe que será herdada em todos os web forms (public partial class Cadastro : BasePage);
/// Envia um alert, usando os recursos do JQuery Dialog (o título será “Atenção”)
/// </summary>
/// <param name=”Message”>Mensagem a ser mostrada</param>
/// <param name=”Title”>Título da Janela</param>
/// <param name=”oFocus”>Foca no objeto ao clicar em Ok ou fechar</param>
public static String ShowAlertToString(String Message, String Title, Control oFocus)
{
return String.Concat(“showJQueryAlert(‘”,
Message.Replace(“‘”, “´”).Replace(“\r”, “\n”).Replace(“\n”, “<br />”), “‘,’”,
(Title == String.Empty ? “Atenção” : Title), “‘”,
(oFocus != null ? “,’document.getElementById(\”" + oFocus.ClientID + “\”).focus(); $(\\’#dialog\\’).dialog(\”close\”);’” : “”), “);”);
}
…
O resultado são aplicações com aparência mais elegante sem muito trabalho.
Tela de exemplo simples
Baixe o projeto de exemplo que desenvolvi, clicando no ícone abaixo, e divirta-se.
Experimente o projeto aqui.
Espero ter mais tempo para postar coisas interessantes.
