Documente Academic
Documente Profesional
Documente Cultură
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>
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"));
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
/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));
}
Ctrl-Shift-B Build
/movies
/movies/?pageIndex=2
/movies/?pageIndex=2&sortBy=FechaEstreno
Paso 7: Custom Route
/movies/released/2015/04
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}"});
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]