Web nos dias de hoje

Nos últimos anos a Web evoluiu de forma bastante acelerada e com isso as aplicações Web se tornaram mais rápidas, leves e acessadas por uma grande variedade de dispositivos (PCs, Smarthphones, Tablets) e browsers (Internet Explorer, Firefox, Google Chrome, Opera, Safari, etc). O uso de uma padronização no desenvolvimento web (Web Standards) era necessário para garantir que o usuário tivesse a mesma experiência de navegação quando acessado um mesmo website de qualquer dispositivo ou browser.

Além da evolução Web, novas práticas como a metodologia ágil e o desenvolvimento orientado a testes ganharam um grande espaço nas listas de discussões como itens extremamente importantes a serem considerados na construção de qualquer projeto de software.

Infelizmente, o modelo WebForms não acompanhou de maneira satisfatória essa evolução e diante desse novo cenário inúmeras limitações começaram a aparecer:

• À medida que a complexidade das páginas crescia, começavam a ficar extremamente “pesadas” com o uso do ViewState para armazenar o estado da página entre as requisições.
• Difícil controle sobre o HTML gerado, já que os componentes e controles são responsáveis por esse processo.
• Dificuldade de trabalhar com frameworks Javascript, como o jQuery.
• Apesar do código HTML ser separado do código de servidor(Code-Behind), os dois ainda possui uma forte dependência, dificultando o trabalho paralelo de desenvolvedores e designers e impossibilitando a escrita de testes unitários.
• E muitas outras…

O ASP .NET começava a perder seu espaço para novas tecnologias, como o Ruby on Rails. Mais do que nunca, a plataforma precisava se de um novo modelo de desenvolvimento…

ASP .NET MVC Framework

O ASP .NET MVC é a resposta da Microsoft em respeito aos padrões atuais de desenvolvimento Web. Ele não é uma evolução ou atualização do modelo WebForms, mas sim um novo modelo construído sobre o Runtime do ASP .NET e disponível para que você tenha uma opção a mais na hora de escolher a melhor solução que se adeque ao seu problema.

Figura 1 - Plataforma ASP .NET

O ASP .NET MVC é baseado no padrão arquitetural MVC (Model-View-Controller) criado na década de 1970 por Trygve Reenskaug. O padrão MVC fornece uma maneira de separar as responsabilidades de manutenção e apresentação dos dados de uma aplicação em 03 partes: Modelos (Models), Controladores (Controllers) e Visão (Views).

• Controllers: São responsáveis por capturar as requisições (requests) enviados pelo usuário. É ele quem interpreta as ações dos usuários, consome os dados do Modelo e decide qual View será apresentada ao usuário. Em uma aplicação Web as ações do usuário podem ser desde cliques em botões ou links, envio de formulários, etc.
• Models: Responsável por manter o estado persistente dos dados, permitindo que os controladores tenham acesso as funcionalidades de manipulação desses dados encapsulados pelo próprio modelo.
• Views: Responsável por obter os dados do Modelo (ou não) e renderizá-los em forma de conteúdo visual ao usuário, podendo ser um conteúdo HTML, texto, arquivo, objeto JSON, etc.

A figura 2 demonstra a forma como esses componentes interagem entre si e os seus limites.

Figura 2 - Pipeline de processamento do padrão MVC

Repare que as requisições (request) são capturadas e interpretadas pelo Controller, e não mais por uma página. Caso o Controller tenha a necessidade de alterar ou obter alguma informação do Model, ele o fará. O seu próximo passo é decidir qual View será enviada. Ao final, a View irá renderizar o conteúdo visual da resposta (response) para o usuário da maneira que achar melhor.

Existem várias tecnologias que se utilizam desse padrão, como o já falado Ruby on Rails, e há alguns frameworks que podem ser usados no próprio ASP .NET. Mas o que temos disponível agora é uma implementação deste padrão pela própria Microsoft, integrada como um novo modelo de desenvolvimento sobre a plataforma ASP .NET.

Mas não se engane se acha que o padrão MVC é a única novidade deste novo modelo. Vários recursos e funcionalidades foram criados a fim de nos auxiliar de forma extremamente simples os vários cenários da etapa de desenvolvimento de um projeto.

O que ganhamos com esse padrão?

O desenvolvedor volta a ter liberdade no desenvolvimento e o obriga a ter profundo conhecimento em HTML, CSS, Javascript e sobre o protocolo HTTP. Assim como era necessário na época do ASP tradicional, e como outras linguagens como o PHP. A grande diferença é que essas linguagens mais antigas não se utilizavam do padrão MVC, o que acabava deixando a aplicações muito complexas e de difícil manutenção pela falta de separação dessas responsabilidades.

Os dois modelos (WebForms e MVC) possuem suas vantagens e desvantagens. Mas se você busca construir qualquer tipo de aplicação Web, seguindo os padrões Web atuais, permitindo que desenvolvedores e designers trabalhem em conjunto e de forma paralela, que seja escalável, testável e de fácil manutenção, o ASP .NET MVC é o modelo certo para você.

Conclusão

Aprender a trabalhar com o ASP .NET MVC não é uma tarefa trivial pois exige do desenvolvedor uma mudança de pensamento em como desenvolver uma aplicação com este aspecto arquitetural. Você só conseguirá ver as diferenças e vantagens deste novo modelo quando começar a compreender a maneira como as coisas funcionam, mas para isso seja alcançado você tem que colocar a mão na massa. Comece a criar aplicações simples como uma agenda de contatos, por exemplo.

Eu já trabalhei bastante com ASP .NET WebForms, mas hoje eu não abro mão de criar minhas aplicações com o ASP .NET MVC, é muito melhor, pois a liberdade, a agilidade e a facilidade que tenho hoje são maiores do que eram na época do WebForms.

Nos próximos posts, irei mostrar como criar uma aplicação simples ASP .NET MVC e apresentar os recursos e funcionalidades que vão além do padrão MVC.

Abraços e até o próximo post!

Este post tem a única missão de apresentar para vocês a nova série de posts e artigos sobre os conceitos básicos e fundamentais do ASP .NET MVC!

O objetivo dessa série é apresentar os conceitos e funcionalidades essenciais para que você consiga entender e compreender como o ASP .NET MVC funciona e como ele pode facilitar seu desenvolvimento web em vários aspectos.

Minha idéia geral em relação aos artigos não é de apresentar nada superficialmente, assim como também não irei mostrar nada muito aprofundado. A intenção é apresentar o necessário pra estimular seu interesse em estudar mais e mais sobre essa “nova maneira” de desenvolver para a Web usando a plataforma ASP .NET.

Usarei esse post como um índice dos artigos que estarei escrevendo aos poucos. Confira a lista de posts que estou preparando:

1. Introdução ao ASP .NET MVC
2. Criando a primeira aplicação ASP .NET MVC
3. Rotas
4. Rotas: Customização
5. Rotas: Restrições
6. Controllers
7. Controllers: Model Binding
8. Controllers: Action Results
9. Controllers: Action Filters
10. Views
11. Views: Razor View Engine
12. Views: Razor Layout (Master Page)
13. Views: Razor Section
14. Views: Razor Helpers
15. Views: Html.Partial e Html.Action
16. Model
17. Model: Validation
18. Model: Convenções e Boas práticas
19. Ajax
20. Ajax.ActionLink
21. Ajax.ActionForm
22. Ajax com jQuery

Alguma sugestão de assunto para acrescentar? Manda aí nos comentários!

*OBS: Este post será constantemente atualizado a medida que os artigos forem saindo.

HomeController.cs:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index_Cadastrar()
    {
        ViewBag.Mensagem = "Você pressionou o botão Cadastrar";
        return View();
    }

    [HttpPost]
    public ActionResult Index_Cancelar()
    {
        ViewBag.Mensagem = "Você pressionou o botão Cancelar Cadastro";
        return View();
    }
}

Index.cshtml:

<form action="@Url.Action("Index")" method="post">
    <label>Nome Completo</label>
    <br />
    <input type="text" name="Nome" value="" />
    <br />
    <label>Email</label>
    <br />
    <input type="text" name="Email" value="" />
    <br />
    <input type="submit" name="Cadastrar" value="Cadastrar" />
    <input type="submit" name="Cancelar Cadastro" value="Cancelar Cadastro" />

    <p>@ViewBag.Mensagem</p>
</form>

Pelo fato dos dois (02) botões submit estarem contido no mesmo formulário, independentemente de qual deles seja pressionado (Cadastrar ou Cancelar Cadastro), o formulário acima SEMPRE fará uma requisição para a action Index do controller Home. Como fazer então para que diferentes actions sejam executadas de acordo com contexto de cada botão? Ou seja, como fazer com que os botões Cadastrar e Cancelar executem respectivamente as action Index_Cadastrar e Index_Cancelar?

Eis a solução:

O ASP .NET MVC nos fornece um recurso chamado de Action Filter (filtros de ação). Basicamente, como o próprio nome já diz, um Action Filter é usado para “filtrar” as requisições que são enviadas para uma determinada action.
Existem dois tipos de filtros: os Action Filters propriamente ditos e os Selector Filters. Mas qual a diferença?
Os Action Filters são usados para adicionar operações que podem ocorrer antes e depois da execução de uma determinada action.

Já os Selector Filters são usados para definir e validar a forma como uma determinada action será chamada.
Para o nosso caso, como não existe nada pronto no ASP .NET MVC que resolva de imediato o nosso problema, precisaremos cria-lo. E para isso implementaremos um novo Selector Filter que irá “validar” a chamada de uma action baseado no botão submit que foi pressionado. Segue abaixo o nosso novo filtro:

public enum SubmitRequirement
{
    Equal,
    StartsWith
}

public class SubmitAttribute : ActionMethodSelectorAttribute
{
    private readonly string _submitButtonName;
    private readonly SubmitRequirement _requirement;

    public SubmitAttribute(string submitButtonName):
        this(SubmitRequirement.Equal, submitButtonName)
    {
    }

    public SubmitAttribute(SubmitRequirement requirement, string _submitButtonName)
    {
        this._submitButtonName = _submitButtonName;
        this._requirement = requirement;
    }

    public override bool IsValidForRequest(ControllerContext controllerContext, MethodInfo methodInfo)
    {
        string buttonName = _submitButtonName;

        try
        {
            string value = "";
            switch (this._requirement)
            {
                case SubmitRequirement.Equal:
                    {
                        value = controllerContext.HttpContext.Request.Form[buttonName];
                    }
                    break;
                case SubmitRequirement.StartsWith:
                    {
                        foreach (var formValue in controllerContext.HttpContext.Request.Form.AllKeys)
                        {
                            if (formValue.StartsWith(buttonName, StringComparison.InvariantCultureIgnoreCase))
                            {
                                value = controllerContext.HttpContext.Request.Form[formValue];
                                break;
                            }
                        }
                    }
                    break;
            }
            if (!String.IsNullOrEmpty(value))
                return true;
        }
        catch (Exception exc)
        {
            Debug.WriteLine(exc.Message);
        }

        return false;
    }
}

Repare que para implementar um novo Selector Filter temos que herdar da classe ActionMethodSelectorAttribute e implementar o método IsValidForRequest que irá retornar True se a requisição for válida e False de for inválida. Depois disso a lógica é simples: Se o nome do botão submit que estiver vindo pela requisição “bater” com o nome informado para o filtro, ele irá validar a requisição e irá chamar a action correspondente.

Veja como ficou a aplicação do nosso filtro em nossas actions:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost, ActionName("Index")]
    [Submit("cadastrar")]
    public ActionResult Index_Cadastrar()
    {
        ViewBag.Mensagem = "Você pressionou o botão Cadastrar";
        return View();
    }

    [HttpPost, ActionName("Index")]
    [Submit(SubmitRequirement.StartsWith, "cancelar")]
    public ActionResult Index_Cancelar()
    {
        ViewBag.Mensagem = "Você pressionou o botão Cancelar Cadastro";
        return View();
    }
}

Você deve ter reparado em duas (02) coisas.

1. A utilização do filtro ActionName (Ele também é um Selector Filter!) que diz para o ASP .NET MVC que aquela Action não se chama Index_Cadastrar e sim Index, e isso serve para a Index_Cancelar também. Lembra quando eu disse que independentemente do botão submit que clicarmos no nosso formulário ele sempre irá chamar a action Index? Então, como as duas actions se chamam Index, o ASP .NET MVC irá chamar as duas! É ai que entra o nosso segundo filtro!
2. Com o nosso novo filtro, dizemos qual action deve ser chamada com base no nome do botão que foi clicado em nossa view. Ou seja, ele irá validar e “selecionar” a action correta para atender aquela requisição. Entendeu porque eles se chamam Selector Filters (filtros de seleção)?
   Repare que na nossa implementação eu posso informar exatamente o nome do botão que irá chamar aquela action como passando apenas o início do nome do botão por meio do enumerador SubmitRequirement!

Agora é só compilar e testar:

Testando o clique do botão Cadastrar

Testando o clique do botão Cancelar

Abraço e até a próxima.

Baixe o exemplo deste post: Demo-SubmitAttribute.zip

• Atualização dos scripts e no layout dos templates de projeto.
• Novo template: Mobile Project Template.
• Muitas novidades para suporte a aplicações mobile.
• Aprimorado o suporte a controllers assíncronos.
• Muitas outras novidades você poderá ver nas notas desse release.

ASP .NET MVC 4 - Redesign no template dos projetos.

 

ASP .NET MVC 4 - Novo template rodando em mobile.

 

ASP .NET MVC 4 - Template com jQuery Mobile.

Abraços!

O código fonte do plugin está publicado no GitHub no seguinte endereço:

https://github.com/mbanagouro/jquery.cep

Para usar a biblioteca em uma aplicação ASP .NET MVC 3 é muito simples, você só precisa acessar o gerenciador de pacotes do NuGet e procurar por jQuery CEP, ou simplesmente digitar a linha de comando abaixo no console do Package Manager Console:

Existem 2 cenários básicos de utilizar o plugin. O primeiro é realizando a chamada ao método $.cep onde deve ser passado 2 parâmetros, onde o 1º é o número do cep e o 2º é um JSON com os callbacks de retorno. Para capturar o retorno dos dados do endereço é necessário simplesmente informar uma função para o callback success recebendo um apenas um parâmetro no qual será passado para a função com os dados retornados.

//Chamando a função jQuery CEP
$.cep('86010140', {
    success: function (data) {
        document.writeln(data.tipoLogradouro + ' ' + data.logradouro + '<br/>');
        document.writeln(data.bairro + '<br/>');
        document.writeln(data.estado + ' / ' + data.cidade + '<br/>');
    }
});

O segundo cenário é selecionando o input do CEP e chamar a função $.cep sobre o conjunto de elementos passando como parâmetro o JSON com os callbacks de retorno.

//Selecionando o elemento pelo ID e chamando a função jQuery CEP
$('#input-cep').cep({
    success: function (data) {
        document.writeln(data.tipoLogradouro + ' ' + data.logradouro + '<br/>');
        document.writeln(data.bairro + '<br/>');
        document.writeln(data.estado + ' / ' + data.cidade + '<br/>');
    }
});

Neste caso a função $.cep irá percorrer os elementos selecionados pela função jQuery e recuperar o valor de cada campo realizando a chamada do CEP.

Agora em um exemplo completo, criei um projeto ASP .NET MVC 3 e implementei o 2º cenário em uma página simples, veja como ficou:

@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
    <title>Demo jQuery CEP</title>
    <script src="@Url.Content("~/Scripts/jquery-1.6.3.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.cep-1.0.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(function () {

            $('#buscar-cep').click(function () {
                $('#cep').cep({
                    success: function (data) {
                        $('#logradouro').val(data.tipoLogradouro + ' ' + data.logradouro);
                        $('#bairro').val(data.bairro);
                        $('#estado').val(data.estado);
                        $('#cidade').val(data.cidade);
                    }
                });
            });

        });
    </script>
</head>
<body>

<input type="text" id="cep" name="cep" value="" maxlength="8" /><br />
<button id="buscar-cep">Buscar</button><br /><br />

Logradouro<br />
<input type="text" id="logradouro" name="logradouro" value="" /><br />
Bairro<br />
<input type="text" id="bairro" name="bairro" value="" /><br />
Estado<br />
<input type="text" id="estado" name="estado" value="" /><br />
Cidade<br />
<input type="text" id="cidade" name="cidade" value="" /><br />

</body>
</html>

Como eu disse anteriomente, o parâmetro JSON passado serve alguns callbacks no qual são executados durante a busca do CEP. Os callbacks disponíveis são:

• load: É chamado antes de realizar a consulta do CEP.
• complete: É chamado quando a consulta ao WebService é finalizada.
• error: É chamado quando ocorre algum erro na chamada ou o CEP não retorna dados válidos. Recebe um parâmetro com a mensagem do erro que ocorreu.
• success: É chamado quando o retorno do endereço é realizado com sucesso. Recebe um parâmetro com os dados do endereço no formato JSON.

Com isso em mente podemos ter mais controle sobre o processo de busca e dar um feedback visual para o usuário demonstrando que uma busca está sendo realizada. No exemplo de código dado acima fiz alguns incrementos para manipular os callbacks citados.

@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
    <title>Demo jQuery CEP</title>
    <script src="@Url.Content("~/Scripts/jquery-1.6.3.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.cep-1.0.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(function () {

            $('#buscar-cep').click(function () {
                $('#cep').cep({
                    load: function () {
                        //Exibe a div loading
                        $('#loading').show();
                    },
                    complete: function () {
                        //Esconde a div loading
                        $('#loading').hide();
                    },
                    error: function (msg) {
                        //Exibe em alert a mensagem de erro retornada
                        alert(msg);
                    },
                    success: function (data) {
                        $('#logradouro').val(data.tipoLogradouro + ' ' + data.logradouro);
                        $('#bairro').val(data.bairro);
                        $('#estado').val(data.estado);
                        $('#cidade').val(data.cidade);
                    }
                });
            });

        });
    </script>
</head>
<body>

<input type="text" id="cep" name="cep" value="" maxlength="8" /><br />
<label id="loading" style="display:none">Buscando...</label><br />

<button id="buscar-cep">Buscar</button><br /><br />

Logradouro<br />
<input type="text" id="logradouro" name="logradouro" value="" /><br />
Bairro<br />
<input type="text" id="bairro" name="bairro" value="" /><br />
Estado<br />
<input type="text" id="estado" name="estado" value="" /><br />
Cidade<br />
<input type="text" id="cidade" name="cidade" value="" /><br />

</body>
</html>

Bons códigos!

Baixe aqui o demo deste post: DemoJqueryCep.zip

O jQuery Price Format é um plugin que atende esse caso e é bastante simples de usar e altamente customizável. Vamos para os exemplos:

Para utilizá-lo faça a referência dos arquivos necessários na tag head da sua página html. Neste caso só precisamos do jQuery e do próprio jQuery Price Format.

<head>
    <title> título do site </title>
    ...
    <script type="text/javascript" src="jquery-1.6.min.js"></script>
    <script type="text/javascript" src="jquery.price_format.1.5.js"/></script>
</head>

Para utilizar o plugin basta usar o seletor do jQuery para “selecionar” os inputs que você deseja aplicar a máscara e chamar a função priceFormat(). A função priceFormat() recebe como parâmetro um JSON onde é possível passar algumas propriedades que permitem customizar a máscara de formatação.

$('input.money').priceFormat({ centsSeparator: ',', thousandsSeparator: '.' });

No exemplo acima, eu estou selecionando todos os input que possuem a class money e aplico a máscara definindo que o separador de centavos (centsSeparator) será com vírgula e separador de milhar (thousandsSeparator) será com ponto.

Abaixo confira outras maneiras de utilizar o plugin:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Máscara com jQuery em valores montários</title>

<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.price_format.1.5.js"/></script>

<script type="text/javascript">
jQuery(function () {
			$('#exemplo1').priceFormat();

			$('#exemplo2').priceFormat({
				prefix: 'R$ ',
				centsSeparator: ',',
				thousandsSeparator: '.'
			});

			$('#exemplo3').priceFormat({
				prefix: '',
				thousandsSeparator: ''
			});

			$('#exemplo4').priceFormat({
				limit: 5,
				centsLimit: 3
			});

			$('#exemplo5').priceFormat({
				clearPrefix: true
			});

			$('#exemplo6').priceFormat({
				allowNegative: true
			});
		});
</script>

</head>
<body>
<h1>Máscara com jQuery em valores montários</h1>

	<h2>Exemplo 1 - Básico</h2>
	Resultado: <input type="text" id="exemplo1" name="basic" value="123456" />

	<h2>Exemplo 2 - Customização</h2>
	Resultado: <input type="text" id="exemplo2" name="customize" value="123456" />

	<h2>Exemplo 3 - Pulando algumas opções</h2>
	Resultado: <input type="text" id="exemplo3" name="customize" value="123456" />

	<h2>Exemplo 4 - Trabalhando com limites</h2>
	Resultado: <input type="text" id="exemplo4" name="customize" value="12345" />

	<h2>Exemplo 5 - Limpando prefixo ao sair do campo</h2>
	Resultado: <input type="text" id="exemplo5" name="customize" value="123456" />

	<h2>Exemplo 6 - Permitindo negativo</h2>
	Resultado: <input type="text" id="exemplo6" name="customize" value="-1231" />

</body>
</html>

Abraço e até a próxima!

Pré-Requisitos

• Básico sobre HTML e CSS.
• Orientação a Objetos.

Informações sobre o curso

Data: 11/07/2011 à 22/07/2011
Horário: 19h às 22h30
Carga Horária: 40hrs (aproximadamente)
Valor: 2x de R$293,00 (R$586,00)

Local: Pontifícia Universidade Católica do Paraná (PUC)
Cidade: Londrina / PR
Logradouro: Av. Jockei Club, 485
Bairro: Hípica
CEP: 86067-000

Conteúdo

• ASP .NET MVC 3
  • Visão Geral
  • Criando a primeira aplicação MVC
  • Routes
  • Criando novas rotas
  • Usando parâmetros em rotas
  • Parâmetros opcionais e padrões nas rotas
  • Restrições nos parâmetros das rotas
  • Ignorando rotas
  • Controllers
  • ActionResults
  • Model Binder
  • Extensão de Controllers
  • ActionFilters
  • Views
  • Razor
  • Layout
  • Sections
  • Helpers
  • Partial Views
  • Model
  • ViewModel
  • Ajax
• Entity Framework (Básico)
• jQuery (Básico)
• Projeto Final

Qualquer dúvida entre em contato através da área de contato do site.

O conteúdo do curso basicamente foi:

• ASP .NET MVC 3, do básico ao avançado.
• jQuery (Básico)
• Entity Framework (Básico)
• Boas práticas de desenvolvimento: Manutenibilidade, Desempenho, etc.
• Desenvolvimento de um projeto de E-Commerce.

Foi bastante coisa e tudo isso foi possível graças a qualidade técnica que o pessoal já tinha com desenvolvimento. Além do conteúdo, respondi várias dúvidas e mostrei várias dicas, bibliotecas e plugins que me ajudam no dia a dia no desenvolvimento com o ASP .NET MVC.

Quero agradecer o pessoal de Maringá (Mauro, Daniel e Érico) por ter entrado em contato comigo e me solicitaram para montar esse curso. Foi o primeiro de MVC que eu ministrei e pelo feedback deles gostaram bastante!

Obrigado mais uma vez e espero ministrar outros cursos. Quem tiver interesse também é só entrar em contato!

Curso de ASP .NET MVC - Daniel, Mauro, Érico e Eu

Uma excelente sacada do migre.me é disponibilizar uma API para que nós desenvolvedores possamos usufruir do serviço de encurtação de URL dentro das nossas aplicações usando qualquer linguagem. Usar a API não é nada complexo, simplesmente devemos chamar a URL da API passando o endereço que queremos encurtar, obter o XML de retorno e extrair a informação desejada.

Para ver como é simples eu até desenvolvi uma classe que encapsula essa lógica de acesso e retorna o resultado esperado:

using System;
using System.IO;
using System.Linq;
using System.Net;
using System.Xml.Linq;

namespace MyApp
{
    public static class MigreMe
    {
        public static string EncurtarUrl(string url)
        {
            string retorno = String.Empty;
            // url da API do migre.me
            string urlMigreMe = string.Format("http://migre.me/api.xml?url={0}", url);

            WebClient client = new WebClient();
            // uso o cliente web para fazer uma requisição a url e obter o xml de retorno
            Stream stream = client.OpenRead(urlMigreMe);

            // carrego o xml
            XDocument xml = XDocument.Load(stream);
            // Busco com o LINQ o elemento "migre" do xml
            XElement elemento = xml.Descendants("migre").FirstOrDefault(x => x.Name == "migre");
            if (elemento != null)
            {
                retorno = elemento.Value;
            }

            return retorno;
        }
    }
}

Para usá-la basta chamar o método EncurtarUrl() passando como parâmetro a URL desejada. Veja um exemplo do uso dessa classe em um projeto Console Application:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace MyApp
{
    class Program
    {
        static void Main(string[] args)
        {
            var resultado = MigreMe.EncurtarUrl("http://www.mbanagouro.net/");
            Console.WriteLine(resultado);
        }
    }
}

URL encurtada pela classe MigreMe

Fique a vontade para usar essa classe em suas aplicações desktop ou web.

Abraço e até a próxima!

O Masked Input é um plugin jQuery que torna esse processo extremamente simples. Para utilizá-lo é necessário somente do jQuery e o próprio Masked Input.

• jQuery 1.6
• Masked Input v1.3

* Até a publicação deste post os plugins acima estavam em suas últimas versões. Veja se já não existem uma nova versão para cada um deles.

Para utilizá-lo faça a referência dos arquivos na tag head da sua página html.

<head>
    <title> título do site </title>
    ...
    <script type="text/javascript" src="jquery-1.6.min.js"></script>
    <script type="text/javascript" src="jquery.maskedinput-1.3.min.js"/></script>
</head>

A regra que devemos seguir para aplicar as máscaras nos campos são as seguintes:

a – Representa qualquer letra (A-Z, a-z).
9 – Representa qualquer número (0-9).
* – Representa qualquer carácter alfanumérico (A-Z, a-z, 0-9).

Veja como podemos aplicar as máscaras com essas definições:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Máscara com jQuery</title>

    <script type="text/javascript" src="jquery-1.6.min.js"></script>
    <script type="text/javascript" src="jquery.maskedinput-1.3.min.js"/></script>
    
    <script type="text/javascript">
        jQuery(function () {

            $(".telefone").mask("9999-9999");
            $(".cpf").mask("999.999.999-99");
            $(".cep").mask("99999-999");
            $(".data").mask("99/99/9999");

        });
    </script>

</head>
<body>
    <h1>Máscara com jQuery</h1>

    Telefone: <input type="text" class="telefone" name="telefone" value="" />
    <br />
    CPF: <input type="text" class="cpf" name="cpf" value="" />
    <br />
    CEP: <input type="text" class="cep" name="cep" value="" />
    <br />
    Data: <input type="text" class="data" name="data" value="" />
    <br />
</body>
</html>

Por meio do jQuery eu defini que todo input que tiver a classe telefone, seja aplicado a máscara “(99) 9999-9999″. E assim também fiz com as classes cpf, cep e data. Essa abordagem me permite definir as máscaras aos campos de forma global, só precisando aplicar as classes nos inputs necessários. Uma boa dica é você definir essa configuração em um arquivo JavaScript separado e referência-lo nas páginas que você precisar. Geralmente costumo criar um arquivo geral chamado scripts.js que irá executar várias instruções nas páginas.

Espero que tenham gostado dessa dica.

Abraço e até a próxima!