AUT01 03 TUT AspWebAppPelículas v0

DEPARTAMENTO DE INFORMÁTICA Y COMUNICACIONES
CFGS Desarrollo de aplicaciones Web. 2020-2021

CIFP César Manrique Desarrollo web en entorno servidor. Inma Martinez
UT01. ASP .NET MVC
AUT01_03. Actividad Películas MVC
1. Creamos un proyecto “Aplicación web ASP.NET”.

Peliculas_Apellido1InicialInicial (solución).
1.1 Creamos la solución para el proyecto.
1.2 Creamos el proyecto, con una plantilla MVC
• Referencias para MVC
Página 1 de 17
UT01. ASP .NET MVC
• Sin autenticación
Página 2 de 17
UT01. ASP .NET MVC
2. Añadimos referencias Entity Framework
2.1 Búsqueda del paquete y comando Nuget
Buscamos “Entity Framework” en Nuget.org y nos copiamos el comando “Install-Package EntityFramework”
2.2 Instalación en el proyecto
Vamos a la consola del administrador de paquetes
Ejecutamos el comando
Página 3 de 17
UT01. ASP .NET MVC
3. Primer controlador y vista

Como vemos en la imagen, el asistente ya ha creado un primer controlador HomeController, con 3 action method:
Index(), About(), Contact()
3.1 Método Index()
public ActionResult Index()
return View();
El método Index() es sencillo: sólo retorna una vista.
Como retorna View() sin argumentos, sabemos que el nombre de la vista coincidirá con el nombre del método
(Index.cshtml) y que estará en la carpeta Views/Home, dado que este método pertenece al controlador
HomeController.
3.2 Vista Index.cshtml
Lo primero que vemos es que tiene Layout, dado que NO aparece

lo siguiente:
Página 4 de 17
UT01. ASP .NET MVC
@{
Layout = null;
Como no hemos indicado Layout null, ni tampoco hemos especificado un layout concreto, se aplica el layout por
defecto.
Este layout está ubicado en Views/Shared/_Layout.cshtml
En nuestro código simplemente suministramos el título de la página al layout:
@{
ViewBag.Title = "Home Page";
El resto del código simplemente “pinta” una página de bienvenida, utilizando bootstrap.
3.3 _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title – Películas Inma Martínez</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-

target=".navbar-collapse">
<span class="icon-bar"></span>
Página 5 de 17
UT01. ASP .NET MVC
</button>
@Html.ActionLink("Películas Inma Martínez", "Index", "Home", new { area = "" },

new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Inicio", "Index", "Home")</li>
<li>@Html.ActionLink("Acerca de", "About", "Home")</li>
<li>@Html.ActionLink("Contacto", "Contact", "Home")</li>
</ul>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - Inma Martínez</p>
</footer>
</div>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
Página 6 de 17
UT01. ASP .NET MVC
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
Mediante @RenderBody() se ubica la vista que estamos creando dentro del Layout.
3.4 Añadiendo un poco de estilo a la vista
Vamos a añadir alguna imagen a la vista y un par de links a Action Method, del mismo controlador y de otro
controlador diferente.
Utilizamos Helpers Razor para generar links a action method
Para generar links a métodos de controladores utilizamos:
• @Html.ActionLink(“texto”, “method”, “controller”) para generar una URL a un método de un

controlador x
• @Html.ActionLink(“texto”, “method”) para generar una URL a un método del mismo controlador
• Hay veces que si queremos anidar contenido HTML dentro del elemento <a> no nos interesa utilizar
@Html.ActionLink. En ese caso podemos crear un <a> normal, utilizando @Url.Action(“method”;
“controller”) para su atributo href.
• Ejemplo 1.
Página 7 de 17
UT01. ASP .NET MVC
Página 8 de 17
UT01. ASP .NET MVC
Ejemplo 2:
Para enlazar recursos estáticos podemos:
• Utilizar @Url.Content(“...”)
• Indicar una ruta comenzando por el carácter ~ en este caso Razor ya crea una ruta absoluta incluyendo el
contexto de la aplicación.
Página 9 de 17
UT01. ASP .NET MVC
4. Añadiendo capa de acceso a datos
4.1 En el panel de exploración, Add ---Add New Item---Fíjate que esto es un ejemplo
orientativo y podría cambiar en la versión actual. Añadimos clases del modelo
Entity Framework Fluent API - https://msdn.microsoft.com/en-us/library/jj591617(v=vs.113).aspx
Página 10 de 17
UT01. ASP .NET MVC
Configuring and Mapping Properties and

Types
Entity Framework Fluent API - https://msdn.microsoft.com/en-us/library/jj591620(v=vs.113).aspx

Relationships
Configure One-to-Many Relationship: http://www.entityframeworktutorial.net/code-first/configure-one-to-

many-relationship-in-code-first.aspx
Página 11 de 17
UT01. ASP .NET MVC
Página 12 de 17
UT01. ASP .NET MVC
4.1.1 Comprobamos que tenemos nuestros modelos para nuestras tablas.

…………………..
Página 13 de 17
UT01. ASP .NET MVC
4.1.2 Clase Film y clase Idioma (Language)

En el diagrama ER vemos que hay una relación 1:N de Idioma a Film.
language_id es foreign key en Film respecto a language_id en Film.
Vamos a mapear estas dos clases en nuestro modelo de clases, anotando las propiedades que son Foreign Key
4.1.2.1 Clase Film
//------------------------------------------------------------------------------
// <auto-generated>
// Este código se generó a partir de una plantilla.
//
// Los cambios manuales en este archivo pueden causar un comportamiento inesperado de la

aplicación.
// Los cambios manuales en este archivo se sobrescribirán si se regenera el código.
// </auto-generated>
//------------------------------------------------------------------------------
namespace Peliculas_MartinezI.Models
using System;
using System.Collections.Generic;
public partial class film
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage",
"CA2214:DoNotCallOverridableMethodsInConstructors")]
public film()
this.film_actor = new HashSet<film_actor>();
this.film_category = new HashSet<film_category>();
this.inventory = new HashSet<inventory>();
Página 14 de 17
UT01. ASP .NET MVC
}
public int film_id { get; set; }
public string title { get; set; }
public string description { get; set; }
public string release_year { get; set; }
public byte language_id { get; set; }
public Nullable<byte> original_language_id { get; set; }
public byte rental_duration { get; set; }
public decimal rental_rate { get; set; }
public Nullable<short> length { get; set; }
public decimal replacement_cost { get; set; }
public string rating { get; set; }
public string special_features { get; set; }
public System.DateTime last_update { get; set; }
"CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<film_actor> film_actor { get; set; }
public virtual ICollection<film_category> film_category { get; set; }
public virtual language language { get; set; }
public virtual language language1 { get; set; }
public virtual ICollection<inventory> inventory { get; set; }
4.1.2.2 Clase Idioma
//------------------------------------------------------------------------------
// <auto-generated>
Página 15 de 17
UT01. ASP .NET MVC
// Este código se generó a partir de una plantilla.
//
// Los cambios manuales en este archivo pueden causar un comportamiento inesperado de la
aplicación.
// Los cambios manuales en este archivo se sobrescribirán si se regenera el código.
// </auto-generated>
//------------------------------------------------------------------------------
namespace Peliculas_MartinezI.Models
{
using System;
using System.Collections.Generic;
public partial class language

{
"CA2214:DoNotCallOverridableMethodsInConstructors")]
public language()
{
this.film = new HashSet<film>();
this.film1 = new HashSet<film>();
}
public byte language_id { get; set; }

public string name { get; set; }
public System.DateTime last_update { get; set; }
public virtual ICollection<film> film { get; set; }
public virtual ICollection<film> film1 { get; set; }
}
}
• En el constructor inicializamos un HashSet que contendrá los films que se recuperen de BD según la
relación 1:N.
• Hemos anotado con [Key] la propiedad IdKey, que se corresponde con la PK (clave primaria en la tabla)
Página 16 de 17
UT01. ASP .NET MVC
• Tenemos una propiedad virtual de tipo Icollection<film> que nos devolverá las péliculas relacionadas.
NOTA: veremos cómo, en la clase film, especificamos la FK (foreign key para que haga referencia a
“Idioma”, “Language”)
5. Crear nuevos elementos

Para crear nuevos elementos, hacen falta dos métodos como ya hemos explicado varias veces. Uno para el GET y
otro para el POST.
Página 17 de 17

AUT01 03 TUT AspWebAppPelículas v0

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

AUT01 03 TUT AspWebAppPelículas v0

Cargado por

Copyright:

Formatos disponibles

DEPARTAMENTO DE INFORMÁTICA Y COMUNICACIONES

CFGS Desarrollo de aplicaciones Web. 2020-2021

AUT01_03. Actividad Películas MVC

1. Creamos un proyecto “Aplicación web ASP.NET”.

1.1 Creamos la solución para el proyecto.

1.2 Creamos el proyecto, con una plantilla MVC

• Referencias para MVC

2. Añadimos referencias Entity Framework

2.1 Búsqueda del paquete y comando Nuget

Buscamos “Entity Framework” en Nuget.org y nos copiamos el comando “Install-Package EntityFramework”

2.2 Instalación en el proyecto

Vamos a la consola del administrador de paquetes

3. Primer controlador y vista

3.1 Método Index()

public ActionResult Index()

El método Index() es sencillo: sólo retorna una vista.

3.2 Vista Index.cshtml

Lo primero que vemos es que tiene Layout, dado que NO aparece

Este layout está ubicado en Views/Shared/_Layout.cshtml

En nuestro código simplemente suministramos el título de la página al layout:

ViewBag.Title = "Home Page";

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>@ViewBag.Title – Películas Inma Martínez</title>

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div class="navbar navbar-inverse navbar-fixed-top">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-

@Html.ActionLink("Películas Inma Martínez", "Index", "Home", new { area = "" },

<div class="navbar-collapse collapse">

<ul class="nav navbar-nav">

<li>@Html.ActionLink("Inicio", "Index", "Home")</li>

<li>@Html.ActionLink("Acerca de", "About", "Home")</li>

<li>@Html.ActionLink("Contacto", "Contact", "Home")</li>

<div class="navbar-collapse collapse">

<ul class="nav navbar-nav">

<div class="container body-content">

<p>&copy; @DateTime.Now.Year - Inma Martínez</p>

3.4 Añadiendo un poco de estilo a la vista

Utilizamos Helpers Razor para generar links a action method

Para generar links a métodos de controladores utilizamos:

• @Html.ActionLink(“texto”, “method”, “controller”) para generar una URL a un método de un

Para enlazar recursos estáticos podemos:

4. Añadiendo capa de acceso a datos

Entity Framework Fluent API - https://msdn.microsoft.com/en-us/library/jj591617(v=vs.113).aspx

Configuring and Mapping Properties and

Entity Framework Fluent API - https://msdn.microsoft.com/en-us/library/jj591620(v=vs.113).aspx

Configure One-to-Many Relationship: http://www.entityframeworktutorial.net/code-first/configure-one-to-

4.1.1 Comprobamos que tenemos nuestros modelos para nuestras tablas.

4.1.2 Clase Film y clase Idioma (Language)

language_id es foreign key en Film respecto a language_id en Film.

4.1.2.1 Clase Film

// Este código se generó a partir de una plantilla.

// Los cambios manuales en este archivo pueden causar un comportamiento inesperado de la

// Los cambios manuales en este archivo se sobrescribirán si se regenera el código.

public partial class film

this.film_actor = new HashSet<film_actor>();

this.film_category = new HashSet<film_category>();

this.inventory = new HashSet<inventory>();

public int film_id { get; set; }

public string title { get; set; }

public string description { get; set; }

public string release_year { get; set; }

<p>© @DateTime.Now.Year - Inma Martínez</p>