Jquery + Asp.net MVC – Parte 1

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  biblioteca Java Script  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  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  fazer requisições Ajax utilizando Jquery + Asp.net MVC

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

1 –  $.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  seu Visual Studio não tenha o MVC3 podemos instalar a partir desse link http://www.microsoft.com/web/gallery/install.aspx?appid=VWDorVS2010…

1 – Inicie o visual Studio, clique em File > New Project > nome do projeto > clique no botão ok > Empty > 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 > add > Controller > nome do Controle >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  o nome da ActionResult  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  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  acesse a pasta Scripts          arraste o arquivo jquery-1.6.2.js antes da tag <h2> 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  type, e também podemos apontar quem vai receber esses dados através da opção url, na opção data  estamos passando os valores do formulário, na opção sucess  como o nome já diz  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

 

/font>script type=”text/javascript”>

    //Preparando a nossa função

    $(document).ready(function () {

        //Quando o Botão “btnCadastrar”  for clicado

        $(“#btnCadastrar”).click(function () {

            $.ajax({

                type:‘POST’,

                url: ‘/Cadastro/Cadastrar/’,

                data:$(“#frmCadastro”).serialize(),

                success: function(data) {

                    $(‘#resultado’).html(data);

                }

            });

        });

    });

</script>

 

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

 [HttpPost]

        public string Cadastrar(FormCollection formulario)

        {

            string retorno = null;

            retorno = “Nome :” + formulario[“nome”] + ” E-mail” + formulario[“email”];

            return retorno;

        }

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

public static void RegisterRoutes(RouteCollection routes)

        {

            routes.IgnoreRoute(“{resource}.axd/{*pathInfo}”);

            routes.MapRoute(

                “Default”// Route name

                “{controller}/{action}/{id}”// URL with parameters

                new { controller = “Home”, action = “Index”, id = UrlParameter.Optional } // Parameter defaults

            );

        }

Para

public static void RegisterRoutes(RouteCollection routes)

        {

            routes.IgnoreRoute(“{resource}.axd/{*pathInfo}”);

            routes.MapRoute(

                “Default”// Route name

                “{controller}/{action}/{id}”// URL with parameters

                new { controller = “Cadastro”, action = “Index”, id = UrlParameter.Optional } // Parameter defaults

            );

        }

6 – Resultados da requisição Ajax

 

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

Para saber mais visite os links abaixo.

LEAVE A COMMENT