7/25/2019 Manual Mvc4

1/18

ASP.NET MVC 4 CON VISUAL STUDIO 2012Desarrollo de aplicaciones ulizando el patrn de diseo Modelo Visor Controlador

Manual creado por: Lic. Krsna Emanuel Rocha Mellado para el Instuto de Ciencias, El colegio Jesuita de Gdl.

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

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

MODELO

VISOR CONTROLADOR

USUARIO

VIASUALIZA U

SA

M NUPULNUPULMANUPULATU LIZTU LIZACTUALIZA

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 peciones 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: Define la manera en que interactan el visor con el modelo, recoge y procesa las acciones de

usuario, responde a eventos (usualmente acciones del usuario), y manda peciones al modelo, es como un

intermediario entre el visor y el modelo.

MVC Y BASE DE DATOS

En MVC la gesn de base de datos corresponde al modelo, a la unin entre la capa de visor de controlador y demodelo se le conoce como programacin por capas, dicha programacin est basada en una arquitectura cliente-

servidor y el objevo 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 modificar la capa en cuesn.

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)

FIG. 1

7/25/2019 Manual Mvc4

2/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

FIG. 2

2.- Una vez que aparezca la siguiente pantalla hay que elegir la plalla 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 figura 3

FIG. 3

PL NTILL

PLIC CION WEB

NOMBRE DE PROYECTO

7/25/2019 Manual Mvc4

3/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

3.- En la siguiente pantalla seleccionar la planlla APLICACION DE INTERNET el motor de vistas a ulizar es RAZOR

una vez hecho esto dar click en el boton ACEPTAR como se muestra en la 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 conene 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 acvar por medio del menu VER->EXPLORADOR

DE SOLUCIONES. Las carpetas mostradas enen diferentes usos y a connuacin detallaremos:

App_Data:Contenido sico de datos como BD y otros. App_data:Archivos de configuracin de inicio. Content: Conene Eslos CSS y algunos archivos de Jquery. Controllers:Carpeta que conene los controladores estndar y personales. Images:Carpeta de imgenes. Models:Conene las clases que representan los modelos de la aplicacion que definen los objetos y la lgica

para interactuar con las bases de datos.

Scripts:Conene 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

FIG. 4

7/25/2019 Manual Mvc4

4/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

SHARED Tambin esta la carpeta que se uliza para comparr informacin entre mlples controladores. Global.asax (archivo) :este archivo conene informacin de ruteamiento global, tambin conene el registro

inicial de filtros y algunas configuraciones bsicas.

Web.config (archivo):Archivo de configuracin para WEB. Packages.config (archivo): Hace referencia a los paquetes que se ulizaran en nuestra aplicacion por ejemplo

Enty Framework, Jquery, Razor, etc.

AssemblyInfo.cs (archivo dentro de carpeta properes ): Conene informacin sobre el ensamblado denuestra 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 plallas de WEB, y

conene 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

FIG. 5

7/25/2019 Manual Mvc4

5/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

FIG. 6

7/25/2019 Manual Mvc4

6/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

7/25/2019 Manual Mvc4

7/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

7/25/2019 Manual Mvc4

8/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

7/25/2019 Manual Mvc4

9/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

7/25/2019 Manual Mvc4

10/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

7/25/2019 Manual Mvc4

11/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

7/25/2019 Manual Mvc4

12/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

7/25/2019 Manual Mvc4

13/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

7/25/2019 Manual Mvc4

14/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

7/25/2019 Manual Mvc4

15/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

7/25/2019 Manual Mvc4

16/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

7/25/2019 Manual Mvc4

17/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA

PAGMANUAL ASP.NET MVC 4

7/25/2019 Manual Mvc4

18/18

INSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARAINSTITUTO DE CIENCIAS EL COLEGIO JESUITA DE GUADALAJARA