Sunteți pe pagina 1din 66

Desarrollo Web

Taller –MVC (parte 1)


MSc. Jorge Mario Aceituno Diaz
MVC: Modelo-Vista-Controlador
• Muchosframeworks han sido creados para
aprovechar las ventajas de este enfoque:
 ASP.NET MVC • Django and Python
 Ruby on Rails • Zend Framework (PHP)
 Express (MEAN) • Spring, Struts and Java

• Formulado desde hace más de 30 años


• Un enfoque poderoso y elegante medio para separar
las capas de una aplicación
• Promueve el desarrollo en paralelo para enfocarse en
sus tres componentes
MVC: Modelo-Vista-Controlador

Datos de la aplicación Responsable de gestionar las


y de la funcionalidad, peticiones HTTP
en relación al ámbito Modelo Vista Controlador
e independientes de http://lapurauva.com/tonight
la interface del
usuario Un controlador será seleccionado
Clases con propiedades y Código HTML que se para manejar esta petición
métodos que representan la desplegará al usuario (‘tonight’). Este controlador
funcionalidad de la aplicación obtendrá los eventos para esta
noche de la base de datos (Modelo),
Independientes de la UI porque los colocará en una Vista y los
pueden reusarse en diferentes enviará al navegador
aplicaciones, p.ej. Desktop y
Mobile app
MVC: Modelo-Vista-Controlador

Modelo Vista Controlador

Datos de la aplicación y de Código HTML que se Responsable de gestionar


la funcionalidad, en desplegará al usuario las peticiones HTTP
relación al ámbito e
independientes de la
interface del usuario
MVC: Modelo-Vista-Controlador
Selecciona el
controlador
Modelo Vista Controlador Enrutador apropiado
para atender
la petición
Basado en ciertas reglas,
Datos de la Código HTML que se Responsable el enrutador sabe que la
aplicación y de la desplegará al usuario de gestionar petición con la URL
funcionalidad, en las peticiones ‘/tonight’ debe atenderse
relación al ámbito HTTP utilizando cierta clase y
e independientes cierto método (ACTION)
de la interface del
usuario
http://lapurauva.com/tonight
Paso 1: New Project
• File – New – Project
 Templates – Visual C# – Web
 ASP.NET Web Application – Visual C#
Name: Flicks
Location: C:\Projects
Solution Name: Flicks
 Create directory for solution
 Add to source control
Select a template:
MVC Tarea 1 –fecha de entrega 19/Agosto
 Host in the Cloud • Sistemas de Control de Versiones
(o Control de Código Fuente)
• Clic [ Ok ] • 5 ejemplos
Folders (Solution Explorer)
• App_Data: se guardará el esquema de base de datos
• App_Start: clases que son llamadas al momento de que la
aplicación inicia
 RouteConfig.cs – configuración de las reglas de ruteo
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new {controller="Home", action="Index", id=UrlParameter.Optional } );

• Content: almacena los archivos CSS, imágenes, y recursos


del lado del cliente
Folders (Solution Explorer) –cont.
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new {controller="Home", action="Index", id=UrlParameter.Optional } );

Controller Method Controller ‘Edit’ Action &


or Action ‘1’ as parameter
Folders (Solution Explorer) –cont.
• Controllers:
 Account: —operaciones para autenticación e identificación
 Home: —representa la pagina ‘home’
 Manage: —para modificar el tipo de autenticación, cambio de
contraseñas, autenticación por redes sociales
• Fonts: tipos de letra
• Models: clases de dominio, estructuras que replican los
objetos de la base de datos
• Scripts:
archivos javascript que permiten cierta
funcionalidad
Folders (Solution Explorer) –cont.
• Views: —carpetas de acuerdo a los controladores
 Account
 Home
 Manage
 Shared: vistas que pueden ser usadas por diferentes controladores
• Favicon.ico —icono de la app
• Global.asax —eventos del ciclo de vida de la app
• packages.config —manejo de dependencias externas
• startup.cs —donde se contempla la autenticación inicial
• web.config —connection strings, db settings, app settings
Folders (Solution Explorer) –cont.
• Global.asax —eventos del ciclo de vida de la app
Folders (Solution Explorer) –cont.
• packages.config —manejo de dependencias externas

Tarea 2 –fecha de entrega 19/Agosto


• Package Manager Software
• 5 ejemplos
Folders (Solution Explorer) –cont.
• startup.cs —nuevo enfoque para iniciar la app
• En la nueva versión de ASP.NET Core 1.0, toda la lógica
de inicio es implementada por esta clase. En esta nueva
versión, Global.asax quedará obsoleta
Folders (Solution Explorer) –cont.
• web.config —connection strings, db settings, app settings
Tarea 3 –fecha de entrega 19/Agosto
• Plain Old CLR Object (POCO)
• 4 Ventajas

Paso 2: Add a class


• Solution Explorer – [Right Clic] Models – Add – Class
 Name: Movie

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Flicks.Models
{
public class Movie
{
public int Id { get; set; }
public string Name { get; set; }
}
}
Paso 3: Add a controller
• Crear a página donde podamos visualizar una
película y sus detalles de forma aleatoria (random).
• Podríamos llamarla: /movies/random
• SolutionExplorer – [Right Clic] Controllers – Add –
Controller…
 MVC 5 Controller – Empty
 Add
 Name: MoviesController.cs
Paso 3: Add a controller –cont.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Flicks.Controllers
{
public class MoviesController : Controller
{
// GET: Movies
public ActionResult Index()
{
return View();
}
}
Paso 3: Add a controller –cont.
using System;

using System.Web.Mvc;
Using Flicks.Models;

namespace Flicks.Controllers
{
public class MoviesController : Controller
{
// GET: Movies/Random
public ActionResult Random()
{
var movie = new Movie() { Name = “Shrek!” }
return View();
}
}
Paso 3: Add a controller –cont.
Paso 4: Add a view
• Solution
Explorer – Views – [Right Clic] Movies –
Add – View
Name: Random
Template: Empty (without model)
 Create as partial view
 Reference script libraries
 Use a layout page
Layout: Views – Shared – _Layout.cshtml

• Click on [ Add ]
Paso 4: Add a view –cont.
@{
ViewBag.Title = "Random";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>@Random</h2>

• Una combinación de código C# y HTML


• Regresar a MovieController.cs

Ctrl-F5
Paso 4: Add a view –cont.
using System.Web.Mvc;
Using Flicks.Models;

namespace Flicks.Controllers
{
public class MoviesController : Controller
{
// GET: Movies/Random
public ActionResult Random()
{
var movie = new Movie() { Name = “Shrek!” }
return View(movie);
}
}
Paso 4: Add a view –cont.
@model Flicks.Models.Movie
@{
ViewBag.Title = "Random";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>@Model.Name</h2>

Ctrl-F5
Paso 5: A better template
• Ir a ‘Home’ (en la app)
• Acceder a ‘https://bootswatch.com/’
• Themes – Lumen (revisar el estilo)
• Lumen – bootstrap.css – Grabar el archivo como
‘bootstrap-lumen.css’
• Agregarla al proyecto en el folder ‘Content’
 Copiar el archivo a ‘C:\Projects\Flicks\Flicks\Content’
 [Right clic] Content – Add – Existing item… localizar el
archivo
Paso 5: A better template –cont.
• Reemplazar la referencia
 App_Start – BundleConfig.cs [ Open ]

bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap-lumen.css",
"~/Content/site.css"));

• Compilar y ejecutar la app [ Ctrl-F5 ]


Desarrollo Web
Taller –MVC (parte 2)
MSc. Jorge Mario Aceituno Diaz
Action Results
using System.Web.Mvc;
Using Flicks.Models;

namespace Flicks.Controllers
{
public class MoviesController : Controller
{
// GET: Movies/Random
public ActionResult Random()
{
var movie = new Movie() { Name = “Shrek!” }
return View(movie);
}
}
Action Results
• La acción ‘Random’ corresponde a la clase ‘ActionResult’,
la cual es la clase base para todas las acciones en
ASP.NET MVC
• Depende de lo que hace la acción (de su función o lo que
retorna), retornará una instancia de una de las clases que
se derivan de ‘ActionResult’
• En nuestra acción ‘Random’ estamos llamando el método
‘View’, el cual es un método auxiliar (helper method) para
crear un resultado instantáneo (una vista)
Action Results
Ctrl-Shift-B  Build

Action Results
using System.Web.Mvc; Intentar con:
Using Flicks.Models; • return HttpNotFound();
• return new EmptyResult();
namespace Flicks.Controllers • return RedirectToAction(“Index”, “Home”);
• return RedirectToAction(“Index”, “Home”
{
new { page = 1, sortBy = “name” });
public class MoviesController : Controller
{
// GET: Movies/Random
public ActionResult Random()
{
var movie = new Movie() { Name = “Shrek!” }
return Content(“Soy un Desarrollador Web de la UMG”); Ctrl-F5
}
/movies/random
Parámetros
• ‘ActionResults’ – salida de una acción
• Parámetros – entradas o insumos de una acción

• Como parte de la URL — /movies/edit/1


• Como un script — /movies/edit?id=1
• Usando un formulario — id=1
Parámetros
Public class MoviesController : Controller
{
// GET: Movies/Random
public ActionResult Random()
{
var movie = new Movie() { Name = "Shrek!" };
return View(movie);
}
public ActionResult Edit(int id)
{
return Content("id=" + id); Ctrl-Shift-B  Build
}
} /movies/edit/1
/movie/edit?id=1
Parámetros
Public class MoviesController : Controller
{
// GET: Movies/Random
public ActionResult Random()
{
var movie = new Movie() { Name = "Shrek!" };
return View(movie);
}
public ActionResult Edit(int movieId)
{
return Content("id=" + movieId); Ctrl-Shift-B  Build
}
} /movies/edit/1
/movie/edit?id=1
Parámetros

/movie/edit?movieId=1
Parámetros

NO
‘movieId’
Parámetros
Public class MoviesController : Controller
{
// GET: Movies/Random
public ActionResult Random()
{
var movie = new Movie() { Name = "Shrek!" };
return View(movie);
}
public ActionResult Edit(int Id)
{
return Content("id=" + Id);
}
}
Paso 6: Create a new action
• Mostrar una vista con todas las películas en la base
de datos
• Condos parámetros opcionales: la pagina a
visualizar y el orden en que se requiere la lista
• Si no se especifica la página, que muestre la página 1
• Si
no se especifica el orden, que ordene la lista por
nombre
Paso 6: Create a new action –cont.
// movies
public ActionResult Index (int? pageIndex, string sortBy)
{
if (!pageIndex.HasValue)
pageIndex = 1;
if (String.IsNullOrWhiteSPace(sortBy))
sortBy = "Name";
return Content(String.Format("pageIndex={0}&sortBy={1}", pageIndex, sortBy));
}

• Para hacer un parámetro opcional, hacerlo ‘nullable’


• ‘int?’ convierte ‘pageIndex’ a nulo
• Para‘sortBy’ no hay que especificar nada, porque un tipo
de dato string en C# ya es ‘nullable’
Paso 6: Create a new action –cont.
• Ejecutar y probar

Ctrl-Shift-B  Build
/movies
/movies/?pageIndex=2
/movies/?pageIndex=2&sortBy=FechaEstreno
Paso 7: Custom Route
/movies/released/2015/04

• Sedebe agregar en ‘RouteConfig.cs’ antes del ‘default


route’ porque el orden importa. Es necesario definir
cada ‘route’ desde el más especifico hasta el más
genérico
routes.MapRoute(
"MoviesByReleaseDate",
"movies/released/{year}/{month}",
new { controller = "Movies", action = "ByReleaseDate" });
Paso 7: Custom Route –cont.
Crear una nueva acción para el nuevo ‘route’
- - MoviesController.cs - - - to create the action

public ActionResult ByReleaseDate (int year, int month)


{
return Content(year + "/" + month);
}

Probar
movies/released --- HTTP 404 ERROR –nuestro URL no coincide con los parámetros

/movies/released/2017/7
2017/7
Paso 7: Custom Route –cont.
Año y mes deben ser de 4 dígitos y 2 dígitos
respectivamente
--- RouteConfig.cs ---
routes.MapRoute(
"MoviesByReleaseDate",
"movies/released/{year}/{month}",
new { controller = "Movies", action = "ByReleaseDate" },
new { year = @"\d{4}", month = @"\d{2}"});

year = @"\d{4}" o lo que es lo mismo


year = "\\d{4}“

Probar
/movies/released/2017/7 --- HTTP 404 ERROR – because of the constraints
/movies/released/2017/07
2017/07
Paso 7: Custom Route –cont.
Restringir el año a los valores 2016 y 2017
--- RouteConfig.cs ---
routes.MapRoute(
"MoviesByReleaseDate",
"movies/released/{year}/{month}",
new { controller = "Movies", action = "ByReleaseDate" },
new { year = @"2016|2017", month = @"\d{2}"});

Probar
/movies/released/2015/07 Tarea 4 –fecha de entrega 19/Agosto
/movies/released/2017/07 Attribute Routing
• Ventajas, ¿cómo habilitarlo?
• Parametros opcionales
• Default route
• Route constraints
Relación entre dos clases
• ¿Si
además se requiere mostrar la lista de clientes
que han alquilado cierta película?
• Necesitaríamos pasar dos diferentes modelos a la
vista: la clase ‘movie’ y la clase ‘customer’.
• Unmodelo vista, es un modelo basado en una vista
(combinación de dos clases)
Paso 8: Add a new class
• Solution Explorer – [Right Clic] Models – Add – Class
 Name: Customer

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Flicks.Models
{
public class Customer
{
public int Id { get; set; }
public string Name { get; set; }
}
}
Paso 8: Add a new class –cont.
• Solution Explorer – [Right Clic] Flicks – Add – New Folder
 Name: ViewModels
• Solution Explorer – [Right Clic] ViewModels – Add – Class…
 Name: RandomMovieViewModel
using System.Web;
using Flicks.Models;

namespace Flicks.Models
{
public class RandomMovieViewModel
{
public Movie Movie { get; set; }
public List<Customer> Customers { get; set; }
}
}
Paso 8: Add a new class –cont.
Public class MoviesController : Controller
{
// GET: Movies/Random
public ActionResult Random()
{
var movie = new Movie() { Name = "Shrek!" };
var customers = new List<Customer>
{
new Customer { Name = “Juan Lopez” },
new Customer { Name = “Elsa Ruiz”}
}
var viewModel = new RandomMovieViewModel
{
Movie = movie,
Customers = customers
}

return View(viewModel);
}
}
Paso 8: Add a new class –cont.
@model Flicks.ViewModels.RandomMovieViewModel
@{
ViewBag.Title = "Random";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>@Model.Movie.Name</h2>
@if (Model.Customers.Count==0)
{
<text>No one has rented this movie before.</text>
} else
<ul>
@foreach (var customer in Model.Customers)
{ Tarea 5 –fecha de entrega 19/Agosto
<li>@customer.Name</li> Razor Sintax
} • Razor view engine
</ul> } • Ejemplos
Paso 8: Add a new class –cont.
Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
var className = Model.Customers.Count > 5 ? “popular” : null;
}
<h2 class=“@className”>@Model.Movie.Name</h2>
@if (Model.Customers.Count==0)
{
<text>No one has rented this movie before.</text>
} else Ctrl-F5
/movies/random
[Right Clic] Heading –Inspect
Paso 8: Add a new class –cont.
Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
var className = Model.Customers.Count > 0 ? “popular” : null;
}
@* comentarios
en multiples lineas
*@
<h2 class=“@className”>@Model.Movie.Name</h2>
@if (Model.Customers.Count==0)
{ Ctrl-F5
<text>No one has rented this movie before.</text>
} else /movies/random
[Right Clic] Heading –Inspect
Paso 9: Partial View
• Esuna vista pequeña que podemos reusar en
diferentes módulos de la app
• Nonecesariamente se usan para mostrar un
mensaje. Se pueden utilizar para dividir una vista
grande en diferentes vistas de forma que sean más
mantenibles
Paso 9: Partial View –cont.
• Solution Explorer – Views – Shared – _Layout.cshtml
Paso 9: Partial View –cont.
• Solution Explorer – Views – [Right Clic] Shared – Add –
View…
 View name: _NavBar
 Template: Empty (without model)
  Create as a partial view
 [Clic] Add
Paso 9: Partial View –cont.
• Copiar y pegar todo el ‘div’ llamado ‘NavBar’
Paso 9: Partial View –cont.
• Relacionar la vista parcial ‘_NavBar’ con la vista
‘_Layout’
@Html.Partial(“_NavBar”)
Paso 9: Partial View –cont.
• Pasar un modelo como parámetro a la Vista Parcial
Desarrollo Web
Taller –MVC (parte 3)
MSc. Jorge Mario Aceituno Diaz
Paso 1: Connect to DB Server
• Tools – Connect to Database…
• Seleccionar ‘Microsoft SQL Server’ – [Clic] Continue
• Ingresar ‘GT00200178\SQLEXPRESS’ en Server
Name
• Ingresar ‘master’ en Database Name – [Clic] OK
 Se visualiza la base de datos ‘master’ debajo de ‘Data
Connections’ en ‘Server Explorer’
• [Right Clic] en la base de datos que muestra ‘Server
Explorer’ y seleccionar ‘New Query’
Paso 2: Create a database
CREATE DATABASE [Blogging];
GO
USE [Blogging];
GO
CREATE TABLE [Blog] (
[BlogId] int NOT NULL IDENTITY,
[Url] nvarchar(max) NOT NULL,
CONSTRAINT [PK_Blog] PRIMARY KEY ([BlogId]));
GO
CREATE TABLE [Post] (
[PostId] int NOT NULL IDENTITY,
[BlogId] int NOT NULL,
[Content] nvarchar(max),
[Title] nvarchar(max),
CONSTRAINT [PK_Post] PRIMARY KEY ([PostId]),
CONSTRAINT [FK_Post_Blog_BlogId] FOREIGN KEY ([BlogId]) REFERENCES [Blog] ([BlogId]) ON DELETE CASCADE);
GO
INSERT INTO [Blog] (Url) VALUES ('http://blogs.msdn.com/dotnet'), ('http://blogs.msdn.com/webdev'),
('http://blogs.msdn.com/visualstudio')
GO
Paso 3: New Project
• File – New – Project…
• Installed – Templates – Visual C# – Web
• Seleccionar ‘ASP.NET Core Web Application (.NET
Core)
• Nombre: ‘DBExistente’ – [Clic] OK
• Elegir
de la ventana “New ASP.NET Core Web
Application’, en el área ‘ASP.NET Core 1.1
Templates’, seleccionar ‘Web Application’
• Authentication: ‘No Authentication’ – [Clic] OK
Paso 4: Entity Framework
• Tools
– NuGet Package Manager – Package Manager
Console
• Ingresar los siguientes comandos:
1. Install-Package Microsoft.EntityFrameworkCore.SqlServer — [Enter]
2. Install-Package Microsoft.EntityFrameworkCore.Tools — [Enter]
3. Install-Package Microsoft.EntityFrameworkCore.SqlServer.Design — [Enter]

• Se requiere conexión Internet


• No debe de mostrar ningún mensaje de error
Paso 5: Recrear el modelo
• Tools
– NuGet Package Manager – Package Manager
Console – Ingresar el siguiente comando:
Scaffold-DbContext "Server=GT00200178\SQLEXPRESS; Database=Blogging;
Trusted_Connection=True;” Microsoft.EntityFrameworkCore.SqlServer –
OutputDir Models — [Enter]

• Elproceso de recreación del modelo de base de datos


crea las entidades (clases) ‘Blog.cs’ y ‘Post.cs’ y el
contexto ‘BloggingContext.cs’
• Elcontexto representa una sesión con la base de
datos y permite búsquedas y actualización a través
de las clases
Paso 6: Configurar el contexto
• Abrir ‘Models\BloggincContext.cs’
• Eliminar el método denominado ‘OnConfiguring(…)’
• Agregar el siguiente constructor:
public BloggingContext(DbContextOptions<BloggingContext> options)
: base(options)
{}
Paso 7: Configurar ‘Startup.cs’
• Abrir ‘Startup.cs’
• Agregar las siguientes sentencias al inicio:
using Microsoft.EntityFrameworkCore;
using DBExistente.Models;

• Localizar el método ‘ConfigureServices(…)’


• Agregar el siguiente código:
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
var connection =
@"Server=GT00200178\SQLEXPRESS;Database=Blogging;Trusted_Connection=True;"
services.AddDbContext<BloggingContext>(options => options.UseSqlServer(connection));
}
Paso 8: Crear un controlador
• [Right Clic] Controllers – Add – Controler…
• Seleccionar ‘Full Dependencies’ – [Clic] Add

• [Right Clic] Controllers – Add – Controler…


• Seleccionar ‘MVC Controller with views, using Entity
Framework’ – [Clic] OK
 Model Class: Blog
 Data context class: Blogging Contet
 [Clic] Add
Paso 9: Run the app
• Debug – Start Without Debugging
• Navegar a /Blogs
• [Clic] Create New
“https://webdevumg.blogspot.com”

S-ar putea să vă placă și