Universidad del Tolima

Facultad de Ingeniería de Sistemas

Seminario

Patrón MVC para el desarrollo de aplicaciones WEB.

Presentado por: Mary Ospina código: 084800582015

Jefferson Moreno

Presentado A: Omar Mayorga Profesor.

Universidad Del Tolima

Facultad De Ingeniería De Sistemas
Seminario
2017
ÍNDICE GENERAL

1 Introducción´ 2

2 Objetivos 3
2.1 Objetivo general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Objetivos específicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

3 Fundamentos de ASP.NET MVC 4

3.1 Definiendo a ASP.NET Core . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.2 Ventajas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

4 MVC 6
4.1 Modelo ................................................ 7
4.1.1 Entity Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
4.2 Controladores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.2.1 Mapeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.2.2 ViewBag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.3 Vistas ................................................. 9
4.3.1 Razor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.3.2 Características de Razor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.3.3 Bucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.3.4 Bucle While . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.3.5 Bucle for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.3.6 Bucle ForEach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

5 Terceros 12
5.1 Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
5.2 JQuery ................................................. 13
5.2.1 Caractericias mas importantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

6 Conclusiones 15

Bibliografía 15
ÍNDICE DE FIGURAS

Figura 4.0.1 MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Figura 4.3.1 Razor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Figura 5.1.1 Bootstrap Framwork ..

................................... 12
Figura 5.2.1 JQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
INTRODUCCIÓN´

NET Core ha cambiado el paradigma radical en el cual se había mantenido durante

tantos años y ahora se ha profundizado en el mundo del código abierto, pues ahora es
una versión modular de .NET Framework diseñada para que sea portátil entre
plataformas, a fin de permitir la reutilización del código al máximo y su uso compartido.
Además.NET Core será de código abierto y aceptará las contribuciones de la
comunidad. Este tema responde a algunas preguntas comunes sobre .NET Core y
sobre como tener acceso y contribuir a los paquetes de código abierto.

En el presenta se abordarán temas como el patrón de diseño MVC, Scaffolding y

buenas prácticas para el desarrollo de aplicación web.
Objetivos

Objetivo general

Estudiar el patrón MVC para el desarrollo de aplicaciones Web

Objetivos específicos

Los objetivos específicos que contribuirán a desarrollar el objetivo general del trabajo
son los siguientes:

Revisión de conceptos básicos y fundamentos de ASP.NET MVC

Mencionar y explicar librerías de terceros que usa ASP.NET para su funcionamiento

Profundizar en el modelo, vistas y controladores de una aplicación´ web hecha en

ASP.NET Core

Enfatizar en las buenas prácticas en el desarrollo de aplicaciones Web

ASP.NET Core 2.0
Desarrollo de Aplicaciones WEB
como ya sabréis, hace algunas semanas Microsoft anunció la disponibilidad de, entre
otras tecnologías, ASP.NET Core 2.0, para dar el salto: Desarrollo Web con ASP.NET
Core 2 MVC.

Se trata de una revisión del curso sobre ASP.NET Core MVC, que tan buena acogida
y críticas ha tenido hasta el momento, actualizando conceptos y reflejando las
novedades en APIs, funcionalidades y herramientas con las que esta segunda versión
del framework promete revolucionar nuestra forma de desarrollar aplicaciones y
servicios para la web.
objetivos de diseño de la plataforma
Instalación de marco y tolos
Crear aplicaciones desde plantillas
Configuración de inicio
Conceptos básicos del middleware
Ayuda de inyección de dependencia
ASP.NET core MVC
Web API y páginas Razor

Fundamentos
ASP.NET:
Core es un marco multiplataforma de código abierto y de alto rendimiento que tiene
como finalidad compilar modernas aplicaciones conectadas a Internet y basadas en la
nube. Con ASP.NET Core puede hacer lo siguiente:
Compilar servicios y aplicaciones web, aplicaciones de IoT y back-ends móviles.
Usar sus herramientas de desarrollo favoritas en Windows, macOS y Linux.
Efectuar implementaciones locales y en la nube.
Ejecutarlo en .NET Core o en .NET Framework.
.NET:
es un framework de Microsoft que hace un énfasis en la transparencia de redes, con
independencia de plataforma de hardware y que permita un rápido desarrollo de
aplicaciones.
.NET Framework?
Traducido como marco de trabajo
Es la plataforma de desarrollo de código administrado de Microsoft

Está formado por una serie de herramientas y librerías en la que se puede crear todo
tipo de aplicaciones desde las tradicionales aplicaciones de escritorio Windows
presentation faundeichon o Windows Ford, hasta aplicaciones para x box pasando por
desarrollo web, desarrollo para dispositivos móviles o aplicaciones de servidor.
Está compuesto por un conjunto de tecnologías que forman parte importante de la
plataforma .NET
Constituye una infra estructura de programación para contribuir y ejecutar aplicaciones
y servicios para la plataforma .NET
Soporta la programación orientada a objetos
Minimiza conflictos de versiones de DLLs ( DLL Hell)
Basado en estándares.
NET Framework consta de dos componentes principales:
Common Language Runtime y la biblioteca de clases de .NET Framework. Common Language
Runtime es el fundamento de .NET Framework.

CLR: El Common Language Runtime o CLR ("entorno en tiempo de ejecución de lenguaje

común") es un entorno de ejecución para los códigos de los programas que corren sobre la
plataforma Microsoft .NET. ... En tiempo de ejecución, el compilador del CLR convierte el
código CIL en código nativo para el sistema operativo.
es un entorno de ejecución para los códigos de los programas que corren sobre la plataforma
Microsoft .NET.
De hecho, el concepto de administración de código es un principio fundamental del motor en
tiempo de ejecución.

La biblioteca de clases de .NET Framework (BCL – Basic Common Library).

La biblioteca de clases de .NET Framework es una biblioteca de clases, interfaces y

tipos de valor que proporcionan acceso a la funcionalidad del sistema. Es la base sobre
la que se compilan aplicaciones, componentes y controles de .NET Framework. En la
tabla siguiente se muestran los espacios de nombres y las categorías de espacios de
nombres de la biblioteca de clases, que también se documentan detalladamente en
esta referencia. Los espacios de nombres y las categorías se muestran según su uso, y
aparecen en primer lugar los espacios de nombres que se usan con más frecuencia.
Fundamentos de ASP.NET MVC

Como se mencionó en la introducción´ de este escrito ASP.NET Core es el nuevo

framework de desarrollo web de Microsoft. Como se ha mencionado en (w3i), se ha
rediseñado˜ desde cero para ser rápido,´ flexible, moderna, y trabajar a través de
diferentes plataformas. En el futuro, ASP.NET Core es el marco que puede ser utilizado
para el desarrollo web con .NET. Si usted tiene alguna experiencia con MVC o Web API
en los últimos años, se dará cuenta de algunas características familiares. Al final de
este tutorial, usted tendrá´ todo lo que necesita para empezar a utilizar ASP.NET Core y
escribir una aplicación´ que puede crear, editar y visualizar los datos de una base de
datos.

Definiendo a ASP.NET Core

ASP.NET Core es un código´ abierto y un marco Web optimizada en la nube para el

desarrollo de aplicaciones web modernas que se pueden desarrollar y ejecutar en
Windows, Linux y Mac. Incluye el marco MVC, que ahora combina las características de
MVC y API Web en un marco único de programación´ web.

aplicaciones ASP.NET núcleo´ puede ejecutar en .NET Core o en .NET Framework

completo.

Fue diseñado para poder proporcionar un marco de desarrollo optimizado para

aplicaciones que se implementan en la nube o se ejecutan en las instalaciones.

Se compone de componentes modulares con una sobrecarga mínima, por lo que

mantener la flexibilidad al construir sus soluciones.

Puede desarrollar y ejecutar su ASP.NET Core aplicaciones multiplataforma en

Windows, Mac y Linux.

Ventajas

ASP.NET Core viene con las siguientes ventajas -

ASP.NET Core tiene una serie de cambios arquitectónicos´ que resultan en un marco
mucho más´ ligera y modular.
ASP.NET Core ya no se basa en System.Web.dll. Se basa en un conjunto de paquetes
granular y NuGet bien por coeficientes.

Esto lo permite optimizar su aplicación´ para incluir solo´ los paquetes NuGet que
necesita.

Los beneficios de una superficie más´ pequeña˜ aplicación´ incluyen mayor seguridad,
reducción´ de mantenimiento, mejora del rendimiento y disminución´ de los costos

MVC

El modelo MVC (dev) propuesto por ASP NET Core para el desarrollo de aplicaciones
web, tiene por objeto separar una aplicación´ en tres componentes principales: el
modelo, la vista y el controlador. El marco de ASP.NET MVC proporciona una
alternativa al modelo de formularios Web Forms de ASP.NET para crear aplicaciones
web. El marco de ASP.NET MVC es un marco de presentación´ de poca complejidad y
fácil´ de comprobar que (como las aplicaciones basadas en formularios Web Forms) se
integra con las características de ASP.NET existentes, tales como paginas´ maestras y
la autenticación´ basada en pertenencia.

Visual Studio, que es el IDE desarrollado por el mismo Microsoft, tiene todo un
esqueleto funcional del MVC que se importa desde System.Web. Mvc. El Model MVC
usado por el IDE lo trae desde el MVC del código principal.
Core del framework, y trae consigo unas facilidades para el desarrollo de las
aplicaciones con su funcionalidad de” mapeo”.
 Modelo

Los objetos de modelo son las partes de la aplicación´ que implementan la lógica´ del
dominio de datos de la aplicación´. A menudo, los objetos de modelo recuperan y
almacenan el estado del modelo en una base de datos. Por ejemplo, un objeto
Producto podría recuperar información´ de una base de datos, trabajar con ella y, a
continuación, ´ escribir la información´ actualizada en una tabla Productos de una base
de datos de SQL Server.

En las aplicaciones pequeñas, ˜ el modelo es a menudo una separación´ conceptual en

lugar de física. Por ejemplo, si la aplicación´ solo lee un conjunto de datos y lo envía a
la vista, la aplicación´ no tiene un nivel de modelo físico ni las clases asociadas. En ese
caso, el conjunto de datos asume el rol de un objeto de modelo.

Un Ejemplo para la definición de Modelo extraído de (dev) es:

using System;

namespace M v c A p p l i c a t i o n 1 . Models

f
public class Client
f
p u b l i c Guid I d f g e t ; set; g
public string FirstName fget; set; g
p u b l i c s t r i n g SurName f g e t ; s e t ; g

g
g

Hay que recalcar que la clase siempre debe ser publica para poder ser accedida desde
los otros lugares del proyecto y es recomendable que estas se definan en un
namespace Models, puesto que este es el estándar que se maneja y es una buena
práctica´ para entenderse entre desarrolladores.

Entity Framework

Es un conjunto de tecnologías de ADO.NET que permiten el desarrollo de aplicaciones

de software orientadas a datos. Los arquitectos y programadores de aplicaciones
orientadas a datos se han enfrentado a la necesidad de lograr dos objetivos muy
diferentes. Deben modelar las entidades, las relaciones y la lógica de los problemas
empre-seriales que resuelven, y también´ deben trabajar con los motores de datos que
se usan para almacenar y recuperar los datos. Los datos pueden abarcar varios
sistemas de almacenamiento, cada uno con sus propios protocolos; incluso las
aplicaciones que funcionan con un único sistema de almacenamiento deben equilibrar
los requisitos del sistema de almacenamiento con respecto a los requisitos de escribir
un código´ de aplicación´ eficaz y fácil´ de mantener.
Controladores

Los controladores son los componentes que controlan la interacción´ del usuario,
trabajan con el modelo y por ultimo seleccionan una vista para representar la interfaz de
usuario. En una aplicación MVC, la vista solo muestra información; el controlador
administra y responde a los datos proporcionados por el usuario y su interacción, Por
ejemplo, el controlador administra los valores de la cadena de consulta y pasa estos
valores al modelo, que a su vez podría usarlos para consultar la base de datos.

Mapeo

Mapeo es un término utilizado en el desarrollo de aplicaciones en asp para hacer

referencia a ese proceso que lleva a cabo el core de .NET para encontrar esas
funciones que cumplirán un objetivo específico en la renderizacion de información Un
ejemplo claro es cuando se crea una aplicación desde el IDE de Visual Studio y crea un
controlador HomeController con su respectiva carpeta en Views llamada Home. Como
vemos a continuación´ el código que se crea en un proyecto mvc de asp net core, se
propone el siguiente código donde en las rutas se coloca el controlador segundo de un /
donde después colocamos la acción, que equivale a el nombre de una función dentro
del archivo de views.

app . UseMvc ( r o u t e s =>

f
r o u t e s . MapRoute (
name : ” d e f a u l t ” ,
template: ” f c o n t r o l l e r =Home g/ f a c t i o n = I n d e x g/ f i d ?g ” ) ;

routes.MapSpaFallbackRoute(
name : ” s p a f a l l b a c k ” ,
defaults: new f c o n t r o l l e r = ”Home” , action = ”Index”
g);
g);

Por otro lado, el controlador que es el encargado de tener las funciones que se
mencionaron anteriormente, normal-mente contienen la lógica que debe procesarse
antes de mostrar la vista y retornan un valor de tipo IActionResult y retorna la función
View() y renderiza una vista o archivo cshtml del cual se habla en la siguiente sección´.

namespace W e b A p p l i c a t i o n B a s i c . C o n t r o l
lersf
publicclassHomeController:Contr
ollerf
p u b l i cI A c t i o n R e s u l t Index()
f
r e t u r n View ( ) ;
g

p u b l i cI A c t i o n R e s u l t Error()
 f
r e t u r n View ( ) ;
g
g
g

ViewBag

El atributo ViewBag es una forma de pasarle información a los archivos cshtml puesto
que le podemos pasar cualquier tipo de dato y este puede ser mostrado en el cshtml de
cualquier forma con la sintaxis de Razor que se explicara en la siguiente sección, es
importante recalcar hay otras formas, pero esta es la más práctica y eficiente puesto
que las ViewBag soportan cualquier tipo de dato y pueden usarse incluso en bucles
para renderizar datos de una base de datos, por ejemplo.

p u b l i cI A c t i o n R e s u l t Index()

f
ViewBag . a r g u m e n t o = ” Algo de I n f o r m a c i o
n ” ; r e t u r n View ( ) ;

Vistas

Las vistas son los componentes que muestra la interfaz de usuario de la aplicación´.
Normalmente, esta interfaz de usuario se crea a partir de los datos de modelo. Un
ejemplo sería una vista de edición de una tabla Productos que muestra cuadros de
texto, listas desplegables y casillas basándose´ en el estado actual de un objeto
Producto.

Razor

Razor es una sintaxis de marcado que le permite incrustar código basado en servidor
(Visual Basic y C) en las páginas web.

Servidor-basado código puede crear contenido web dinámico sobre la marcha, mientras
que una página web se escribe en el navegador. Cuando se llama a una página web, el
servidor ejecuta el código basado en servidor dentro de la página antes de que
devuelve la página al navegador. Ejecutando en el servidor, el código puede realizar
tareas complejas, como acceso a bases de datos.

Razor se basa en ASP.NET y diseñado para crear aplicaciones web. Tiene el poder de
la tradicional marca de ASP.NET, pero es más fácil de usar y más fácil aprender.
Características de Razor

Bloques de código se adjuntan en @...

Inicio de expresiones (funciones y variables) en l´ınea con @

Líneas de código con punto y coma

Las Variables se declaran con la palabra clave var

Strings están encerrados con comillas.

Código de C es sensible a mayúsculas

C archivos tienen la extensión cshtml

Como se puede observar en la figura, Razor es solo una parte del proyecto, y como va
en la punta de la pirámide, es una de las características que, aunque es muy poderosa
también, solo tiene como objetivo permitir la interacción del usuario final con todas las
características de la aplicación.

A partir de Razor es que se le da vida al os botones, se le da una navegación´ lógica a

la aplicación.
Bucles

Como es común y necesario los lenguajes de programación tienes bucles para recorrer
arrays y/o hacer algo en específico mientras se cumple una condición. Dentro de Razor
encontramos bucles como:

Bucle While

Se ejecuta siempre y cuando se cumpla la condición. Puede llegar a no ejecutarse:

@f
v a r countNum = 0 ;
w h i l e ( countNum < 5 0 )

f
countNum += 1 ;
<p>L i n e #@countNum : </p>
g
g

Bucle for

Recorre el array hasta que i sea menor que 21 segun el ejemplo a continuación´.
Siempre lleva un índice para indicar en que parte del arreglo se encuentra.

@for ( v a r i = 1 0 ; i < 2 1 ; i ++)

f
<p>L i n e # : @i</p>
g

Bucle ForEach

Su uso es precisamente para recorrer todo un array sin índice, lo que lo hace mucho
más eficiente a la hora de ejecución´ porque no lleva un índice .

@ f o r e a c h ( v a r myItem in Request.ServerVariables)

f
< l i >@myItem</ l i >
g
</ul>
Bootstrap

Bootstrap (boo) es un framework desarrollado y liberado por Twitter que tiene como
objetivo facilitar el diseño web. Permite crear de forma sencilla webs de diseño
adaptable, es decir, que se ajusten a cualquier dispositivo y tamaño˜ de pantalla y
siempre se vean igual de bien. Es Open Source o código abierto, por lo que lo podemos
usar de forma gratuita y sin restricciones.

Ventajas

La más genérica´ es que permite simplificar el proceso de maquetación, sirviéndonos

de guía para aplicar las buenas prácticas y los diferentes estándares Aquí van unos
cuantos pros más.
Puedes tener una web bien organizada de forma visual rápidamente la curva de
aprendizaje hace que su manejo sea asequible y rápido´ si ya sabes maquetar.
Permite utilizar muchos elementos web: desde iconos a desplegables,
combinando HTML5, CSS y Javascript.

Sea lo que sea que creemos, el diseño será adaptable, no importa el dispositivo,
la escala o resolución
El grid system: maquetar por columnas nunca fue tan fácil, Además, son muy
configurables.
Se integra muy bien con las principales librerías Javascript.
El haber sido creado por Twitter nos da ciertas garantías: esta´ muy pensado y hay
mucho trabajo ya hecho.

Por lo tanto, hay una comunidad muy activa creando, arreglando cosas, ofreciendo
plugins y mucho más.

Cuenta con implementaciones externas para WordPress, Drupal, etc.

Nos permite usar Less, para enriquecer aun´ mas´ los estilos de la web.

JQuery
Para el desarrollo de esta sección vale la pena cita a (?) que nos dice que es una
biblioteca multiplataforma de

JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de
interactuar con los documentos

HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar

interacción con la técnica

AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC.

jQuery es la biblioteca de

JavaScript más´ utilizada

Caractericias mas importantes

Jquery en si tiene infinidad de características que hacen este framework indispensable

no solo para el desarrollo de software con ASP Core, sino que también para muchos
otros proyectos ya que, aunque tiene más de 10 años desde su lanzamiento inicial el
26 de agosto de 206 fue reutilizado en muchos otros proyectos. A continuación´ se
mencionan sus cualidades.

Selección´ de elementos DOM.

Interactividad y modificaciones del árbol´ DOM, incluyendo soporte para CSS 1-
3 y un plugin básico de XPath.
Eventos.
Manipulación´ de la hoja de estilos CSS.
Efectos y animaciones.
Animaciones personalizadas.
AJAX.
Soporta extensiones.
 Utilidades varias como obtener información´ del navegador, operar con objetos y
vectores, funciones para rutinas comunes, etc.
Compatible con los navegadores Mozilla Firefox 2.0+, Internet Explorer 6+,
Safari 3+, Opera 10.6+ y Google Chrome 8+.
Es importante recalcar que, aunque este no precisamente obligatorio para el
funcionamiento de una aplicación, sí que es indispensable usarlo para mejorar la
experiencia de usuario en el cliente final y facilitar procesos comunes dentro del
desarrollo a la hora de renderizar información´ en el DOM
CONCLUSIONES

ASP.NET Core ahora es open source, lo cual permite utilizar su código fuente y
hacer aportes, modificarlo o integrarlo con otras herramientas open source.
La integración de librerías de terceros como Bootstrap y JQuery, hacen de un
proyecto ASP.NET Core algo realmente maravilloso para trabajar usando con
proyectos escalables muy amigable para desarrolladores y proveerle interfaces
muy cómodas al usuario final.
El patrón MVC propuesto para trabajar con proyectos ASP.NET Core, es muy
fácil de entender y manejar. Además, está muy bien pensado para trabajar
rápidamente en proyectos pequeños y muy robusto para hacer proyectos
evolutivos y escalables.
El hecho de que ahora sea de código abierto, no ha dejado de ser maravilloso,
puesto que igual podemos seguir trabajando con framwors como
entityFrameworkCore para interactuar con las bases de datos de forma
transversal.
Trabajar con EntityFramework, hace que la migración, creación y variación de
base de datos sea muy fácil, y ASP.NET core trae consigo todas estas
funcionalidades, para que el desarrollo sea eficiente y eficaz.

Visual Studio, usa todo el poder de .NET Core y a la hora de crear proyectos,
nos ayuda con tareas tan sencillas a la hora de desarrollar como importar las
librerías que necesitemos o cosas muy complejas como crear todo el login para
nuestra página web con solo dos clics.
Visual Studio no es la única opción para desarrollar nuestras aplicaciones en
ASP.NET Core, pues también podemos utilizar herramientas como visual studio
code o IDE de Jetbrain Rider (Acr) que están también disponibles para Linux y
IOS.
Razor es una herramienta que trae por defecto ASP.NET Core que facilita
demasiado el trabajo de renderiza-cion de grandes volúmenes de información´
traídos desde una base de datos por ejemplo, y esto gracias a que permite
integrar código C mezclado con HTML.
BIBLIOGRAFIA

[w3i] Asp.net razor markup. https://www.w3schools.com/asp/razor_intro.asp.

(Accessed on 05/29/2017). 4

[Acr] A cross-platform .net ide based on the intellij platform and resharper.
https://www.jetbrains.com/ rider/. (Accessed on 05/23/2017). 15

[mic] Informacion´ general de entity framework. https://msdn.microsoft.com/es-

es/library/ bb399567(v=vs.110).aspx. (Accessed on 05/22/2017). 7

[dev] Patron´ mvc. modelo vista controlador. 6, 7

[boo] Que´ es bootstrap y cuales´ son sus ventajas — punto abierto.

http://puntoabierto.net/blog/ que-es-bootstrap-y-cuales-son-sus-ventajas.
(Accessed on 05/29/2017). 12