ASP.NET MVC 3 y 4 - ua€¦ · ENTITY FRAMEWORK GESTIÓN DE TABLAS CON ENTITY FRAMEWORK Vamos a...

ÚLTIMA ACTUALIZACIÓN: 13 DE OCTUBRE DE 2012

SERVICIO DE INFORMÁTICA | UNIVERSIDAD DE ALICANTE

ASP.NET MVC 3 y 4

CONTACTO CON ENTITY FRAMEWORK

Andrés Vallés Botella | Analista | Desarrollos propios

Servicio de Informática | Universidad de Alicante Campus de Sant Vicent del Raspeig | 03690 | España

http://si.ua.es/es/

ASP.NET MVC 3 Y 4 | CONTACTO CON ENTITY FRAMEWORK

Andrés Vallés Botella | Analista | Desarrollos propios Servicio de Informática | Universidad de Alicante Campus de Sant Vicent del Raspeig | 03690 | España http://si.ua.es/es

2

2º DÍA – CONTACTO CON ENTITY FRAMEWORK

CODE FIRST (SQL SERVER)

INTEGRAR APLICACIÓN DEL 1º DÍA

MVC está apuntando muy fuerte por el modelo de trabajo Code First. De forma muy resumida Code

First nos facilita que nosotros creamos el modelo con clases y luego ya se encargará el sistema de

traspasarlo a la base de datos. Todo esto lo vamos a probar desde SQL Server porque en el ODP de

Oracle no se ha implementado esta funcionalidad. Posiblemente en la nueva versión (a finales de

año) ya vendrá integrada.

Los pasos son muy sencillos. Lo primero es crear una clase que herede de DbContext que hará de

nexo entre nuestra aplicación y nuestra base de datos. Dentro de esta indicamos las tablas que se

deben crear. Serán parámetros públicos del tipo DbSet<tabla>.

public class BibliotecaContext : DbContext { public DbSet<Libro> Libros { get; set; } public DbSet<TipoLibro> TiposLibros { get; set; } }

Ahora debemos crear una conexión a SQL Server con el mismo nombre de la clase que hemos creado

anteriormente. En nuestro caso BibliotecaContext.

<configuration> <connectionStrings> <add name="BibliotecaContext" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=CursoSI;Persist Security Info=True;User ID=CursoSI;Password=Sergio" providerName="System.Data.SqlClient" />

Si queremos tener datos cargados por defecto cada vez que carguemos nuestra aplicación podemos

acceder al global.asax y en Application_Start añadir un evento de inicialización.

protected void Application_Start() { Database.SetInitializer(new BibliotecaContextInitializer());

En nuestro caso eliminamos completamente la base de datos y creamos un tipo de libro de tipo

novela.

public class BibliotecaContextInitializer : DropCreateDatabaseAlways<BibliotecaContext> { protected override void Seed(BibliotecaContext context) { context.TiposLibros.Add(new TipoLibro { Descripcion = "Novela" }); } }



3

Como os habréis fijado a los nombres de las tablas les ha añadido “es”. Por defecto pluraliza los

nombres de las tablas, y en el caso del español lo hace con es.

Para evitar este comportamiento debemos modificar la clase DbContext e incluir

protected override void OnModelCreating(DbModelBuilder dbModelBuilder) { dbModelBuilder.Conventions.Remove<PluralizingTableNameConvention>(); }

Ahora si que aparecen las dos tablas con los nombres de nuestras clases.

Si ejecutamos al aplicación, el resultado es el mismo, pero la diferencia principal es que los datos no

se almacenan en memoria como se hacía ayer, sino que realmente se están almacenando en

Si solo queremos que se borre la base de datos cuando se modifica la estructura del modelo y no

cada vez que se reinicie la aplicación, accedemos al global.asax y modificamos

public class BibliotecaContextInitializer : DropCreateDatabaseIfModelChanges <BibliotecaContext>

Si por el contrario solo queremos que se inicialice si no existe la base datos (el modelo sea muy

estable).

public class BibliotecaContextInitializer : CreateDatabaseIfNotExists<BibliotecaContext>



4

ENTITY FRAMEWORK

GESTIÓN DE TABLAS CON ENTITY FRAMEWORK

Vamos a crear un sencillo ejemplo en Oracle para ver que es y para que sirve el modelo Entity

Framework (FW).

Abrimos el Oracle SQL Developer y creamos dos tablas CSI_LIBRO, CSI_TIPOLIBRO

Creamos una secuencia (CSI_SEQ) para que las claves primarias de ambas tablas sean autonuméricas

(Clave Primaria de Secuencia).

Ahora creamos un disparador para cada tabla. Botón derecho en la tabla > Disparador > Crear (Clave

Primaria de Secuencia).Indicamos un nombre para el disparador, seleccionamos la secuencia y el

nombre del campo al que queremos asignarlo y pulsamos aplicar.

Por último creamos la relación entre las tablas. Botón derecho > Restricción > Agregar Clave Ajena…



5

Por el momento no vamos a crear ni vistas ni paquetes. Lo haremos más adelante.

Creamos un nuevo proyecto en el Visual Studio ASP.NET MVC 3 de tipo Internet Application. Lo

llamamos CSI-BibliotecaBD.

Sobre el proyecto botón derecho > Agragar > Nuevo elemento … En las plantillas seleccionamos

Datos y del listado seleccionamos ADO.NET Entity Data Model. El nombre del modelo

ModeloBiblioteca.edmx

En el siguiente asistente marcamos Generar desde la base de datos



6

Ahora creamos una nueva conexión con la base de datos de desarrollo. Marcamos Sí, incluir datos

confidenciales en la cadena de conexión y guardamos la configuración como EntitiesBiblioteca.

Por últimos seleccionamos las tablas y le indicamos como espacio de nombres Models

Se abrirá una pestaña con el esquema de las tablas. A primera vista vemos que ha identificado las

claves principales de cada tabla y la relación entre ambas.



7

Bueno pues es el momento de crear los controladores para cada una de las tablas.

Pulsamos F6 para compilar el proyecto y asegurarnos que el modelo EF es visible para el resto de

elementos de MVC. Botón derecho en la carpeta Controllers > Agregar > Controller… Le asignamos el

nombre LibroController y en la plantilla/template seleccionamos Controller with read/write actions

and views, using Entity Framework. Pulsamos Add y no sólo nos crea los métodos como hacía la

operación de ayer, añade la lógica para su gestión y todas las vistas implicadas.

Para llamar al Index los comentarios del controlador nos indican que llamemos con /Libro/

El resultado es un entorno completo para poder gestionar libros

Es sorprendente como gestiona las relaciones entre las tablas, ya que aparece como un desplegable

con los datos de los tipos de libros.



8

Aquí se ve la potencia real de MVC y EF. Con un par de clics hemos creado una gestión completa de

una tabla.

Haríamos lo mismo para la otra tabla. Al controlador lo podríamos llamar TipoLibroController.

Para poder gestionar ambas tablas desde el menú superior (ahora mismo sólo aparece Home y

About). Abrimos la carpetas Views > Shared y seleccionamos el fichero _Layout.cshtml. Parece una

página Web HTML pero incluye la nomenclatura de Razor. Nos fijamos en la zona de <ul> que se

identifica como menu y añadimos dos opciones más.

<ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("Libros", "Index", "Libro")</li> <li>@Html.ActionLink("Tipo de libros", "Index", "TipoLibro")</li> <li>@Html.ActionLink("About", "About", "Home")</li> </ul>

Compilamos y visualizamos en el navegador

Podemos gestionar ambas tablas y tipo que añadamos, tipo que podemos seleccionar luego en el

libro.

Vamos a modificar las vistas para que los textos aparezcan en castellano, que las cabeceras

identifiquen lo que gestionamos. El Index debería quedar como la pantalla siguiente.



9

Implica modificar Views > Libro > Index.cshml para los elementos propios y Views > Shared >

_Layout.cshtml y _LogOnPartial.cshtml para los elementos comunes.

Hoy lo realizamos a mano para cada uno de los controladores. Mañana ya modificaremos nuestra

aplicación para que los cambios sean comunes para todos los controladores que creemos



10

RAZOR EN DETALLE

MODELO

En la mayoría de los casos la vista trabaja con los datos de un modelo.

Por eso nos podemos encontrar con dos casos, que le enviemos un único registro (por ejemplo para

operaciones de creación o edición) o con un conjunto de datos (por ejemplo listados).

MODELO CON UN ÚNICO REGISTRO

Por ejemplo para ver los detalles de un libro. Incluiremos @model RutaModelo al principio de la

vista.

@model CSI_BibliotecaBDOracle.CSI_LIBRO

Luego para usarlo dentro del código haremos referencia directamente al objeto model

@Html.DisplayFor(model => model.ISBN)

MODELO CON UN CONJUNTO DE DATOS

Por ejemplo para ver el listado de libros. Incluiremos @model IEnumerable <RutaModelo> al

principio de la vista.

@model IEnumerable<CSI_BibliotecaBDOracle.CSI_LIBRO>

Luego para usarlo, por ejemplo en un bucle

@foreach (var item in Model) { .. @Html.DisplayFor(modelItem => item.ISBN) .. }

LAYOUT

Es el equivalente a las MasterPages en WebPages, es decir la plantilla común para todas las páginas

de nuestro sitio.

Por defecto al crear un proyecto MVC nos crea en la carpeta Views > Shared el fichero

_Layout.cshtml. Esta página es la plantilla que usará el asistente de las vistas cuando no

seleccionamos ninguna.

Se puede seleccionar cualquier otra en el momento que creamos la vista



11

o accediendo al código de la vista generado y añadido la línea Layout = “Fichero con la plantilla para

la vista”

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

@RENDERBODY()

Se utiliza en _layout.cshtml para indicar que en ese punto se incluirá el código generado por la vista.

Todos los layouts deben incluirla. En caso de no hacerlo obtendremos el siguiente mensaje de error.

Error de servidor en la aplicación '/'.

No se ha llamado al método "RenderBody" para la página de diseño "~/Views/Shared/_layout.cshtml".

@SECTION



12

Definimos una sección de código Razor / HTML que se insertará en el layout en caso de que se llame

a @rendersection con el nombre de la sección que hayamos declarado.

@section NombreSección { …

}

Si queremos definir una sección cabecera, en cada vista la definiríamos del siguiente modo. @section cabecera { <h1>Ejemplo de sección</h1> }

@RENDERSECTION

Incluimos en nuestra plantilla secciones o bloques de código Razor / HTML que se ha definido en la

vista. Podemos indicar además si es obligatorio o no definirla.

@RenderSection("NombreSección ", required: false / true)

Por defecto toma el valor true, con lo que en caso de que no la incluyamos en nuestra vista, dará un

mensaje de error.

Sección no definida: "cabecera".

Descripción: Excepción no controlada al ejecutar la solicitud Web actual. Revise el seguimiento de la pila para obtener más

información acerca del error y dónde se originó en el código.

@RenderSection("cabecera", required:false)

ISSECTIONDEFINED

Por último para controlar si se ha definido la sección, disponemos de la función IsSectionDefined().

Siguiendo con el ejemplo de la cabecera podríamos comprobar si se ha definido para darle un

formato y sino le damos otro formato.

@if (IsSectionDefined("cabecera")) { <div id="title"> @RenderSection("cabecera") </div> } else { <div id="titledefalt"><h1 class="generico">Título genérico</h1></div> }

ETIQUETAS AVANZADAS

@()

En caso de que una variable, dentro del código, pueda provocar confusión, podemos usar

@(variable). Por ejemplo

<img src="images/"@model.foto.jpg" />



13

No podríamos afimar si está llamando a @model.foto y luego incorpora la extensión .jpg o que

interprete que .jpg es una propiedad de @model.foto.

Deberíamos utilizar

<img src="images/"@(model.foto).jpg" />

Para evitar este conflicto.

@:

Aunque ya lo vimos ayer, lo vuelvo a remarcar. Aquel texto HTML que no incluya etiquetas puede

provocar que se interprete como código Razor.

<span> @if(true){ La hora es: @DateTime.Now } else { Aquí no se debería acceder nunca } </span>

No sabe si es código HTML o código C#. Para definírselo anteponemos @: (si sólo es una línea) para

decirle que es HTML

<span> @if(true){ @:La hora es: @DateTime.Now } else { @:Aquí no se debería acceder nunca } </span>

Es equivalente a incluir el texto entre las etiquetas <text></text>

HTML.RAW

Escribe el contenido que le pasemos sin codificar (que es lo que hace por defecto ASP.NET MVC 3).

Puede que en ocasiones necesitemos que sea así (por ejemplo porque incluye etiquetas de formato),

aunque debemos tener mucho cuidado con el contendido para que no nos produzcan XSS Injection.

<h2>@Html.Raw(ViewBag.Message)</h2>

PARTIAL VIEWS

Como conocemos las vistas hasta ahora genera una página web en cada llamada. Con un layout por

defecto o personalizado, pasando por el código generado por la vista y terminando con secciones

opcionales o no.



14

Esto no lo hace muy complicado de mantener y sobre todo poco flexible. Por eso existen las vistas

parciales que permiten dividir la página en bloques más pequeños lo que las hace más fácil de

gestionar.

Puede ser muy útil en llamada AJAX porque el código generado es el que le indiquemos en la vista

parcial sin elementos como layout que se supone que se ha llamada anteriormente desde una vista.

Con un ejemplo lo vamos a ver muy claro.

Queremos hacer la suma de dos números es un método del controlador Home. Pasamos dos

parámetros y cambiamos return View(); por return PartialView();

public ActionResult Suma(int numero1, int numero2) { ViewBag.Suma = numero1 + numero2; return PartialView(); }

Ahora creamos la vista y la marcamos como parcial

Escribimos el resultado en la vista vacía (que no tiene ni model, ni layout)

@ViewBag.Suma

¿Cómo la llamamos? Lo normal es hacerlo como hasta ahora

http://servidor/home/suma?numero1=5&numero2=7

pero como es lógico el propósito no era éste. Nosotros queremos incluirlo dentro de otra vista y lo

vamos a hacer con AJAX, es decir se cargará una vista inicial y ante un evento modificaremos el

contenido de algún elemento de la vista inicial con el contenido de la vista parcial.

Incluimos el siguiente código en algún método de home

La suma de 5 y 7 es: <span id="operacion"></span>

http://servidor/home/suma?numero1=5&numero2=7



15

<script type="text/javascript"> $(function(){ $("#operacion").load("/home/Suma?numero1=5&numero2=7"); }); </script>

La primera línea pone un texto y prepara una etiqueta donde luego mostrar el resultado.

Las siguientes líneas son javascript y JQuery. Esta librería está muy integrada en Visual Studio con lo

que debemos aprovechar que la disponemos. Lo que hace es llamar a nuestro controlador con load y

poner el resultado en aquella etiqueta que tenga como id operacion ($(“#idetiqueta”)).

Visualmente vemos el resultado de la operación, pero internamente ha hecho una segunda llamada

para obtener el resultado de la suma y luego ha modificado el contenido de la etiqueta.

No es obligatorio llamarlo desde javascript y con AJAX, podemos llamarlo desde nuestras propias

vistas. El ejemplo de ayer que mostrábamos un listado de libros. Usamos el siguientes código

Listado de libros <ul> @foreach(var libro in (IEnumerable<MVC_3.Models.Libro>)ViewBag.Libros) { <li>@libro.Titulo (@libro.TipoLibro)</li> } </ul>

Si el formato de la ficha del libro fuera muy amplia, sería una buena solución convertirla en una vista

parcial y llamarla desde nuestra propia vista

Listado de libros (Vistas parciales) @foreach(var libroItem in (IEnumerable<MVC_3.Models.Libro>)ViewBag.Libros) { @RenderPage("~/Views/Demo/Formato.cshtml", new {libro = libroItem}); }

Para recoger los parámetros tenemos que usar el objeto Page y como propiedad lo que hayamos

pasado, en este caso libro y trabaríamos con las propiedades de éste como si fuera el modelo.

@{ var Model = Page.libro; } <div> <strong>Título: </strong> @Model.Titulo </div> <div style="margin-bottom: 20px;"> <strong>ISBN: </strong> @Model.Isbn </div>

En este segundo caso no se hace una llamada por cada libro, ya que se hace internamente antes de

devolver la página completa.

HELPERS (BÁSICO)

Los Helpers podríamos entenderlo como una forma de facilitar de reutilizar código que escribimos en

muchas ocasiones.



16

MVC nos ofrece de dos tipos:

HTMLHelpers orientados a escribir código HTML. La mayoría de métodos que nos ofrece son

para trabajar con formularios, simplificando y unificando enormemente este proceso.

URLHelpers orientada a simplificar el trabajo con direcciones y conversiones de caracteres.

En el día de hoy nos centraremos en los segundos porque son muy pocos y los necesitamos para

poder crear nuestro primer layout / plantilla.

URLHELPER

Para poder usar este Helper dentro del motor Razor antepondremos @Url al método que queramos

llamar. Por ejemplo si queremos poner la ruta de nuestro fichero css, en el layout por defecto hace

uso del método Content de URLHelper.

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

La integración es muy sencilla porque no debemos hacer ninguna referencia externa y dispone de

intellisense lo que facilita su escritura.

Los 4 métodos que lo forman son

Action(s:action, s:controller, …)

Genera la dirección completa de la llamada a un método / acción de un controlador.

Por ejemplo si queremos crear un enlace a Acerca de, podríamos usar el siguiente código HTML

<a href="@Url.Action("About", "Home")">Acerca de</a>

Si queremos hacer una llamada a un método Buscar al que le pasemos el término de búsqueda,

incluiríamos un tercer campo, con los parámetros que queramos personalizar.

<a href="@Url.Action("Buscar", "Home", new { busqueda = "Servicio de Informática" })">Buscar por "Servicio de Informática"</a>

Si el método permite la recepción del parámetro “busqueda”, entonces lo podríamos usar.

public ActionResult Buscar(string busqueda) { ViewBag.Search = busqueda; return View(); }

Content(s:path)

Convierte una dirección virtual / relativa en su correspondiente dirección absoluta de la aplicación. Es

muy útil cuando hacemos referencia a ficheros como hojas de estilo o javascript

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



17

Encode(s:url)

Codifica los caracteres especiales de una URL por sus equivalentes caracteres estándar.

Se usa para evitar problemas con ciertos navegadores que no interpretan los caracteres especiales.

En el ejemplo anterior el envío de “Servicio de Informática” sería uno de los casos que nos podrían

dar errores por os espacios y acento.

<a href="@Url.Action("Buscar", "Home", new { busqueda = Url.Encode("Servicio de Informática") })">Buscar por "Servicio de Informática"</a>

La dirección que nos genera es

http://servidor/Home/Buscar?busqueda=Servicio%2Bde%2BInform%25c3%25a1tica

RouteUrl(s:route)

Muy parecido al primero pero todo en uno, es decir pasamos los parámetros que queramos en un

único parámetro, de la siguiente manera new { Controller = “…”, Action = “…”, …}

La misma llamada Acerca de pero con RouteUrl sería.

<a href="@Url.RouteUrl(new {Controller = "Home", Action = "About"})">Acerca de</a>

Si queremos pasar también el campo de búsqueda (o el id)

<a href="@Url.RouteUrl(new {Controller = "Home", Action = "Buscar", busqueda = "Servicio de Informática" })">Buscar por "Servicio de Informática"</a>

Mañana nos centraremos en los HTMLHelpers y veremos como crear los nuestros propios.

COMPRENDIENDO LAS VISTAS POR DEFECTO

Ahora que ya tenemos más conocimientos de Razor vamos a analizar las 5 vistas que nos ha

generado por defecto para las tablas CSI_LIBRO y CSI_TIPOLIBRO.

Create.cshtml

Delete.cshtml

Details.cshtml

Edit.cshtml

Index.cshtml

CONVERTIR UNA PÁGINA WEB A PLANTILLA

EJEMPLO DE PREGUNTAS Y RESPUESTAS (FAQS)

Vamos a usar la página Dynamic FAQ Section w/ jQuery, YQL & Google Docs | Tutorialzine

Demo (http://tutorialzine.com/2010/08/dynamic-faq-jquery-yql-google-docs/) como plantilla de

trabajo para nuestro ejemplo.

http://servidor/Home/Buscar?busqueda=Servicio%2Bde%2BInform%25c3%25a1tica

http://tutorialzine.com/2010/08/dynamic-faq-jquery-yql-google-docs/



18

La diferencia está en la forma en que obtiene los datos. En esta página usa Google Docs para obtener

el contenido. Nosotros vamos a crear una tabla con preguntas y respuestas y será lo que

mostraremos y gestionaremos.

La demo la forman 3 ficheros, la página web, una hoja de estilo y un documento javascript. Los 3

están en una misma carpeta raíz. Para seguir el formato que sugiere ASP.NET, debería quedar:

Index.html -> /Views/Shared/_layoutfaq.cshtml

script.js -> /Scripts/ script.js

styles.css -> /Content/ styles.css

img/* -> /Content/img/*

Ahora debemos modificar _layoutfaq.cshtml para que las referencias sean correctas.

Usaremos uno de los helpers que acabamos de ver Url.Content para hacer referencia a las hojas de

estilo y ficheros javascript.

Modificamos el método Index de HomeController para que muestre algunas preguntas y respuestas.

Realizarlo con secciones y con un modelo personalizado.

EJEMPLO PRÁCTICO

DESARROLLO COMPLETO CON EF DE UNA APLICACIÓN DE PREGUNTAS Y RESPUESTAS

Ahora vamos a desarrollarlo con tablas de Oracle.

Para evitar conflictos a la hora de crear tablas cada alumno tendrá un número que pospondrá al

nombre de la tabla. La ordenación la haremos basándonos en el listado de alumnos que se dispone

de Selección y Formación. En mi caso la tabla se llama FAQ_00.

Crear la tabla e incluirla en el proyecto MVC. Crear el controlador para su gestión y modificar el

método Index de HomeController para que muestre los datos de la tabla.



19

SELECCIÓN DE PROYECTO

El objetivo de este curso es que sea lo más práctico posible. Por eso durante cada una de las sesiones

se dedicará un tiempo para trabajar en un proyecto al que cada día se incorporará lo que se vea

durante la sesión.

Se van a presentar 3 proyectos. El desarrollo completo de un proyecto por parte de una persona es

bastante complicado en 6-8 horas que se dejará para su desarrollo, por eso se formarán 3 grupos al

que se le asignará a cada persona una tarea.

PRESENTACIÓN DE PROYECTOS

Catalogo de recursos o enlaces

Agenda Universitaria

Gestión de peticiones / incidencias

Autocolega

Se han seleccionado éstos porque son proyectos muy utilizados actualmente en la UA y está

desarrollados con una programación muy desfasada y difícil de mantener / actualizar.

En todos los proyectos se analizará la posibilidad de mantener la información actual, respetando la

estructura o creando una nueva con posibilidades de migrar los datos (2 de ellas están desarrolladas

en SQL Server y sería un buen momento para traspasarlas a Oracle).

En caso de que alguien proponga un proyecto nuevo o con posibilidades de desarrollar durante el

curso, se incorporará sin ningún problema.

CREACIÓN DE 4/8 GRUPOS

Dependiendo de las personas que asistan a clase se puede ampliar/reducir el número de grupos.

La idea es que al menos cada grupo lo formen 2/6 personas para poder adelantar en todas las tareas,

diseño, gestión y base de datos.

REPARTIR TAREAS

Las tareas se pueden corresponder con cada uno de los módulos del MVC, es decir uno se puede

encargar del modelado, otro del aspecto visual y otro de los controladores. Cada día antes de

empezar a trabajar, el grupo analizará lo que van a desarrollar porque es posible que uno

dependencias obligue a cambiar el orden de realizar determinadas tareas.

Al final de cada clase dedicaremos 5 minutos a revisar los problemas más generales que hayan

surgido. Si la cosa se complica, por correo se me envían las sugerencias / incidencias y las analizo

para la siguiente clase.

El último día cada grupo presentará su proyecto al resto de la clase (no será más de 10 minutos por

proyecto). Ya explicaré más adelante los puntos a presentar.

ASP.NET MVC 3 y 4 - ua€¦ · ENTITY FRAMEWORK GESTIÓN DE TABLAS CON ENTITY FRAMEWORK Vamos a...

Documents

Transcript of ASP.NET MVC 3 y 4 - ua€¦ · ENTITY FRAMEWORK GESTIÓN DE TABLAS CON ENTITY FRAMEWORK Vamos a...