Jquery + Asp.net MVC – Parte 1
Autor: Juliano Sales | Publicado: 2012-05-26T15:03:00-07:00





Depois de ficar algum tempo sem publicar artigos resolvi
fazer um série de artigos sobre Jquery + Asp.net MVC, para mostrar como que
podemos usar essa poderosas ferramentas no nosso dia a dia.

Por que vamos usar Jquery ?

E uma excelente&nbsp;
biblioteca Java Script &nbsp;rápida que
podemos manipular o documento HTML, com essa biblioteca podemos criar animações,
manipular eventos e fazer grandes interações AJAX .

Por que Asp.net MVC ?

Precisamos controlar bem o HTML , precisamos usar&nbsp; um excelente padrão de projeto que separe bem
as camadas,precisamos trabalhar com uma ferramenta que seja realmente focada
para web “desculpa webforms”.



1 – Objetivo do artigo e ensinar a &nbsp;fazer requisições Ajax utilizando Jquery +
Asp.net MVC

No jquery temos varias &nbsp;maneira de fazer requisições Ajax, abaixo vou
listar as mais conhecidas, lembrando que no endereço http://api.jquery.com/category/ajax/,
podemos &nbsp;descobrir toda as características
de cada método 

1 -&nbsp; $.post

2 – $.get

3 - $.getJson

4 - $.ajax

5 - $.load

Para começarmos o tutorial precisamos ter a seguinte
configuração no Visual Studio e uma pequena visão parcial no padrão de Projeto
MVC .

Visual Studio: Frame
work.4.0,Asp.net MVC 3, caso o&nbsp; seu
Visual Studio não tenha o MVC3 podemos instalar a partir desse link http://www.microsoft.com/web/gallery/install.aspx?appid=VWDorVS2010SP1Pack

Padrão &nbsp;de Projeto MVC : http://pt.wikipedia.org/wiki/MVC, http://msdn.microsoft.com/en-us/library/dd381412(VS.98).aspx









1 – Inicie o visual Studio, clique em File &gt; New Project
&gt; nome do projeto &gt; clique no botão ok &gt; Empty &gt; clique no botão ok














2 – Como nos estamos criamos um projeto a partir do zero temos
que criar um Controller e depois criar um View. Clique com o botão direito do
mouse sobre a pasta Controllers &gt; add &gt; Controller &gt; nome do Controle
&gt;clique no botão Add.











Depois que criamos o controle precisamos criar uma View para
esse controle, clique com o botão direito do mouse sobre&nbsp; o nome da ActionResult&nbsp; e clique na opção Add View, depois clique em
Add.









Na aba do Solution Explorer note que o visual Studio criou o
seguinte estrutura na Views/Cadastro/Index.cshtml







3 – Na Index.cshtml vamos criar um formulário básico com os
seguintes campos nome,e-mail e um botão com o value enviar dados, e vamos &nbsp;criar uma div abaixo do botão, assim que o usuário
clicar no botão enviar dados vamos processar as informações no servidor e vamos
devolver o resultado do processamento dentro da div. 







4 – Agora precisamos adicionar a biblioteca jquery na
página, na Solution Explorer&nbsp; acesse a
pasta Scripts&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arraste o arquivo jquery-1.6.2.js antes da tag &lt;h2&gt; da
página . Uma vez adicionado à biblioteca podemos escrever nosso código Java
Script.



No exemplo abaixo estamos usando o método $.ajax , dentro do
método podemos definir como vai ser o tipo da submissão dos dados através da
opção&nbsp; type, e também podemos apontar
quem vai receber esses dados através da opção url, na opção data&nbsp; estamos passando os valores do formulário, na
opção sucess &nbsp;como o nome já diz&nbsp; sucesso, depois de processar no servidor ele
retornara o nome e o e-mail que o usuário preencheu , depois jogamos a variável
data dentro do atributo HTML , ou seja a nossa div resultado vai receber as
informações processada pelo servidor

&lt;script type="text/javascript"&gt;

&nbsp;&nbsp;&nbsp; //Preparando
a nossa função

&nbsp;&nbsp;&nbsp; $(document).ready(function () {

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Quando o Botão "btnCadastrar"&nbsp; for clicado 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $("#btnCadastrar").click(function () {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $.ajax({

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; type:'POST',

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url: '/Cadastro/Cadastrar/',

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data:$("#frmCadastro").serialize(),

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success: function(data) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $('#resultado').html(data);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });

&nbsp;&nbsp;&nbsp; });

&lt;/script&gt; 









5 –
Precisamos &nbsp;acessar a nossa Controller
Cadastro&nbsp; e criar um método chamado
Cadastrar como no exemplo abaixo, note que antes do método coloquei&nbsp; um atributo httPost ou seja será apenas
possível acessar esse método através de uma requisição do tipo POST.

&nbsp;[HttpPost]

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; public string Cadastrar(FormCollection formulario)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; string retorno = null;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; retorno = "Nome :" +
formulario["nome"] + " E-mail" + formulario["email"];



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return retorno;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }













7 – Antes &nbsp;de testar nosso projeto&nbsp; temos que configurar nossa
Global.asax.cs,&nbsp; temos que alterar o método
&nbsp;RegisterRoutes, por padrão ele deixa setado o valor controller &nbsp;com a controle&nbsp;
Home.

public static void RegisterRoutes(RouteCollection routes)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; routes.IgnoreRoute("{resource}.axd/{*pathInfo}");



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; routes.MapRoute(

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Default", // Route name

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "{controller}/{action}/{id}", // URL with parameters

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; );



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }

Para 

public static void RegisterRoutes(RouteCollection routes)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; routes.IgnoreRoute("{resource}.axd/{*pathInfo}");



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; routes.MapRoute(

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Default", // Route name

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "{controller}/{action}/{id}", // URL with parameters

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; new { controller = "Cadastro", action = "Index", id = UrlParameter.Optional } // Parameter defaults

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; );



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }



6 – Resultados da requisição Ajax 







Nesse artigo tivemos uma pequena amostra&nbsp; que podemos fazer usando JQUERY + ASP.NET &nbsp;MVC, nos próximos artigos vamos aprofundar
ainda mais nos recursos dessa poderosa biblioteca jquery.

Para saber mais visite os links abaixo.

http://jquery.com/ 

http://www.asp.net/mvc