CURSO: ASP.

NET MVC –
3 CAPAS -
PROCEDURES
 1.Crear un Proyecto Asp.Net MVC

Click en la Opción “Continuar sin código”

 1.Crear un Proyecto Asp.Net MVC

Click

Seleccionamos
“Nuevo” Click en
“Proyecto”
1.Crear un Proyecto Asp.Net MVC

Buscamos lo
que es Asp.net
MVC

Seleccionamos
Aplicación web
ASP.NET (.NET
Framework)

Damos click en Siguiente

1.Crear un Proyecto Asp.Net MVC

Indicamos el
nombre del
Proyecto

Indicamos la
ubicación
Click en “Crear”
 1.Crear un Proyecto Asp.Net MVC

Marcamos la
opción MVC

Seleccionamos
la opción
“Vacio”
Desmarcamos la
opción “Configurar
para HTTPS”

Damos click en
“Crear”
 2.Crear un Controller

Click en la
carpeta
“Controllers
Click en Click en
“Controlador” “Agregar”
 2.Crear un Controller

Click en
“Controlador de
MVC 5 : en
blanco” Click en el botón
“Agregar”
 2.Crear un Controller

Indicamos el nombre del

Controller
2.Crear un Controller

Indicamos el tipo que nos devuelve

en este caso “ActionResult”

En este caso siempre un

ActionResult nos devuelve un
return View()
 3.Creando una vista

Damos click en
“Agregar vista”

Damos click en el
“Index”
3.Creando una vista

Indicamos el nombre
de la vista

Marcamos la opción “Usar

pagina de diseño”

Click en el botón
“Agregar”
3.Creando una vista

Podemos ver que se

nos creo el HTML
3.Ejecutamos la vista creada
3.¿Como podemos ver la vista creada?

Indicamos el nombre
de la “acción”

Indicamos el nombre
del controller
4.¿Como hacemos que nuestra vista que creamos se vea por defecto?

Damos click en
RouteConfig
4.Indicamos que Pagina Inicia ( Gracias al Controller y el action)

Indicamos el nombre el
controller Indicamos el nombre
de la acción
4.Vemos que apenas carga la pantalla vemos la página
4.Creando acciones que nos boten diferentes tipos de datos

Indicamos el tipo de
dato que retorna

Retornamos un mensaje que es

“Hola bienvenido al año nuevo”
4.Creando acciones que nos boten diferentes tipos de datos

Indicamos el nombre Indicamos el nombre

del controller de la acción
4.Podemos arrojar un numero entero

Indicamos el tipo de
dato que devolvera

Indicamos el valor
 4. Llamar a la Acción Creada

Indicamos Indicamos
el nombre el nombre
del de la
controller acción
4. ¿Si creo una lista se puede visualizar?

Este es el proyecto
principal
4. Crearemos otro Proyecto donde pondremos las entidades

Selecciono

Este es el
proyecto
principal
Damos click en
Nuevo Proyecto
4. Le indicamos un nombre

Buscamos biblioteca de
clases

Elegimos esta opción

Click en el botón
Siguiente
4. Le indicamos un nombre

Indicamos el nombre
de la capa

Damos click en “Crear”

4. Le indicamos un nombre

Podemos ver que se creo otro

proyecto y se crea una clase por
defecto que es Class1
 4. Renombramos el nombre de la clase

Renombramos el
nombre de la clase

Damos click en “Si”

para que se renombre
4. Creamos propiedades a la clase

Creamos 3 propiedades
4. Creamos un proyecto

Click derecho en la
Solución
 4. Creamos un proyecto

Selecciono la opción
“Agregar”

Damos click en “Nuevo

proyecto”
4. Elegimos Biblioteca de Clase

Buscamos biblioteca de
clases

Elegimos esta opción

Click en el botón
Siguiente
4. Creamos un Proyecto llamado “Capa Datos”

Indicamos el nombre
de la capa

Damos click en “Crear”

4. Podemos ver que se creo la capa de datos

Podemos ver que se

crea una clase por
defecto llamada Class1
 4. Podemos ver que se creo la capa de datos

Renombramos el
nombre del archivo

Aceptamos el cambio
de nombre
4. Podemos ver que se renombró la clase

Podemos ver que se

renombró la clase
4. Hacemos referencia a la Capa de Entidades

Click
Derecho

Click en
“Agregar
referencia del
proyecto”
 4. Hacemos referencia a la Capa de Entidades

Hacemos referencia la
Capa Entidad
Damos click en
“Aceptar”
4. Hacemos referencia a la Capa de Entidades

En la capa de datos llenamos la información ,

simulando que la información viene de base
de datos
4. Creando la Capa de Negocio

Click en la Solución
4. Creando la Capa de Negocio

Click en la Agregar

Click en “Nuevo
Proyecto”
4. Creando la Capa de Negocio

Creamos un método
llamado
listarTipoHabilitacion
 4. Creando la Capa de Negocio

Seleccionamos
“Agregar”

Click en la Solución

Selecciono la opción
“Nuevo proyecto”
4. Creando la Capa de Negocio

Buscamos biblioteca de
clases

Elegimos esta opción

Click en el botón
Siguiente
4. Creando la Capa de Negocio

Indicamos el nombre al
proyecto

Damos click en el
botón “Crear”
 4. Creando la Capa de Negocio

Podemos ver que tenemos una

clase llamada Class1
 4. Renombrando la clase

Cambiar el nombre
de la clase

Aceptamos que deseamos el

cambio del nombre
4. Renombrando la clase

Click derecho
 4. Renombrando la clase

Damos click en
“Aceptar”

Click en “Agregar Llamamos y

referencia del hacemos referencia
proyecto” a la Capa de Datos
4. Renombrando la clase

Creamos un método que nos

liste los tipos de habitación
4. Recién ahora llamaremos desde el controller

Estamos en el proyecto
principal

Click derecho en
“Referencias”
4. Recién ahora llamaremos desde el controller

Damos check a la Capa de

Click
Entidad y Capa de Negocios

Click en “Aceptar”
4. ¿Se podrá ver el contenido de una lista desde el navegador?

Llamamos a la capa
de negocios

Retornamos el
listado
 4. Probaremos en el browser si se puede ver la lista

Podemos ver que la

información no es
visible!!!!!

Indicamos el nombre Indicamos el nombre

del controller de la acción
4. La solución para que se pueda ver una lista es JSON

Ahora devolveremos
un JsonResult

Ahora indicamos el
Indicamos ahora la JsonRequestBehavior.AllowGet
lista
 4. Probaremos en el browser si se puede ver la lista

Indicamos el nombre
Indicamos el nombre
de la acción
del controller
 4. ¿Cómo lo podemos presentar?

- Creamos un archivo Javascript

Seleccionamos el
proyecto
4. Creamos un archivo Javascript

Click en “Nueva
carpeta”

Seleccionamos
Agregar
 4. Creamos un archivo Javascript

Seleccionamos
“Archivo Javascript”

Creamos una
carpeta “js” Seleccionamos
“Agregar”
 4. Creamos un archivo llamado Generic.js

Indicamos el nombre
que es “generic”

Damos click en el
botón “Aceptar”
 4. Creamos un archivo llamado TipoHabitacion.js

Click derecho y damos

Damos click en la
click en “Agregar”
carpeta “js”
Click en “Archivo
Javascript”
 4. Creamos un archivo llamado TipoHabitacion.js

Indicamos el nombre
tipohabitacion

Damos click en
“Aceptar”
4. Creamos un archivo llamado TipoHabitacion.js

Arrastramos el
archivo tipohabitacion
4. Creamos un archivo llamado TipoHabitacion.js

Indicamos un “Id” al div

donde ahí pintaremos la tabla
4. Creamos un archivo llamado TipoHabitacion.js

Controller Acción

Convertimos a
JSON

Aquí podemos recibir la

“data” convertida a JSON
 4. Creamos un archivo llamado TipoHabitacion.js

Podemos ver en
una alerta los
objetos
 4. Creamos un archivo llamado TipoHabitacion.js

Indicamos el nombre del controller y la

acción

Indicamos como queremos recibirlo

Se ejecuta
cuando termina
de cargar la
página Indicamos como queremos recibirlo

Recorremos los elementos

Indicamos la propiedad

Pintamos la tabla en el
“div”
5.Creando otra vista en un mismo controller

Creamos un ActionResult y el nombre

del método se llama “Inicio”
5.Creando otra vista en un mismo controller

Damos click en
“Agregar Vista”
Click derecho en el
nombre de la Acción
5.Creando otra vista en un mismo controller

Indicamos el nombre
de la vista

Marcamos check en “Usar

página de diseño”

Click en “Agregar”
5.Creando otra vista en un mismo controller

Podemos observar el
contenido del HTML
6.¿Donde podemos ver las plantillas que tiene cada página?

Damos click en el archivo

_layout.cshtml
 7. Vamos a actualizar la versión de Bootstrap

Escribimos y buscamos en
google “bootstrap 5”
7. Vamos a actualizar la versión de Bootstrap

Damos click en el primer enlace que

dice “Introduction Bootstrap V5.0
7. Vamos a actualizar la versión de Bootstrap

Actualizar el archivo CSS

Actualizar el archivo JS
7. Vemos el contenido del CSS

El link lo ponemos en la
parte superior
7. Copiamos el contenido del CSS

Seleccionamos todo el
contenido
7. Reemplazamos la versión 5 por la 3

Pegamos el CSS y
actualizamos de la
versión 3 a la 5
 8. Cambiando el menú por una Vertial

- Pagina recomendada : https://codepen.io/webdoktoru/pen/gojbpP

Copiamos el CSS del

menu
9. Reemplazamos el estilo del Site.css por el que copiamos

Pegamos el estilo del CSS

9. Pegamos el HTML

Hacemos referencia al
link del estilo del menú

Copiamos el HTML del

menú
9. Definimos la nueva posición del RenderBody

Indicamos los estilos CSS

Definimos el RenderBody
 10. Creando Enlaces con Helpers

Indicamos “null” no recibirá parametros

Indicamos la clase

Indicamos el
Indicamos el texto nombre de la
del enlace acción
 10. Probamos eso

Aquí podemos ver el contenido de la

pagina cargada por defecto
 Conexión a una base de datos

Nombre del Servidor

Click en “Conectar
Explorador de
objetos”

Podemos elegir la opción de

Autenticación Windows
 Archivo Web.config

- En este archivo indicaremos la cadena de conexión a la base de datos

Damos click en el
archivo web.config
Conexión Autenticación Windows

Indicamos que
Indicamos el usaremos la
nombre del “name” autenticación Windows

Nombre de la base
de datos
Nombre del
servidor
Indicamos el
connectionString
Conexión a una base de datos Autenticación SQL Server

Nombre del Servidor

Indicamos el tipo de
Authentication
Indicamos el usuario
SQL Server
Indicamos la clave del
usuario SQL Server
Conexión Autenticación SQL Server

Indicamos el
nombre del “name” Contraseña del
usuario

Nombre del usuario

Nombre de la base
de datos
Nombre del
servidor

Indicamos el
connectionString