21/4/2015 DEV# ABOUT .NET | Empezando con MVC 4 parte 1

https://leonardoquinonesm.wordpress.com/2013/05/28/empezandoconmvc4parte1/ 1/13

ACERCA DE MI MVC – RAZOR

DEV# ABOUT.NETUN BLOG DE LEONARDO QUIÑONESMORENO

Buscar …

EMPEZANDO CONMVC 4 PARTE 1Hola a todos, en esta primera entradamostraré como crear una aplicación Asp.NetMVC 4, la versión 4 ya viene incluida en VisualStudio 2012, pero también puede instalarse yutilizarse con Visual Studio 2010.

Asp.net MVC es un framework para desarrollaraplicaciones web que utilicen el patrón Modelo– Vista – Controlador.

ModeloRepresenta una entidad lógica, es una unidadde información sobre la cual actuará elcontrolador.

VistaSe ocupa de la representación gráfica delmodelo, en práctica es lo que el usuario final vecuando navega un sitio.

ControladorDentro el controlador se realizan todas lasoperaciones de business logic, es el corazón dela aplicación web.

05.28.13por Leonardo

Quiñones Moreno

21/4/2015 DEV# ABOUT .NET | Empezando con MVC 4 parte 1

https://leonardoquinonesm.wordpress.com/2013/05/28/empezandoconmvc4parte1/ 2/13

Para crear nuestro proyecto primero abrimosVisual Studio 2012 (en caso de no tenerlo sepuede descargar de forma gratuita aquí) ,seleccionamos  Nuevo proyecto en nuestrapagina principal o por la opción Archivo >Nuevo Proyecto, seleccionamos el tipo deproyecto Aplicación Web de ASP.NET MVC4,  ingresamos el nombre de nuestra aplicacióny  damos clic en Aceptar.

Seguidamente se nos abrirá una ventana paraseleccionar la plantilla a utilizar por el proyecto,cada una de las plantillas tiene característicasdiferentes:

21/4/2015 DEV# ABOUT .NET | Empezando con MVC 4 parte 1

https://leonardoquinonesm.wordpress.com/2013/05/28/empezandoconmvc4parte1/ 3/13

Vacío: solo provee de las carpetas donde semeterán nuestros controladores, modelos,vistas, etc.

Básico: trae algún controlador con surespectiva vista, que al ejecutarse nos mostraráun resultado en pantalla.

Aplicación de Internet: nos muestra unpunto de partida mas avanzado, este manejaun sistema de login por autenticación deformularios.

Aplicación de Intranet:  es practicamente lomismo, lo que  la diferencia es que es unaaplicación windows.

Aplicación móvil: plantilla preparada con undiseño adapatable con jquery mobile.

Web API: framework de asp.net mvc, es una de las características nuevas de esta versión,de la cual hablaré en un siguiente post.

A continuación seleccionaremos una platillavacía y como motor (el cual nos indicará comose renderizará nuestro html) escogeremosRazor el cual es una manera en quecolocaremos nuestro código.

21/4/2015 DEV# ABOUT .NET | Empezando con MVC 4 parte 1

https://leonardoquinonesm.wordpress.com/2013/05/28/empezandoconmvc4parte1/ 4/13

Una vez creado nuestro proyecto podemos vercomo han sido agregadas varias carpetasdonde podemos ver las propiedades delproyecto, referencias (acá podemos ver lasutilizadas para nuestra aplicación mvc), etc.

App_Data: donde se guardará las bases dedatos o otro tipo de fuente de datos.

App_Start: aquí tenemos tres archivos deconfiguración: FilterConfig , RouteConfig yWebApiConfig

RouteConfig: es donde se registrano especifican las rutas que son

21/4/2015 DEV# ABOUT .NET | Empezando con MVC 4 parte 1

https://leonardoquinonesm.wordpress.com/2013/05/28/empezandoconmvc4parte1/ 5/13

mapeadas como una url, porejemplo se tiene como default unaurl que acepta un controladorcomo primer elemento, luego unaacción y por ultimo un id que seríael parámetro, esto es como si setuviera nuestra pagina de lasiguiente forma:

http://www.pagina.com/Home/Index/ .

Lo que sucede aquí es que cuando el clienterealiza la petición al servidor el que se encargade recibir esa petición es un controlador, elcual recibe la entrada de un cliente y da larespuesta a este la cual puede ser una lista uotro tipo, para nuestro ejemplo anterior sicolocamos

http://www.pagina.com/Home  el

controlador se encarga de devolver el métodopor default en este caso sería la acción Index.

Global.asax: acá tenemos los llamados a cadauna de las anteriores clases, para que porejemplo se mapeen las rutas cuando laaplicación inicie.

Si ejecutamos nuestra aplicación en estemomento aparecerá un error ya que aún no setiene ningún controlador, por lo tanto ahoracrearemos un nuevo controlador quellamaremos “HomeController”, para ello damosclic derecho sobre la carpeta Controllers>Agregar > Controlador:

21/4/2015 DEV# ABOUT .NET | Empezando con MVC 4 parte 1

https://leonardoquinonesm.wordpress.com/2013/05/28/empezandoconmvc4parte1/ 6/13

Las opciones scaffolding nos permiten variascosas como crear un controlador vacío o uncontrolador MVC con acciones de lectura yescritura y vistas, que usa entity framework, sinosotros tuvieramos un modelo entityframework podríamos crear un controladorque nos cree los métodos de acción por cadauna de los métodos CRUD como crear,insertar, etc, y de igual forma las vistas yformularios por cada método, continuando connuestro ejemplo seleccionaremos comoplantilla Vaciar controlador MVC

Podemos ver como se crea el archivoHomeController que hereda de la claseController y con un método de acción GET queahí nos indica como se debe llamar, es decir siingresamos

http://www.pagina.com/Home  o

http://www.pagina.com/Home/Indexambas son correctas , aquí podemos ver queya este devuelve un ActionResult, pero comoaún no se tiene la vista si lo ejecutamosobtendremos el error que se muestra acontinuación:

21/4/2015 DEV# ABOUT .NET | Empezando con MVC 4 parte 1

https://leonardoquinonesm.wordpress.com/2013/05/28/empezandoconmvc4parte1/ 7/13

De acuerdo a esto modificaremos nuestrarespuesta del controlador HomeController  elcual devolverá una cadena como se ve en lasiguiente imagen, entonces a la hora de que elcontrolador reciba la llamada al método Index,este devolverá una cadena y no una vista:

Si ejecutamos nuevamente veremos comonuestro controlador nos da como respuestauna cadena y podemos ver como trabajanuestro registro de rutas mapeadas por defaultque se explicó anteriormente:

Bueno, ahora que pasaría si quisieramos pasarun parámetro al controlador como sigue:

21/4/2015 DEV# ABOUT .NET | Empezando con MVC 4 parte 1

https://leonardoquinonesm.wordpress.com/2013/05/28/empezandoconmvc4parte1/ 8/13

Si ejecutamos y pasamos al controlador elnombre “leonardo” podemos ver que nofunciona:

Esto es debido a que el parámetro quedefinimos en el archivo RouteConfig.cs esllamado id y por lo tanto el mapeo no lo va areconocer, es así que  una opción es llamar elparámetro del método Index como id, de estaforma si se ejecuta podemos ver como elcontrolador trabaja correctamente:

Ahora rapidamente como ya hemos visto comotrabaja el controlador, veremos como devolveruna vista desde el controlador para ellocolocaremos el código como se muestra acontinuación, después nos colocamos sobreIndex y damos clic derecho y Agregar Vista

21/4/2015 DEV# ABOUT .NET | Empezando con MVC 4 parte 1

https://leonardoquinonesm.wordpress.com/2013/05/28/empezandoconmvc4parte1/ 9/13

A continuación podemos ver como se nos abreun modal para generar nuestra vista , acá secarga por defecto el nombre de la vista para elejemplo Index, seleccionamos el motor autilizar que para nosotros será Razor, noseleccionaremos nada en Crear una vistafuertemente Tipada ni en Crear como vistaparcial de esto hablaré luego, desactivamosdonde dice Usar una página de diseño omaestra y damos clic en Agregar.

21/4/2015 DEV# ABOUT .NET | Empezando con MVC 4 parte 1

https://leonardoquinonesm.wordpress.com/2013/05/28/empezandoconmvc4parte1/ 10/13

A continuación podemos ver nuestra vistacreada, donde podemos ver una @ y unlayout, el layout nos indica nuestra páginamaestra que para el ejemplo no hay, el @ essímbolo de comenzar una línea de código derazor que es como programar en C#, ahípodemos ver una vista que tiene un HolaMundo, ahora si ejecutamos la aplicación ya notenemos el problema que comentamosanteriormente ya que ahora si tenemos unavista:

En la próxima entrada hablaré sobre el objetoViewBag y el objeto ViewData para pasar datosdel controlador a la vista.

Saludos,

21/4/2015 DEV# ABOUT .NET | Empezando con MVC 4 parte 1

https://leonardoquinonesm.wordpress.com/2013/05/28/empezandoconmvc4parte1/ 11/13

← HOLA MUNDO EMPEZANDO COM MVC 4PARTE 2 →

UN COMENTARIO EN “EMPEZANDOCON MVC 4 PARTE 1”

DEJA UN COMENTARIO

Empezando con MVC 4 Parte 2

Share this:

Twitter Facebook 1

Esta entrada fue publicada en MVC y

etiquetada ASP.NET MVC, MVC4. Guarda el

enlace permanente.

About these ads

 Me gusta

Sé el primero en decir que te gusta.

Responderjaviernoviembre 22, 2013 2:56 pm

Muy bien gracias!!!

Introduce tu comentario aquí...

Buscar …

ENTRADASRECIENTES

 Empezandocom MVC 4 parte 2

21/4/2015 DEV# ABOUT .NET | Empezando con MVC 4 parte 1

https://leonardoquinonesm.wordpress.com/2013/05/28/empezandoconmvc4parte1/ 12/13

Crea un blog o un sitio web gratuitos con WordPress.com. El tema Newsworthy.

 Empezandocon MVC 4 parte 1

 Hola Mundo

ARCHIVOS

noviembre2013

mayo 2013

septiembre2012

CATEGORÍAS

ASP.NET

MVC

META

Registrarse

Acceder

RSS de lasentradas

RSS de loscomentarios

WordPress.com

Seguir

Seguir “DEV#ABOUT .NET”Recibe cada nuevapublicación en tu buzónde correo electrónico.

Introduce tu dirección de correo electrónico

Suscríbeme

Construye un sitio web conWordPress.com

21/4/2015 DEV# ABOUT .NET | Empezando con MVC 4 parte 1

https://leonardoquinonesm.wordpress.com/2013/05/28/empezandoconmvc4parte1/ 13/13