Introduccion a Aplicaciones Web MVC 4

abr 19 2013 1 comment .net

Hoy en da existen diferentes plataformas con las cuales podemos crear aplicaciones de cualquier tipo, ya sea aplicacin de escritorio, Web, Apps, etc., es por eso que nosotros como desarrolladores tenemos que estar actualizados con las ultimas tecnologas disponibles para poder tener mayor competitividad en el mercado laboral, ya que es mas frecuente ver empresas que adoptan las nuevas tecnologas para cubrir sus necesidades de TI. En esta ocasin veremos lo mas bsico de aplicaciones Web con Framework .NET MVC 4 utilizando Visual Studio 2012. Las aplicaciones web MVC creadas estn compuestas por Modelos, Vistas y Controladores.

Los Modelos se refiere a la estructura de las tablas que se utilizaran en la aplicacin. Las Vistas es el resultado a pantalla de nuestra aplicacin, el motor de vistas puede ser por ASPX o por Razor. En nuestro caso utilizare Razor ya que he visto que simplifica de una mejor manera la programacin. Y por ltimo los Controladores que contienen las interacciones entre las visas y los modelos.

Una url bajo la arquitectura de MVC est compuesta de la siguiente manera: www.dominio.com/controlador/Accion/Parametros Donde controlador es el nombre del controlador que estamos mandando llamar. Accion es la accin de nuestro controlador que queremos ejecutar. Parametros son los parmetros que estamos enviando a nuestro controlador. Al final del post nuestro ejemplo mostrara una url similar al siguiente: localhost/Home/Index/?nombre=Test Donde estamos haciendo una llamada al controlador Home, ejecutando la accin Index y por ultimo asignando el valor Test al parmetro Nombre. Ms adelante veremos un poco ms a detalle esto.

Lo primero que vamos a hacer es crear aplicacin web MVC 4. En mi caso usar C# como lenguaje. El nombre de nuestra solucin ser Prueba

La siguiente pantalla nos permite seleccionar una planilla predefinida por Visual Studio y el motor de vistas, en mi caso usare Razor como motor de vistas y un proyecto vaco.

La estructura de las carpetas que se generan en el proyecto son las siguientes:

App_data-Almacena los archivos de las base de datos App_Start.- Contiene los archivos FilterConfig(configuracin de los filtros globales), RouteConfig(Archivos de rutas),WebApiConfig(Configuracion de la aplicacin API) . Controller.-Contiene los archivos de los controladores. Models.-Contiene los archivos de los modelos. Views.-Contiene los archivos de las vistas.

El archivo RouteConfig nos va a permitir agregar las rutas de nuestra pgina. Al abrirlo nos mostrara el siguiente cdigo.

C#

1 public class RouteConfig 2 { 3 public static void RegisterRoutes(RouteCollection routes) 4 { 5 routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 6 7 routes.MapRoute( 8 name: "Default", 9 url: "{controller}/{action}/{id}", 10 defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } 11 ); 12 } 13 }

Aqu podemos crear todas las rutas que deseemos para accesar a nuestros controladores y acciones, y pueden ser llamadas con el nombre lo que nos permite simplificar la programacin. El cdigo no indica que por default (al iniciar el sitio Web) va a buscar el controlador Home y va mandar llamar la accin Index y busca el parmetro ID como opcional. Como no se tienen esos archivos al ejecutar la aplicacin manda un error de que no encuentra el recurso, estos valores los podemos modificar segn sean nuestras necesidades. Esto es para configurar nuestra pgina de inicio. Por ejemplo al entrar a un sitio web www.sitio.com en aspx la pagina de inicio es index.aspx que equivale a lo mismo si entramos a www.sitio.com/index.aspx, en MVC equivale a entrar awww.sitio.com/controlador/accion Lo primero que vamos a hacer es crear nuestro controlador, damos clic derecho en la carpeta Controllers, vamos a Agregar y damos clic en Controlador. Nos muestra la siguiente pantalla para agregar nuestro controlador, en este caso vamos a crear nuestro controlador Home por eso en nombre ponemos HomeController ya que aunque tenga la palabra Controller hace referencia a Home y lo seleccionamos sin ninguna plantilla es decir la opcin Vaciar controlador MVC.

En la carpeta Controllers se crea el archivo HomeControllers con el siguiente cdigo:

C#

1 public class HomeController : Controller 2{ 3 public ActionResult Index() 4 { 5 return View(); 6 } 7}

En el cdigo podemos observar que se cre una clase ActionResult de nombre Index la cual esta encarga de realizar una operacin de accin la cual manda llamar una vista(return View() ). Ahora creamos la vista en el cdigo dando clic derecho sobre el nombre del ActionResult en este caso Index y damos en Agregar vista y nos mostrara una pantalla donde le especificaremos el nombre de la vista en este caso Index. Si llegara a aparecer seleccionada la opcin para elegir una MasterPage o pgina maestra la deseleccionamos ya que en nuestro ejemplo no usaremos una MasterPage.

Nos aparecer un archivo en la carpeta Views con la vista que acabamos de crear. Este archivo contiene el siguiente cdigo:

XHTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> </div> </body> </html>

Donde el @ nos indica cdigo en RAZOR el cual nos simplifica la captura en HTML, en este caso viene Layout es el masterPage de nuestra aplicacin, como no le asignamos ninguna aparece null. Ahora al ejecutar nuestra aplicacin nos mostrara una pagina en blanco con el titulo INDEX.

Para continuar con nuestro ejemplo lo que haremos ser enviar un parmetro a nuestra pagina utilizando la clase ViewBag el cual permite la transportar datos de forma dinmica entre nuestro controlador y la vista. En el cdigo de nuestro controlador agregamos la variable que deseemos, en este caso es nombre de tipo string y al ViewBag con el nombe nombre le asignamos el valor de nuestro parmetro. El cdigo de nuestro controlador en este caso HomeController deber verse de la siguiente forma:

C#

1 public ActionResult Index(string nombre) 2{ 3 ViewBag.Nombre = nombre; 4 return View(); 5}

El siguiente paso es agregar los componentes en la vista para enviar el parametro, para esto creamos un texto de tipo input con el nombre de nuestro parmetro y otro submit para enviar el texto y agregamos el ViewBag que agregamos en nuestro controlador para obtener el valor del parametro. Nuestra vista deber tener un cdigo similar al siguiente:

XHTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> <div> <form> <div> <input type="text" name="nombre" /> <input type="submit" value="Presioname"/> </div> <div>@ViewBag.nombre</div> </form> </div> </div> </body> </html>

Por ultimo ejecutamos nuestra aplicacin y en el Text ingresamos el texto que deseemos en este caso Hola Mundo y damos clic en el botn. Ahora nos aparecer el texto que ingresamos en nuestra pgina, si nos fijamos en la URL estamos entrando a la clase home, accin index y esta asignndose el valor al parmetro nombre. En la imagen no se muestra la ruta que mencionamos anteriormente ya que esta es nuestra pagina inicial la cual esta especificada en nuestro archivo de configuracin de rutas, pero tambin pueden hacer la prueba entrando a la aplicacin de la siguiente forma localhost:puerto/Home/index.

Bueno eso es todo por esta ocasin, espero que este post les haya servido para entender lo bsico para crear una aplicacin con este Framework, en los siguientes post estar dando mas ejemplos sobre aplicaciones Web MVC 4.

Aplicaciones Web MVC 4 Usando Bases de datos

may 16 2013 1 comment .net

Un saludos a todos, en esta ocasin vamos a crear una aplicacin bsica web en MVC 4 con una conexin a una base de datos, esta es la parte 1 de nuestro ejemplo para que estn pendientes a los futuros post. Nuestra aplicacin en este ejemplo se llamara Tienda, por lo que crearemos un nuevo proyecto con ese nombre. En el ejemplo anterior creamos una aplicacin vaca, esta vez seleccionaremos una planilla Bsica

Al crear el proyecto en comparacin del ejemplo anterior podemos ver que se nos crearon mas carpetas como las siguientes:

Content: En esta carpeta se encuentra un css donde esta vaco, lo podemos usar como estndar para crear nuestros css personalizados. Scripts: En esta carpeta contiene varios scripts como son, modernzr, jquery, etc., tambin podemos agregar las nuevos scripts personalizados que usemos en nuestra aplicacin. Views->Shared : En esta carpeta dentro de las vistas se creo una llamada Shares, la cual contiene un archivo _Layout.cshtml (les recuerdo que estamos usando C# para nuestra aplicacin, es por eso la extensin cshtml) la cual toma el papel de una MasterPage. Si abrimos este archivo nos daremos cuenta de que esta vaco.

Si abrimos la pagina _Layout, veremos que trae un algo similar a lo siguiente: @Styles.Render(~/Content/css) @Scripts.Render(~/bundles/modernizr) @Scripts.Render(~/bundles/jquery) @Scripts.Render(~/bundles/jqueryval) Por el @ al inicio nos damos cuenta que es cdigo en RAZR, el cual esta haciendo referencia a los scripts, si recordamos del post anterior en la carpeta App_Start existe un archivo llamado BundleConfig el cual contiene las referencias a los scripts, css, etc., donde podemos mandar

llamar a todos los scripts que usemos en una sola lnea y asi clasificarlos de una mejor manera. Si vemos a que manda llamar Bundles/jqueryval, el cual hace referencia a los scripts que inicien con el siguiente texto:

jquery.unobtrusive* jquery.validat*

En cada script que encuentre con las condiciones anteriores o los scripts que nosotros agreguemos a esa referencia al usar la sintaxis RAZR el HTML aparecer como si hiciramos la referencia a cada uno de los scripts:

XHTML

1 <script src="/Scripts/jquery.validate.js"></script> 2 <script src="/Scripts/jquery.validate.unobtrusive.js"></script>

Como siguiente paso creamos nuestro controlador Home como vimos en el ejemplo anterior, y creamos nuestra vista Index para poder tener nuestra pagina de inicio, asignando nuestra MasterPage _Layout. Ahora crearemos nuestro modelo, en el modelo vamos a especificar la estructura de la tabla que usaremos con el nombre Productos para efectos de nuestro ejemplo, en la carpeta de Models damos clic derecho y le damos en Agregar->Clase y nos saldr una pantalla como la siguiente donde seleccionaremos la opcin Clase y le especificaremos el nombre de la clase:

El archivo debera tener una informacin similar a la siguiente:

C#

1 2 3 4 5 6 7 8 9 10 11 12

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Tienda.Models { public class Productos { } }

Para agregarle los campos a nuestra tabla Productos usamos la siguiente sintaxis:

C#

1 public String campo { get; set; }

Segn el campo que necesitemos lo debemos declarar en este caso es un campo de tipo texto llamado campo, si necesitamos un campo de tipo fecha y de tipo entro seria de la siguiente forma:

C#

1 public datetime fecha { get; set; } 2 public int entero { get; set; }

10

Nuestra aplicacin agregare 3 campos:

ID Descripcin Precio

por lo que nuestro modelo deber lucir de la siguiente manera:

C#

1 2 3 4 5 6

public class Productos { public int id { get; set; } public string descripcion { get; set; } public double precio { get; set; } }

Una vez guardada la clase, vamos a crear un controlador tomando como base el Modelo que acabamos de crear. En el ejemplo anterior creamos un controlador vaco, esta vez en planilla seleccionamos la clase Productos y en clase de contextos damos en nuevo contexto de datos:

Donde le daremos el nombre de nuestra Base de datos, en este caso le llamaremos TiendaDBContext:

11

Le damos en agregar y se creearan el controlador y las vistas para el modelo de productos. En nuestra pagina Index de nuestro controlador Home agregamos @Html.ActionLink(Productos,Index, Productos) donde hacemos llamar a una funcin Html.ActionLink de RAZR, donde el primer parmetro es el texto que aparecer en la pagina, el segundo el nombre de la vista que queremos ver, y el tercero es el controlador. Esto lo nico que hace es crear un link <a href> al controlador productos vista index (mipagina.com/productos/index). Si corremos nuestra aplicacin, nos saldr la pagina con el link productos, el cual al darle clic nos mandara a la pagina de los productos donde nos aparecer la lista de los productos capturados. Le damos a la opcin Create new en la cual agregamos informacin a nuestra tabla, y una vez hecho esto veremos la informacin que capturamos.

En otro post continuare con este ejemplo dando un poco mas de explicacin de que se debe de hacer cuando queremos modificar un campo, poner validaciones adicionales, mostrar formato de nuestros campos como en la imagen anterior, por lo que no deben de dejar de leernos.

12