1

INTRODUCCIÓN A ASP.NET MVC 4

Nelson Enrique Vera Parra1

Octavio Jose Salcedo Parra2

Steven Sierra Forero3

1, 2 Docentes 3 Estudiante

Universidad Distrital Francisco José de Caldas

Bogotá - Colombia

2

©Introduccion a MVC 4

©Steven Sierra Forero, Octavio Jose Salcedo Parra, Nelson Enrique Vera Parra

ISBN papel: 978-84-686-3359-6

ISBN e-book: 978-84-686-3360-2

Editado por Bubok Publishing S.L

3

INTRODUCCIÓN A MVC 4

Todos los derechos reservados, ninguna parte de este libro deberá ser reproducida o transmitida en ninguna forma, incluyendo el envío por medios electrónicos o mecánicos como fotocopias, grabaciones o algún sistema de almacenaje, sin el permiso explicito de sus autores.

La información contenida en este libro se entrega tal como se encuentra, sin

alguna garantía. Los autores han tomado todas las precauciones para

preparar este libro, ni el autor ni su editoral se hace responsable de cualquier

entidad o persona al respecto de la pérdida de información, daño causado

directa o indirectamente por la información contenida en este libro.

4

Dedicatoria

A mi hija Abby quién da sentido y fuerza a mi vida.

Steven Sierra Forero

A mi felicidad perenne Gorvachor, Josefa, Maria, Isabella y Sofia.

Octavio José Salcedo Parra

A mi Familia.

Nelson Enrique Vera Parra

5

ÍNDICE

ÍNDICE ........................................................................................ 5 

Capítulo 1. INTRODUCCIÓN A ASP.NET ...................... 7 

ASP.NET MVC 4 ................................................................... 7 

HISTORIA DE MVC 4 ......................................................... 7 

INSTALACIÓN DE ASP.NET MVC 4 ............................ 9 

Capítulo 2. CREAR Y EXPLORAR UN PROYECTO

MVC 4 ......................................................................................... 12 

CREACIÓN DE UN PROYECTO MVC. ...................... 12 

CAPÍTULO 3. CONTROLADORES ................................ 28 

INTRODUCCIÓN A LOS CONTROLADORES ........ 28 

INTRODUCCIÓN A LAS ACCIONES. ......................... 31 

FILTROS DE ACCIONES ............................................ 46 

CAPITULO 4. VISTAS ............................................................ 49 

INTRODUCCIÓN A LAS VISTAS ................................. 49 

CÓDIGO DE MARCADO RAZOR ................................ 49 

VISTAS PARCIALES ..................................................... 52 

6

HELPERS ......................................................................... 59 

PLANTILLAS ................................................................. 62 

CAPÍTULO 5. MODELOS .................................................... 67 

INTRODUCCIÓN A LOS MODELOS ......................... 67 

CREACIÓN DE UN MODELO. ................................ 68 

ENTITY FRAMEWORK .................................................... 78 

CODE FIRST .................................................................... 79 

VALIDACIÓN DEL MODELO ............................... 102 

CODE FIRST MIGRATIONS .......................................... 105 

CAPÍTULO 6. SEGURIDAD. ............................................. 110 

ATAQUES COMUNES EN APLICACIONES .......... 110 

APÉNDICE. ............................................................................ 113 

Código de Controlador InicioController.cs ........................... 113 

Código del Modelo BlogPost.cs ........................................ 116 

Código de Hojas de Estilo Site.css .................................... 117 

Vista general de los archivos del proyecto. ...................... 119 

Links de Información Útil sobre MVC. ........................... 120 

Bibliografía. ............................................................................... 121 

7

Capítulo 1. INTRODUCCIÓN A ASP.NET

ASP.NET MVC 4

ASP.NET MVC 4 es una tecnología propietaria de Microsoft

que permite aplicar todas las librerias de .NET para el desarrollo web haciendo uso de un paradigma de diseño en capas llamado MVC (Modelo Vista Controlador), el cual se define como unqa arquitectura que separa las responsabilidades de la lógica de la aplicación en las capas de presentación, control y abstracción del modelo de base de datos.

MVC 4 se encuentra soportado sobre los pilares de desarrollo de aplicaciones con arquitectura sostenible, en donde los procesos de desarrollo, prueba y mantenimiento están soportados a través de sus tres capas, modelo, vista y controlador.

HISTORIA DE MVC 4

Para brindar al lector un punto de vista más amigable, se expondrá un poco la historia de MVC y su evolución a través de las necesidades de las comunidades de desarrollo en torno al framework.NET.

Una de las necesidades que se creó luego de que la web se convirtiera en un medio de comunicación masivo, fue la creación de un framework que permitiera el desarrollo de

8

aplicaciones para la web; la respuesta de Microsoft a esta necesidad fué crear ASP o Active Server Pages, el cual es un lenguaje de scripting que permite la creación de sitios web en donde el código ASP y el código de presentación HTML se combinan en un único archivo para crear una única pagina.

En respuesta a esta primera forma de crear la web, surgió la necesidad de crear un framework que permitiera un proceso de desarrollo más transparente y mantible, razón por la cual en el 2002 Microsoft lanza su librería de ASP.NET en respuesta a las necesidades de desarrollo web en aquella época.Es así como surgen los dos grandes grupos de desarrollo web en la plataforma de Microsoft: Web Forms y ASP.NET MVC.

Web Forms responde a la necesidad de separar la capa de presentación y la capa lógica, permitiendo asignar a cada capa una responsabilidad única, además agrega un método que permite superar la imposibilidad de guardar el estado del protocolo HTTP, de esta forma permite al desarrollador trabajar con estados en las aplicaciones web.

ASP.NET MVC al contrario de Web Forms aún deja la responsabilidad del manejo de estados al desarrollador, y se enfoca en crear una capa más que se encargue de manejar los modelos de datos, permite una separación efectiva de responsabilidades para cada capa.

En 2008 se lanza la primera versión de MVC como una alternativa de desarrollo web sobre la plataforma ASP.NET.

9

INSTALACIÓN DE ASP.NET MVC 4

Para empezar con el desarrollo con MVC 4 es necesario instalar las aplicaciones base del framework y un editor de código que permita un proceso de desarrollo ágil, como lo es Visual Studio.

• Dirijase al sitio web http://www.asp.net/mvc

• Haga click en el botón de instalación en la página

web como aparece en la figura 1.

• Aparecerá una ventana emergente en donde se le

solicita descargar el archivo

VWDorVs11AzurePack.exe

• Una vez descargado en su sistema proceda a ejecutar

el programa. A continuación aparecerá un recuadro

con el nombre Web Platform Installer 4.0.

• Dependiendo la configuración de su sistema el

recuadro le mostrará las aplicaciones a instalar, las

cuales son Visual Studio y Windows Azure.

• En caso de tener instalado Visual Studio 2012 el

sistema realizará una actualización automática de

librerías en un menor tiempo que la instalación

típica.

10

• Haga click en Instalar.

• La aplicación se conectará automáticamenete al sitio

de Microsoft para descargar todos los archivos

necesarios para la instalación. Tenga en cuenta que el

tiempo de instalación depende directamente del

ancho de banda de su red y la configuración del

equipo.

• Una vez instalado el sistema le presentará un

resumen de todas las librerías y aplicaciones

instaladas en el sistema. (Ver Figura 2)

• Haga click en finalizar para terminar con la

instalación.

Figura 1 Sitio web de asp.net

11

Figura 2 Resumen de Instalación de ASP.NET MVC 4

Al finalizar el proceso de instalación del software necesario para empezar a trabajar con MVC, es recomendable que reinicie el equipo para que todas las librerías se carguen correctamente. Una vez su equipo haya iniciado correctamente, encontrará en su escritorio el icono de Visual Studio con el cual se empezará a trabajar el primer proyecto de ASP.NET MVC 4. (Ver Figura 3)

Figura 3 Acceso directo a Visual Studio

12

Capítulo 2. CREAR Y EXPLORAR UN PROYECTO MVC 4

A lo largo de este libro encontrará en cada capítulo una descripción de cada una de las capas del framework MVC, si usted ya posee algún tipo de conocimiento puede tomar este libro como un medio de referencia y consulta, sin embargo para quienes no tienen un marco de referencia sobre el framework MVC se aconseja seguir cada uno de los capítulos ordenamente. Con cada capítulo aprenderá como construirun blog básico utilizando todas las caracterísiticas principales que ofrece MVC 4, explorará en detalle cada una de sus capas y entenderá el proceso de desarrollo e implementación.

CREACIÓN DE UN PROYECTO MVC.

Con la aplicación de desarrollo Visual Studio 2012, el framework ASP.NET y ASP.NET MVC 4, será posible crear el primer proyecto MVC 4 el cual será la base para la aplicación blog.

Para crear el primer proyecto siga los pasos a continuación:

• Busque en su escritorio o en el menú de aplicaciones

Visual Studio 2012 y ejecútelo.

• Si es la primera vez que ejecuta Visual Studio 2012, el

sistema le preguntará que tipo de configuración

13

desea realizar para la edición, en este caso deberá

seleccionar Desarrollo Web. Este procedimiento

adecuará el editor para trabajar con toda la solución

de Visual Studio orientada a desarrollo de

aplicaciones web.

• Una vez haya completado el anterior proceso o en su

defecto el editor se esté ya ejecutando, seleccione

creación de nuevo proyecto. (Ver Figura 4).

Figura 4 Menú creación de proyectos de Visual Studio

• Seleccione Visual C#, a continuación seleccione

Web, allí encontrará diferentes opciones de las cuales

deberá seleccionar ASP.NET MVC 4 Web

Application.

• Asigne el nombre de la aplicación, para este caso será

MiBlogMVC. (Ver Figura 5.)

14

Figura 5 Selección de tipo de proyecto

• A continuación le presentará una serie de opciones de plantilla para el proyecto (Ver Figura 6).

De estas opciones encontrará:

Proyecto Vacío: Esta es una plantilla que contiene las librerías básicas y los ensamblados (librerías compiladas) que hacen referencia al framework MVC 4 para la creación de un sitio web básico, sin embargo no contiene algunos ensamblados para propósito especial.

Proyecto Básico: Contiene todo lo necesario para empezar a trabajar con un nuevo proyecto MVC

4, además de contener los ensamblados principales contiene referencias a otros ensamblados de propósito especial para el

15

desarrollo de aplicaciones MVC. (Por ejemplo ensamblajes del módulo de autenticación).

Aplicación de Internet: Esta plantilla contiene todos los ensamblados básicos, así como una referencia a un controlador por defecto y autenticación de usuarios con Forms.

Aplicación de Intranet: Esta plantilla extiende el comportamiento de la aplicación de internet, su única diferencia es la forma de autenticación a través de Windows.

Aplicación Móvil: Esta plantilla esta optimizada para el desarrollo web para dispositivos móviles, incluye referencias a jquery mobile.

API Web: Esta plantilla extiende el comportamiento de la plantilla de aplicación de internet, incluye el framework Web API para el manejo de RESTful webservices.

16

Figura 6 Selección de plantila de proyecto

• Seleccione la opción Proyecto Básico.

• En el selector de View Engine seleccione Razor como

el manejador de representación de vista por defecto

para este proyecto. ( Ver Figura 6)

• No es necesario que seleccione la opción para la

creación de pruebas unitarias para el proyecto, en

capítulos posteriores se expondrá esta opción con

más detalle.

• Finalmente haga click en aceptar para crear el

proyecto.

17

Una vez esta creado el proyecto podrá ver como se ha generado una serie de carpetas y algunos archivos de configuración que se explican a continuación (Ver Figura 7).

Properties/AssemblyInfo.cs: Este archivo es generado cuando se ha creado el proyecto de MVC, contiene información de los ensambles tales como la configuración, la versión entre otros atributos.

References: Contiene todas las referencias a las librerías que tiene el proyecto, allí se agregarán las librerías que sean necesarias para la ejecución del proyecto.

App_Data: Esta carpeta guarda archivos de almacenamiento de datos, generalmente se utililiza para guardar archivos XML.

Content: Esta carpeta esta destinada para almacenar todos los archivos que contengan estilos, sin embargo la jerarquía interna que el programador cree no interfiere con el funcionamiento del framework. Una de las posibles funciones adicionales que se pueden tratar es el almacenamiento de imágenes y otro tipo de recursos.

Controllers: Esta carpeta almacena todos los controladores del proyecto, allí cada controlador es una clase que extiende de la clase Controllery es parte de la capa de control de MVC. En este capítulo se profundizará sobre el concepto de los controladores.

18

Models: Esta carpeta contiene las clases que controlan el acceso al modelo, allí se almacenarán todos los archivos que refieran uno o varios modelos en específico.

Scripts: En esta carpeta se localizan automáticamente en el proyecto básico todos los archivos de javascript que utilice el proyecto, en general se encontrarán librerías como: jquery, jquery-ui, modernizr, knockout, sin embargo usted podrá agregar sus propios archivos de javascript o librerías de utilidad.

Views: En esta carpeta se encuentran los archivos HTML que representan la vista para cada controlador, allí se encuentra la carpeta Shared que actúa como un contenedor de vistas compartidas para utilizar funciones de HTML parcial entre otros. También encontrará el layout o distribución física del sitio web además de algunos archivos HTML por defecto como Error.cshtml.

Global.asax: Este archivo controla los eventos de la aplicación que se generan en ASP.NET y sus clases derivadas de módulos HTTP. Es un archivo opcional generado automáticamente en la creación del proyecto MVC, se crea con el motivo de controlar los eventos de la aplicación o sus sesiones.

packages.config: Este archivo es producto de la configuración de NuGet (un manejador de paquetes que controla las referencias a los diferentes ensambles y librerías de javascript), mantiene la configuración del

19

archivo web.configy permite a través de una interfaz agregar referencias de una manera más fácil. NuGet fue introducido a MVC desde su versión 3 como un componente adicional, ahora en MVC 4 es un componente automáticamente agregado en la creación y mantenimiento de proyectos ASP.NET MVC 4.

Web.config: Este es un archivo XML que controla la configuración de la aplicación, tal como la referencia a módulos, configuración de acceso y parámetros específicos. Permite evitar la configuración extensiva de los servidores y controlar los parámetros de comportamiento desde la misma aplicación.

Figura 7 Estructura de un proyecto básico MVC

20

Para crear la primera vista de la aplicación Blog será necesario crear un controlador, configurar el sistema de enrutamiento de la aplicación para que ejecute dicho controlador por defecto cuando la aplicación sea lanzada y finalmente deberá crear una vista que reciba toda la información del controlador.

• Haga click derecho en la carpeta Controllers,

seleccione Add, luego seleccione Controller; a

continuación se le presentará un cuadro de diálogo.

Del menú Scaffolding Options seleccione la plantilla

vacía, la cual creará una clase controlador con una

acción vacía. (Ver Figura 8).

Figura 8 Menu de creación de controladores.