INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

ASP.NET MVC 4 CON VISUAL STUDIO 2012

Desarrollo de aplicaciones u lizando el patrn de diseo Modelo Visor Controlador
Manual creado por: Lic. Krsna Emanuel Rocha Mellado para el Ins tuto de Ciencias, El colegio Jesuita de Gdl.

El esquema general de este patrn de diseo es el siguiente (Fig. 1)

MODELO
ACTUALIZA

VISOR

MANUPULA

CONTROLADOR

ZA

LI

US

UA

AS

VI

USUARIO
FIG. 1

En forma general este patrn de diseo consta de 3 partes que son MODELO, CONTROLADOR Y VISOR, cada una de
estas partes est separada de las otras, sin embargo interactan a travs de las pe ciones que el usuario realiza, a
saber cada componente hace lo siguiente:
MODELO: Representa la lgica del negocio de la aplicacin y los datos con los que trabajamos, no necesita estar
atado a una base de datos, es el ncleo de la aplicacin y enva a la VISTA la parte de la informacin que se le solicita
que sea mostrada.
VISOR: Se usa para renderizar un modelo en una interfaz de usuario, es la presentacin de la aplicacin tambin
conocida como GUI (Graphical User Interface).
CONTROLADOR: Dene la manera en que interactan el visor con el modelo, recoge y procesa las acciones del
usuario, responde a eventos (usualmente acciones del usuario), y manda pe ciones al modelo, es como un
intermediario entre el visor y el modelo.

MVC Y BASE DE DATOS

En MVC la ges n de base de datos corresponde al modelo, a la unin entre la capa de visor de controlador y de
modelo se le conoce como programacin por capas, dicha programacin est basada en una arquitectura clienteservidor y el obje vo es la separacin lgica del negocio con la del diseo, la ventaja principal es que cuando exista
la necesidad de algn cambio solo es necesario modicar la capa en cues n.

CREACION DE UN PROYECTO EN ASP.NET MVC 4

1.- Abrir el Visual Studio 2012 y seleccionar el men ARCHIVO->NUEVO->PROYECTO o con las teclas rpidas
Ctrl+Shi +N (Fig. 2)

MANUAL ASP.NET MVC 4

PAG. 1

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

FIG. 2

2.- Una vez que aparezca la siguiente pantalla hay que elegir la pla lla WEB de C#, y en el recuadro de en medio
seleccionar la opcion APLICACION WEB DE ASP.NET MVC 4, seguido a esto introducir un nombre para el proyecto, y
presionar el boton ACEPTAR como se muestra en la gura 3

PLANTILLA
APLICACION WEB

NOMBRE DE PROYECTO

FIG. 3

MANUAL ASP.NET MVC 4

PAG. 2

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

3.- En la siguiente pantalla seleccionar la plan lla APLICACION DE INTERNET el motor de vistas a u lizar es RAZOR,
una vez hecho esto dar click en el boton ACEPTAR como se muestra en la Fig. 4

FIG. 4

4.- Despus de esperar un poco a que se cargue el proyecto se mostrara el entorno de trabajo de Visual Studio y en
la parte central podremos observar el cdigo del archivo HomeControlers.cs que con ene los controladores por
default de nuestra aplicacin, mientras que en la parte derecha veremos una lista de carpetas dentro del
EXPLORADOR DE SOLUCIONES (Fig 5) si no esta visible el se puede ac var por medio del menu VER->EXPLORADOR
DE SOLUCIONES. Las carpetas mostradas enen diferentes usos y a con nuacin detallaremos:
App_Data: Contenido sico de datos como BD y otros.
App_data: Archivos de conguracin de inicio.
Content: Con ene Es los CSS y algunos archivos de Jquery.
Controllers: Carpeta que con ene los controladores estndar y personales.
Images: Carpeta de imgenes.
Models: Con ene las clases que representan los modelos de la aplicacion que denen los objetos y la lgica
para interactuar con las bases de datos.
Scripts: Con ene archivos de scripts.
Views: Carpeta con los visores, generalmente existe un archivo por cada visor en CONTROLLERS que ene
relacion con un visor por ejemplo en controllers hay un archivo llamado HomeControllers.cs y en Views hay una
carpeta llamada HOME, o tambien el archivo AccountControllers.cs ene relacion con la carpeta ACCOUNT
MANUAL ASP.NET MVC 4

PAG. 3

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

FIG. 5

SHARED Tambin esta la carpeta que se u liza para compar r informacin entre ml ples controladores.
Global.asax (archivo) : este archivo con ene informacin de ruteamiento global, tambin con ene el registro

inicial de ltros y algunas conguraciones bsicas.

Web.cong (archivo): Archivo de conguracin para WEB.
Packages.cong (archivo): Hace referencia a los paquetes que se u lizaran en nuestra aplicacion por ejemplo:
En ty Framework, Jquery, Razor, etc.
AssemblyInfo.cs (archivo dentro de carpeta proper es ): Con ene informacin sobre el ensamblado de
nuestra aplicacin.
Favicon.ico: Es el icono de nuestra aplicacin y puede ser editado a nuestro gusto.

EJECUTANDO NUESTRA PRIMERA APLICACIN WEB

Para ejecutar nuestra aplicacin hay 2 formas la primera es con la tecla F5 para ejecutar con depuracin y la
segunda es con Ctrl+F5 para ejecutar sin depuracin, estas opciones estn dentro del menu DEPURAR, una vez
hecho esto se mostrara en el navegador por defecto la pagina que hemos creado con las pla llas de WEB, y
con ene las opciones bsicas para el manejo de una aplicacin WEB tales como: REGISTRO, INICIAR SESION,
INICIO, ACERCA DE, CONTACTO, ETC. Tal y como se muestra en la Fig. 6

MANUAL ASP.NET MVC 4

PAG. 4

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

FIG. 6

MANUAL ASP.NET MVC 4

PAG. 5

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

MANUAL ASP.NET MVC 4

PAG. 6

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

MANUAL ASP.NET MVC 4

PAG. 7

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

MANUAL ASP.NET MVC 4

PAG. 8

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

MANUAL ASP.NET MVC 4

PAG. 9

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

MANUAL ASP.NET MVC 4

PAG. 9

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

MANUAL ASP.NET MVC 4

PAG. 9

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

MANUAL ASP.NET MVC 4

PAG. 9

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

MANUAL ASP.NET MVC 4

PAG. 9

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

MANUAL ASP.NET MVC 4

PAG. 9

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

MANUAL ASP.NET MVC 4

PAG. 9

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

MANUAL ASP.NET MVC 4

PAG. 9

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

MANUAL ASP.NET MVC 4

PAG. 9

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

MANUAL ASP.NET MVC 4

PAG. 9