108
ACTIVE SERVER PAGES .NET 4.0 MODELO-VISTA-CONTROLADOR MVC 2 Y 3 RAZOR ENGINE Nombre del Instructor

ASP.NET MVC (2011)

Embed Size (px)

DESCRIPTION

In this presentation a complete ASP.NET MVC introductory course is developed. Every key aspect of MVC is covered and some examples are developed.

Citation preview

Page 1: ASP.NET MVC (2011)

ACTIVE SERVER PAGES .NET 4.0

MODELO-VISTA-CONTROLADORMVC 2 Y 3

RAZOR ENGINE

Nombre del Instructor

Page 2: ASP.NET MVC (2011)

¿Qué es un patrón de arquitectura de software? Es una norma de diseño establecida

en el campo de la Ingeniería de Software.

Es un concepto que establece ciertos elementos importantes de una arquitectura de software No es la arquitectura en sí misma

Ejemplos: ETL (servicios de integración RDBMS) / DataWarehouse/ Modelo Entidad-Relación, etc.

Page 3: ASP.NET MVC (2011)

¿Qué es el patrón de arquitectura MVC? MODELO-VISTA-CONTROLADOR Es un patrón de arquitectura de

software. VISTA: representación visual de la

información del modelo. MODELO: representa uno o más objetos

con un estado determinado. CONTROLADOR: es lo que puede

alterar el estado del modelo.

Page 4: ASP.NET MVC (2011)

MVC – Perspectiva 1

Browser

1. Petición

HTTP

CCONTROLADOR

2. Parámetros de ejecución

M MODELO

3. Colección datos

resultado

V

VISTA

3.

Cole

cció

n

dato

s re

sult

ad

o4.C

on

tenid

o

de in

terfa

z usu

ario

5. Contenido HTTP

CLIENTE SERVIDORLos componentes M, V y C están del lado servidor.

Page 5: ASP.NET MVC (2011)

MODELO

2. Parámetros de ejecución

M MODELO

3. Colección datos

resultado

Los objeto de modelo•Implementan la lógica del dominio de la aplicación.•Suelen leer y persistir estados en una RDBMS.•En sistemas grandes pueden tener una capa de acceso a datos (DAL) separada.

Page 6: ASP.NET MVC (2011)

VISTA

V

VISTA

3.

Cole

cció

n

dato

s re

sult

ad

o4.C

on

tenid

o

de in

terfa

z usu

ario

“Arma” la interfaz de usuario.• Los datos que muestra son estados del objeto que están gestionando•Utiliza controles comunes de la GUI en cuestión (cajas de texto, dropdownlists, checkboxes)

Page 7: ASP.NET MVC (2011)

VISTA

V

VISTA

3.

Cole

cció

n

dato

s re

sult

ad

o4.C

on

tenid

o

de in

terfa

z usu

ario

La GUI se construye con elementos propios de la tecnología que se utilice Cliente liviano (por lo general, HTML o

formularios XML) Cliente pesado (dependerá de la

plataforma, etc.)HTML/XMLWinForms .NETFormularios JavaVisual FoxProVisual BasicDelphiPowerBuilder

Page 8: ASP.NET MVC (2011)

CONTROLADOR1.

Petición HTTP

CCONTROLADOR

2. Parámetros de ejecución

3. Colección datos

resultado5. Contenido

HTTP

Es el componente que •Maneja la interacción con el usuario y en función de eso..•..envía mensajes al modelo para modificar su estado (es decir, cambia el valor de sus miembros, etc.)•Selecciona en último término el tipo de vista que exhibirá al cliente en la GUI.

Page 9: ASP.NET MVC (2011)

Acople fuerte Dos clases están fuertemente acopladas

cuando Una clase dependiente A tiene un fuerte

“conocimiento”, o hace un uso intensivo, de las definiciones existentes en otra clase B

A implementa un puntero directo a una clase concreta que aporta el conocimiento necesario

La dependencia sobre B no se puede cambiar sin reprogramar la clase A

AB

Inicio()Saldo()Nuevo()Fin()

Page 10: ASP.NET MVC (2011)

Acople débil Dos clases están débilmente acopladas

cuando Una clase dependiente A no tiene conocimiento (o

bien hace poco uso) de las definici0nes existentes en otra clase B

A implementa un puntero sólo a una interfaz, la cual puede estar implementada por varias clases concretas que aportan el conocimiento necesario

La dependencia de A se limita sólo al “contrato” de la interfaz que expone B.

AinterfazB

Inicio()Saldo()Nuevo()Fin()

Empleado

Inicio()Saldo()Nuevo()Fin()

Director

Inicio()Saldo()Nuevo()Fin()

Page 11: ASP.NET MVC (2011)

MVC es acople débil

Existe acople débil entre los tres componentes MVC

Permite el enfoque profundo en cada uno de estos elementos, de a uno por vez

Facilita el testing automático En ASP.NET WebForms existe una sola clase

para mostrar salida y manejar la entrada de usuario.

Hay que instanciar toda la cadena de objetos para probarla.

Con MVC las pruebas se remiten a un solo componente aislado de la presentación

Page 13: ASP.NET MVC (2011)

Motor de vista “Razor”

Todo ASP.NET MVC tiene incorporado el concepto de “motor de vista” Genera las vistas de acuerdo al tipo de

cliente final (smart client, thin client, etc.)

Si son páginas HTML finales, el motor por defecto es ASP.NET con master pages

Con MVC 3 se agrega un nuevo motor de representación (rendering) de páginas: RAZOR

Page 14: ASP.NET MVC (2011)

Proyecto ASP.NET MVC 3

Usar marcación de HTML5A través de Modernizr 1.7

Page 15: ASP.NET MVC (2011)

¿Y qué es Modernizr?

Es una librería para detectar el uso de HTML5 + CSS3 y su correspondiente soporte (o no) en el browser.

Si el browser es compatible, se habilitan los nuevos estilos y marcaciones

Page 16: ASP.NET MVC (2011)

Objetivos de Razor Engine Compacto: minimiza la cantidad de tipeo en un

archivo Fácil: es sencillo de aprender y permite ser

productivo con un mínimo de conceptos No es un nuevo lenguaje: se utilizar VB/CS

dentro del HTML conocido, para producir un nuevo tipo de construcción HTML

Cualquier editor de texto (incluso notepad.exe)

Soporte completo de Intellisense en VS 2010 Verificable por unidades: no se exige el uso

de un controlador ni de un servidor web, soporta vistas de prueba unitarias.

Page 17: ASP.NET MVC (2011)

EJERCICIO

Page 18: ASP.NET MVC (2011)

1. Crear la aplicación en VS2010 Hacer clic en New/ Project Seleccionar el tipo de proyecto

.NET 4.0 Framework Tipo ASP.NET MVC 3 Web Application Nombre: “MVC3RunWebCamp” Localización: “C:\ MVC3RunWebCamp” ACEPTAR

Page 19: ASP.NET MVC (2011)

1.1 Proyecto de test

VS2010 crea dos proyectos en MVC 1. El proyecto MVC3RunWebCamp en sí mismo 2. Un proyecto para probar la aplicación,

denominado XXX.test, donde XXX es el nombre que dimos a nuestro proyecto original

Page 20: ASP.NET MVC (2011)

2. Configurar el puerto TCP de escucha en 50000 Hacer clic con botón derecho sobre la raíz del proyecto

en el explorador de soluciones. Seleccionar la ficha Web. Seleccionar Puerto específico, escribir 50000 y guardar

todo.

Page 21: ASP.NET MVC (2011)

3. Estructura de carpetas

A continuación comentaremos algo acerca de las carpetas creadas en estos proyectos

Proyecto MVC3.. de ASP.NET 4.0

Proyecto de testing (VS2010 Ultimate o Test)

Page 22: ASP.NET MVC (2011)

3.1 App_Data

Es la carpeta de almacenamiento físico de datos.

Su papel es similar al de la misma carpeta en una aplicación ASP.NET regular

Page 23: ASP.NET MVC (2011)

3.2 Content

Esta carpeta se recomienda para contenido estático Hojas de estilo en

cascada Imágenes Temas Archivos de medios,

etc.

Page 24: ASP.NET MVC (2011)

3.3 Controllers Contiene la definición de

clases de los controladores Manejo de interacción con

el usuario Manipulación del modelo Elección última de la

interfaz de usuario Por convención del

framework, su nombre debe terminar con la palabra Controller

Page 25: ASP.NET MVC (2011)

3.4 Models

Contiene clases que representan el modelo de aplicación

Código define los objetos define la interacción con

el almacén de datos Por defecto, el bibliotecas

de clase separadas (se pueden mover a otra carpeta luego)

Page 26: ASP.NET MVC (2011)

3.5 Scripts

De existir, aquí se colocan los programas JavaScript Algunos módulos son de

uso propio de Intellisense (ver donde dice “vsdoc”)

Otros son para dar soporte a AJAX

Otros son para validación de datos, funciones que se insertan en las vistas ASPX

Page 27: ASP.NET MVC (2011)

3.6 Views Contiene los componentes que

muestran la interfaz de usuario según engine: .ascx, .aspx, .master para

ASP.NET convencional Vbhtml / Cshtml para RAZOR archivos relacionados con la

producción de HTML final

Contiene una vista por cada controlador. Para un controlador ClienteController existirá una vista Cliente.Cuando ASP.NET MVC busca una vista, ubica un archivo .aspx con el nombre especificado en \Views\nombre_controlador\nombre_acción.aspx

Page 28: ASP.NET MVC (2011)

3.6 Views Por defecto, ASP.NET MVC

crea tres carpetas con vistas: Account: vista de la cuenta,

gestionada por AccountController

Home: vista de página principal, gestionada por HomeController

Shared: es la única carpeta que puede estar asociada a varios controladores al mismo tiempo

Page 29: ASP.NET MVC (2011)

4. Enrutamiento MVC MVC “mapea” URLs a las clases que

son los controladores Las URLs entrantes no se refieren a

recursos físicos en el servidor ASP.NET 4.0 tiene esta nueva

característica denominada “enrutamiento”

Se crea un conjunto de reglas de enrutamiento en el archivo Global.asax

El enrutamiento también está disponible para WebForms 4.0 regulares de ASP.NET

Page 30: ASP.NET MVC (2011)

WEB FORMS 4 - Enrutamiento Las URL como ésta no son amigables para

los motores de búsqueda:http://www.mysite.com/products.aspx?category=software

En cambio, éstas si lo son:http://www.mysite.com/products/software

El enrutamiento en ASP.NET 4.0 permite que la aplicación acepte requerimientos que no se mapean a archivos físicos

Se usa una URL “semántica” que tiene sentido para el usuario y es amigable para los optimizadores de motores de búsqueda.

Page 31: ASP.NET MVC (2011)

WEB FORMS 4 - Enrutamiento

HTTP REQUESTProducts/Bikes

Enrutamiento ASP.NET

Ruta:Product/{name} -> Product.aspx

Página WebForm

Nombre de archivoProduct.aspx

Valores de la ruta:Name = “Bikes”

RESPUESTA

Page 32: ASP.NET MVC (2011)

Shared Sub RegisterRoutes(ByVal routes As RouteCollection)

routes.IgnoreRoute("{resource}.axd/{*pathInfo}")

' MapRoute toma los siguientes parámetros, en orden:

' (1) nombre de la ruta

' (2) URL con parámetros

' (3) Parámetros por defecto

routes.MapRoute( _

"Default", _

"{controller}/{action}/{id}", _

New With {.controller = "Home", .action = "Index", .id = UrlParameter.Optional} _

)

End Sub

4. Enrutamiento en Global.asax

Page 33: ASP.NET MVC (2011)

4. Enrutamiento MapPageRoute con ASP.NET WebForms 4.0

Page 34: ASP.NET MVC (2011)

5. HomeController

http://localhost/index llamará a la funcion Index() del tipo ActionResult

http://localhost/about llamará a la función About() del tipo ActionResult

<HandleError()> _Public Class HomeController Inherits System.Web.Mvc.Controller

Function Index() As ActionResult ViewData("Message") = "Welcome to ASP.NET MVC!"

Return View() End Function

Function About() As ActionResult Return View() End FunctionEnd Class

Page 35: ASP.NET MVC (2011)

5. HomeController

Los métodos mapeados deben Ser públicos No deben tener NonActionAtribute Siempre devolver un objeto del tipo ActionResult

<HandleError()> _Public Class HomeController Inherits System.Web.Mvc.Controller

Function Index() As ActionResult ViewData("Message") = "Welcome to ASP.NET MVC!"

Return View() End Function

Function About() As ActionResult Return View() End FunctionEnd Class

Page 36: ASP.NET MVC (2011)

5.1 Distintos tipos de ActionResult

Clase Descripción

ViewResult Salida HTML

EmptyResult Salida vacía, sin salida

RedirectResult Redirección a otra URL

JSONResult Resultado del tipo JavaScript Object Notation

JavaScriptResult

Un script de JavaScript

ContentResult Un resultado que contiene texto

FileContentResult

Un archivo descargable con contenido binario

FilePathResult Un archivo descargable con un camino (path)

FileStreamResult

Un archivo descargable con un stream de datos

ActionResult Lo que retorna el controlador luego de su ejecución•Armado de una vista•Redirección a otra acción•Redirección a otra página

Page 37: ASP.NET MVC (2011)

5.2 VIEW() Normalmente, no se devuelve directamente

ViewResult(), sino el método View() de la clase de base del Controlador

Es decir, no retornamos un objeto ActionResult directamente Más bien llamamos a los métodos de la clase de

base del controlador Para pasar datos a la vista se utiliza la

propiedad ViewData de la clase ControllerBase

Page 38: ASP.NET MVC (2011)

5.2 VIEW()

Viewdata diccionario ViewDataDictionary con objetos

En HomeController Los métodos ajustan los valores en el diccionario ViewData Y devuelven la vista asociada a la acción llamando a View()

<HandleError()> _Public Class HomeController Inherits System.Web.Mvc.Controller

Function Index() As ActionResult ViewData("Message") = "Welcome to ASP.NET MVC!"

Return View() End Function

Function About() As ActionResult Return View() End FunctionEnd Class

Page 39: ASP.NET MVC (2011)

5.3 Métodos de clase de base del controlador

Métodos Retorna una instancia de:

View ViewResult

Redirect RedirectResult

RedirectToAction

RedirectToRouteResult, es decir, redirecciona a la acción especificada

RedirectToRoute RedirectToRouteResult, es decir, redirecciona a la ruta especificada.

JSON JsonResult

JavaScriptResult

JavaScriptResult

Content ContentResult

File Dependiendo de los parámetros pasados al método retorna:•FileContentResult•FilePathResult•FileStreamResult

Page 40: ASP.NET MVC (2011)

6. ViewData Es la propiedad de vista específica

de MVC Para producir una salida visible:

1. Se debe interactuar con el diccionario existente en ViewData

ViewData(“Message”)=“Bienvenidos..”

2. Se debe devolver el resultado de View()

Function Index() As ActionResult ViewData("Message") = “Bienvenidos al MUG" Return View()End Function

Page 41: ASP.NET MVC (2011)

7. Examinando las vistas Una carpeta por

controlador Account Home

Dentro de cada carpeta Archivos aspx,

ascx O bien vbHtml, etc.

En Shared Vistas en uso por

más de un controlador

Page 42: ASP.NET MVC (2011)

7.1 Vistas ASPX

<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %><asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server"> About Us</asp:Content><asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server"> <h2>About</h2> <p> Put content here. </p></asp:Content>

Son archivos regulares de ASP.NETPor ejemplo, About.aspxAquí, es una vista que todavía no tiene contenido dinámico definido.

Page 43: ASP.NET MVC (2011)

7.1 Vistas RAZOR

@Code ViewData("Title") = "About Us"End Code

<h2>About</h2><p> Put content here.</p>

Tienen la extensión VBHTML ó CSHTML

Page 44: ASP.NET MVC (2011)

7.2 Vistas

Las vistas, por defecto, no contienen código ejecutable

El controlador pasa la información a ser exhibida a través del diccionario ViewData.

Page 45: ASP.NET MVC (2011)

7.3 Vistas ASPX

<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server"> Home Page</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server"> <h2><%: ViewData("Message") %></h2> <p>To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.</p></asp:Content>

Index.aspx si tiene contenido dinámicoNótese como ViewData(“Message”) realiza la exhibición de datos

Page 46: ASP.NET MVC (2011)

7.3 Vistas Razor

@Code ViewData("Title") = "Home Page"End Code

<h2>@ViewData("Message")</h2><p> To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.</p>

Index.aspx si tiene contenido dinámicoNótese como ViewData(“Message”) realiza la exhibición de datos

???

Page 47: ASP.NET MVC (2011)

7.3.1 ASPX vs. RAZOR<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server"> Home Page</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server"> <h2><%: ViewData("Message") %></h2> <p>To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.</p></asp:Content>

@Code ViewData("Title") = "Home Page"End Code

<h2>@ViewData("Message")</h2><p> To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.</p>

RAZOR VBHTML

ASP.NET ASPX

Page 48: ASP.NET MVC (2011)

8. Ruta por defecto http://localhost:50000 se intercepta

por el mecanismo de intercepción y enrutamiento de ASP.NET 4.0 La URL no especifica ningún controlador,

luego ASP.NET MVC: instancia por defecto HomeController Invoca a una acción por defecto Index Todo esto definido en Global.asax

routes.MapRoute( _ "Default", _ "{controller}/{action}/{id}", _ New With {.controller = "Home", _ .action = "Index", _ .id = UrlParameter.Optional} )

Page 49: ASP.NET MVC (2011)

9. Agregar un Entity Data Model Para manejar los datos de la base de

datos, creamos un Entity Data Model de ADO.NET Entity Framework 4.0 Utilizaremos la base de datos

AdventureWorksLT Hacer clic con botón derecho sobre

la carpeta Models. Luego Agregar (add), nuevo ítem.

Seleccionar ADO.NET Entity Data Model.

Dar nombre al modelo: AW1.edmx Se abre un asistente.

Page 50: ASP.NET MVC (2011)

9.1 Elegir contenido del modelo Seleccionar “Generar desde base de

datos” y hacer clic en Siguiente Creamos la conexión a

AdventureWorksLT, una instancia simplificada de la base de datos Provea el nombre del servidor SQL (localhost) Indique nombre de usuario y contraseña para

SQL Server, tipo de autenticación por SQL Server

Nombre de la base de datos AdventureWorksLT

Clic en Aceptar para crear la conexión

Page 51: ASP.NET MVC (2011)

9.1.1 Se puede crear una conexión a un MDF El archivo MDF (master data file) es el

principal de SQL Server, donde aloja los espacios de tabla, catálogo y objetos grandes.

Este asistente permite también crear un nuevo string de conexión y especificar la locación de este archivo MDF

En este ejercicio utilizaremos AdventureWorksLT (simplificada) Recuerde de crear una conexión a dicha

bases de datos primero

Page 52: ASP.NET MVC (2011)

9.2 Seleccionar tablas Seleccione las

siguientes tablas Address Customer CustomerAddress

Con ellas formaremos la entidad “Domicilio” del cliente.

Clic en Finalizar

Page 53: ASP.NET MVC (2011)

9.3 Verificar AW1.edmx VS2010 crea el modelo AW1.edmx

en la carpeta Models. Verificar que contenga los vínculos,

que éstos sean correctos, etc.

Page 54: ASP.NET MVC (2011)

9.4 Implementar el repositorio Haga clic con botón derecho sobre el

proyecto MVC3RunWebCamp Cree un nuevo ítem de código Denomínelo AdventureWorksRepository.vb

El repositorio proporciona métodos para acceder a los datos subyacentes, a través de ADO.NET Entity Framework

Damos el código necesario paso a paso

Page 55: ASP.NET MVC (2011)

Public Class AdventureWorksRepository

Private context As New AdventureWorksLTEntities()

‘colocar el codigo aquí

End Class

9.4.1 Codificar la clase de repositorio

El primer miembro a definir será el contexto AdventureWorksLTEntities quedó definido

al crear el modelo AW1, en su archivo .designer.vb

Page 56: ASP.NET MVC (2011)

Public Function GetCustomers(ByVal page As Integer, ByVal size As Integer) As IEnumerable(Of Customer)

Return context.Customer.OrderBy(Function(c) _

c.CustomerID).Skip(page * size).Take(size)

End Function

Public Function GetCustomerById(ByVal customerId As Integer) As Customer

Return context.Customer.Include( _

"CustomerAddress.Address").Where(Function(c) _

c.CustomerID = customerId).First()

End Function

9.4.2 Recuperación de entidad Customer

Page 57: ASP.NET MVC (2011)

Public Sub AddAddress(ByVal address As Address, ByVal customerId As Integer)

address.rowguid = Guid.NewGuid()

address.ModifiedDate = DateTime.Now

context.AddObject("Address", address)

Dim customerAddress As New CustomerAddress()

customerAddress.Address = address

customerAddress.Customer = GetCustomerById(customerId)

customerAddress.rowguid = Guid.NewGuid()

customerAddress.ModifiedDate = DateTime.Today

context.AddObject("CustomerAddress", customerAddress)

context.SaveChanges()

End Sub

9.4.3 Adición de domicilio a un cliente existente

Page 58: ASP.NET MVC (2011)

Public Sub AddAddress(ByVal address As Address, ByVal customerId As Integer)

address.rowguid = Guid.NewGuid()

address.ModifiedDate = DateTime.Now

context.AddObject("Address", address)

Dim customerAddress As New CustomerAddress()

customerAddress.Address = address

customerAddress.Customer = GetCustomerById(customerId)

customerAddress.rowguid = Guid.NewGuid()

customerAddress.ModifiedDate = DateTime.Today

context.AddObject("CustomerAddress", customerAddress)

context.SaveChanges()

End Sub

9.4.3 Adición de domicilio a un cliente existente

Page 59: ASP.NET MVC (2011)

Public Sub UpdateAddress()

context.SaveChanges()

End Sub

9.4.4 Grabar la dirección

SaveChanges quedó también definido en el modelo de entidad AW1.edmx

Page 60: ASP.NET MVC (2011)

Public Sub DeleteAddress(ByVal address As Address, _

ByVal customerId As Integer)

Dim customerAddress As CustomerAddress = _

GetCustomerAddressById(address.AddressID, _

customerId)

context.DeleteObject(address)

context.DeleteObject(customerAddress)

context.SaveChanges()

End Sub

9.4.5 Eliminar la dirección

Page 61: ASP.NET MVC (2011)

Public Function GetAddressById(ByVal addressId As Integer) As Address

Return context.Address.Where(Function(a) _

a.AddressID = addressId).First()

End Function

9.4.6 Recuperar la dirección

Public Function GetCustomerAddressById( _ ByVal addressId As Integer, _ ByVal customerId As Integer) As CustomerAddress

Return context.CustomerAddress.Where(Function(a) _ a.AddressID = addressId _ AndAlso a.CustomerID = customerId).First()

End Function

Page 62: ASP.NET MVC (2011)

10. Implementar CustomerViewData (MVC view) Una vez creada la entidad y su

repositorio, se deben crear las vistas (views) de MVC Cree una carpeta ViewData debajo del

nodo principal del proyecto MVC3RunWebCamp.

Dentro de ViewData, cree una nueva clase llamada CustomerViewData

Codifíquela así:Public Class CustomerViewData Public Property Customers As IEnumerable(Of Customer) Public Property PreviousPage As Integer Public Property NextPage As Integer End Class

Page 63: ASP.NET MVC (2011)

11. Implementar AddressViewData (MVC view) Dentro de la carpeta ViewData, cree otra

nueva clase llamada AddressViewData Codifíquela así:

Public Class AddressViewData Public Property Address As AddressPublic Property CustomerId As Integer

End Class

Page 64: ASP.NET MVC (2011)

12. Implementar CustomerController

Tendrá dos métodos de acción: Index view: vista en forma de lista de

los clientes Info view: vista individual de la

información de un cliente Clic derecho sobre la carpeta Controllers Add Seleccionar el tipo de ítem Controller Dar nombre CustomerController Aceptar

Page 65: ASP.NET MVC (2011)

12.1 CustomerController

El código por defecto que genera VS2010 es el siguiente:

Namespace MVCApp1 Public Class CustomerController Inherits System.Web.Mvc.Controller

' ' GET: /Customer

Function Index() As ActionResult Return View() End Function

End ClassEnd Namespace

Page 66: ASP.NET MVC (2011)

12.2 CustomerController

Instanciar un repositorio

Namespace MVCApp1 Public Class CustomerController Inherits System.Web.Mvc.Controller

Private repository As New AdventureWorksRepository()

' ' GET: /Customer

Function Index() As ActionResult Return View() End Function

End ClassEnd Namespace

Page 67: ASP.NET MVC (2011)

12.3 CustomerController – Index()

Crear el método de acción para manejar la vista CustomerControllerIndex.

Sobreescribir el método Index por defecto, con el siguiente código

Public Function Index(ByVal page As Nullable(Of Integer)) _

As ActionResult Dim viewData = New CustomerViewData() Dim currentPage As Integer = If(page, 0) viewData.Customers = _ Me.repository.GetCustomers(currentPage, 10) viewData.NextPage = currentPage + 1 viewData.PreviousPage = _

If((currentPage <= 0), 0, currentPage - 1) Return View(viewData) End Function

Page 68: ASP.NET MVC (2011)

12.4 CustomerController – Info()

Crear el método de acción para manejar la vista CustomerControllerInfo.

Agregar el siguiente método:

Public Function Info(ByVal id As Integer) As ActionResult Dim customer = Me.repository.GetCustomerById(id) Return View(customer)End Function

Page 69: ASP.NET MVC (2011)

12.5 AddressController Gestiona dos vistas

Vista Edit: modificar el domicilio de un cliente

Vista New: agregar un nuevo domicilio a un cliente

Agregar un controlador a Controllers Denominado AddressController Marcar “agregar métodos de acción para

los escenarios crear, actualizar, eliminar y detalles”

Page 70: ASP.NET MVC (2011)

12.6 AddressController Instanciar un repositorio para

servicio de acceso a datos.

Public Class AddressController Inherits System.Web.Mvc.Controller Private repository As AdventureWorksRepository = _ New AdventureWorksRepository() ... End Class

Page 71: ASP.NET MVC (2011)

12.7 AddressController- Eliminar Index() y Details() por defecto Eliminar las siguientes líneas de los métodos por defecto:

' GET: /Address Function Index() As ActionResult Return View() End Function‘' GET: /Address/Details/5 Function Details(ByVal id As Integer) As _ ActionResult Return View() End Function

Page 72: ASP.NET MVC (2011)

12.8 AddressController - Crear el manejador de la vista Create. Reemplace el código de Create() de la

operación GET: Address/Create actual por el siguiente:

Function Create(ByVal customerId As Integer) As _ ActionResult Dim addressViewData = New AddressViewData With {

.CustomerId = customerId } Return View(addressViewData)End Function

Page 73: ASP.NET MVC (2011)

12.9 AddressController - Crear el manejador de envío de formularios Reemplace el código de Create() de la

operación POST: Address/Create actual por el siguiente:

<AcceptVerbs(HttpVerbs.Post)> _ Function Create(ByVal customerId As Integer, _ ByVal collection As FormCollection) As ActionResult Try Dim addressViewData = New AddressViewData() UpdateModel(addressViewData) Me.repository.AddAddress(addressViewData.Address, _ customerId) Return RedirectToAction("Info", "Customer", _ New With {.id = customerId}) Catch Return View() End TryEnd Function

Page 74: ASP.NET MVC (2011)

12.10 Crear el manejador de presentación de vista Edit Reemplace el código de Edit de la operación POST actual por el siguiente:

<AcceptVerbs(HttpVerbs.Post)> _Public Function Edit(ByVal addressId As Integer, _ ByVal customerId As Integer, _ ByVal collection As FormCollection) As _ ActionResult Try Dim addressViewData As New AddressViewData() addressViewData.Address = _ Me.repository.GetAddressById(addressId) UpdateModel(addressViewData) Me.repository.UpdateAddress() Return RedirectToAction("Info", "Customer", _ New With {.id = customerId}) Catch Return View() End TryEnd Function

Page 75: ASP.NET MVC (2011)

12.10.1 AddressControllerQué hace la vista Edit

Recupera (a través del repositorio) la entidad Address que corresponde al parámetro AddressID recibido

Actualiza la entidad Address usando el formulario enviado por el browser a través del método UpdateModel

Actualiza la base de datos utilizando el repositorio Regresa a la vista de información de cliente (vista Info)

a través del método RedirectToAction

addressViewData.Address = _ Me.repository.GetAddressById(addressId) UpdateModel(addressViewData) Me.repository.UpdateAddress() Return RedirectToAction("Info", "Customer", _ New With {.id = customerId})

Page 76: ASP.NET MVC (2011)

12.11 Implementar la eliminación de un domicilio Agregar el siguiente método Delete

a la clase AddressController:

Public Function Delete(ByVal addressId As Integer, _ByVal customerId As Integer) As ActionResult

Dim address = Me.repository.GetAddressById(addressId) Me.repository.DeleteAddress(address, customerId) Return RedirectToAction("Info", _ "Customer", _ New With {.id = customerId}) End Function

Page 77: ASP.NET MVC (2011)

12.12 Crear la vista Index de CustomerController1. Abrir el código del método Index

en CustomerController2. Clic con botón derecho3. Seleccionar “Add View”

Page 78: ASP.NET MVC (2011)

12.12.1 Cuadro de diálogo de crear vista Index.aspx

Configurar como se muestra en el cuadro de diálogo

Pulsar Add SE CREA

INDEX.vbhtml

Page 79: ASP.NET MVC (2011)

12.13 Con ASPX, la página Index.aspx recién creada sería

Código fuente

Vista diseño

Page 80: ASP.NET MVC (2011)

12.13.1 Con RAZOR la página recién creada es:

Código fuente

Vista diseño = ?

Page 81: ASP.NET MVC (2011)

12.14 Codificar Lista de cliente en la vista index.aspx<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2> customers</h2> <ul> <% For Each customer In ViewData.Model.Customers %> <li> <%= Html.ActionLink(customer.CompanyName + " - " + _ customer.FirstName + " " + _ customer.LastName, "Info", _ New With {.id = customer.CustomerID}) %> </li> <% Next %> </ul></asp:Content> For-Each recorre la colección Customers existente en el modelo de datos

Page 82: ASP.NET MVC (2011)

12.14.1 Codificar Lista de cliente en la vista index.vbhtml@Code ViewData("Title") = "Index"End Code<h2>customers</h2><ul>@For Each customer In ViewData.Model.Customers@<li> @Html.ActionLink(customer.CompanyName + "-" + _ customer.FirstName + " " + _ customer.LastName, "Info", _ New With {.id = customer.customerID})</li>Next</ul>

For-Each recorre la colección Customers existente en el modelo de datos

Page 83: ASP.NET MVC (2011)

12.15 Crear la vista Info de CustomerController

1. Abrir el código del método Info en CustomerController

2. Clic con botón derecho3. Seleccionar “Add View”

Page 84: ASP.NET MVC (2011)

12.15.1 Cuadro de diálogo de crear vista Info.aspx

Configurar cómo se muestra en el cuadro de diálogo

Pulsar Add SE CREA

INFO.vbHtml

Page 85: ASP.NET MVC (2011)

12.16 Colocar HTML en info.aspx de customer<h2>

Customer Information</h2> <fieldset> <p> CompanyName: <%= Html.Encode(Model.CompanyName) %> </p> <p> EmailAddress: <%= Html.Encode(Model.EmailAddress) %> </p> <p> Name: <%= Html.Encode(Model.Title + " " + Model.FirstName + " " + Model.MiddleName + Model.LastName) %> </p> <p> Phone: <%= Html.Encode(Model.Phone) %> </p> </fieldset>

Page 86: ASP.NET MVC (2011)

12.16.1 O editar Info.vbhtml<h2> Customer Information</h2> <fieldset> <p> CompanyName: @Html.Encode(Model.CompanyName) </p> <p> EmailAddress: @Html.Encode(Model.EmailAddress) </p> <p> Name: @Html.Encode(Model.Title + " " + Model.FirstName + " " + Model.MiddleName + Model.LastName) </p> <p> Phone: @Html.Encode(Model.Phone) </p> </fieldset>

Page 87: ASP.NET MVC (2011)

12.17 Agregue el detalle de las direcciones del cliente (ASPX) El siguiente código va debajo <fieldset> pero dentro

de </asp:Content> en la vista info.aspx de customer

<ul><% For Each address In Model.CustomerAddress%> <li> <%= address.Address.AddressLine1 + " " + _ address.Address.AddressLine2 + " - " + _ address.Address.City %> <%= Html.ActionLink("(Edit)", "Edit", "Address", _ New With {address.AddressID, Model.CustomerID}, _ Nothing) %> <%= Html.ActionLink("(Delete)", "Delete", "Address", _ New With {address.AddressID, Model.CustomerID}, _ Nothing) %> </li> <% Next %></ul><%= Html.ActionLink("Add New Address", "Create", "Address", _ New With {Model.CustomerID}, Nothing) %>

Page 88: ASP.NET MVC (2011)

12.17.1 Agregue el detalle de las direcciones del cliente (vbHTML)

El siguiente código va debajo <fieldset> pero dentro de </asp:Content> en la vista info.vbhtml de customer

<ul>@For Each address In Model.CustomerAddress @<li> @address.Address.AddressLine1 + " " + _ address.Address.AddressLine2 + " - " + _ address.Address.City %> @Html.ActionLink("(Edit)", "Edit", "Address", _ New With {address.AddressID, Model.CustomerID}, _ Nothing) @Html.ActionLink("(Delete)", "Delete", "Address", _ New With {address.AddressID, Model.CustomerID}, _ Nothing) </li> Next</ul>@Html.ActionLink("Add New Address", "Create", "Address", _ New With {Model.CustomerID}, Nothing)

Page 89: ASP.NET MVC (2011)

12.18 Verificar lista de cliente en la vista index.aspx<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2> customers</h2> <ul> <% For Each customer In ViewData.Model.Customers %> <li> <%= Html.ActionLink(customer.CompanyName + " - " + _ customer.FirstName + " " + _ customer.LastName, "Info", _ New With {.id = customer.CustomerID}) %> </li> <% Next %> </ul></asp:Content> For-Each recorre la colección Customers existente en el modelo de datos

Page 90: ASP.NET MVC (2011)

12.18.1 Verificar lista de cliente en la vista index.vbhtml@Code ViewData("Title") = "Index"End Code<h2>customers</h2><ul>@For Each customer In ViewData.Model.Customers@<li> @Html.ActionLink(customer.CompanyName + "-" + _ customer.FirstName + " " + _ customer.LastName, "Info", _ New With {.id = customer.customerID})</li>Next</ul>

For-Each recorre la colección Customers existente en el modelo de datos

Page 91: ASP.NET MVC (2011)

12.19 Crear la vista Edit de AddressController

1. Abrir el código del método Edit en AddressController

2. Clic con botón derecho3. Seleccionar “Add View”

Page 92: ASP.NET MVC (2011)

12.19.1 Cuadro de diálogo de crear vista Edit.aspx

Configurar como se muestra en el cuadro de diálogo

Clic en Add SE CREA

EDIT.vbhtml

Page 93: ASP.NET MVC (2011)

12.20 Verificar Edit.aspx recién creado

Código fuente

Page 94: ASP.NET MVC (2011)

12.21 HTML campos de domicilio /1@Code

ViewData("Title") = "Edit"End Code

<h2>Editing: @Model.Address.AddressLine1 %></h2>@Html.ValidationSummary("Edit was unsuccessful. " + _ "Please correct the errors and try again.")@Using (Html.BeginForm())@<fieldset><legend>Fields</legend><p><label for="AddressLine1">Address Line 1:</label>@Html.TextBox("Address.AddressLine1")</p><p><label for="AddressLine2">Address Line 2:</label>@Html.TextBox("Address.AddressLine2")</p>

Sigue en la próxima diapositiva

Page 95: ASP.NET MVC (2011)

12.21 HTML campos de domicilio /2…viene de la diapositiva anterior<p><label for="City">City:</label>@Html.TextBox("Address.City")</p><p><label for="StateProvince">State/Province:</label>@Html.TextBox("Address.StateProvince")</p><p><label for="PostalCode">Postal Code:</label>@Html.TextBox("Address.PostalCode")</p><p><label for="CountryRegion">Country/Region:</label>@Html.TextBox("Address.CountryRegion")</p><p><input type="submit" value="Save" /></p></fieldset>End Using

Page 96: ASP.NET MVC (2011)

12.22 Crear vista Nuevo Domicilio en AddressController

1. Abrir el código del método Create (GET) en AddressController

2. Clic con botón derecho3. Seleccionar “Add View”

Page 97: ASP.NET MVC (2011)

12.22.1 Cuadro de diálogo de crear vista Edit.aspx

Configurar como se muestra en el cuadro de diálogo

Clic en Add SE CREA

Create.vbhtml

Page 98: ASP.NET MVC (2011)

12.22.2 Verificar Create.vbhtml recién creada

Código HTML

Page 99: ASP.NET MVC (2011)

12.23 Agregue HTML de los campos del nuevo domicilio (Create.aspx) <h2> Create Address </h2> @Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") @Using (Html.BeginForm()) @<fieldset> <legend>Fields</legend> <p> <label for="AddressLine1"> Address Line 1:</label> @Html.TextBox("Address.AddressLine1") </p> <p> <label for="AddressLine2"> Address Line 2:</label> @Html.TextBox("Address.AddressLine2") </p> <p> <label for="City"> City:</label> @Html.TextBox("Address.City") </p>

<p> <label for="StateProvince"> State/Province:</label> @Html.TextBox("Address.StateProvince")</p><p> <label for="PostalCode"> Postal Code:</label> @Html.TextBox("Address.PostalCode")</p><p> <label for="CountryRegion"> Country/Region:</label> @Html.TextBox("Address.CountryRegion")</p><p> <input type="submit" value="Create" /></p></fieldset>End Using

Page 100: ASP.NET MVC (2011)

DEPURACION DE LA APLICACION

Page 101: ASP.NET MVC (2011)

Correr la aplicación

Ir al árbol de objetos en Solution Explorer

Ubicar el proyecto MVCRunWebCamp.

Botón derecho -> Debug -> Start New Instance

Page 102: ASP.NET MVC (2011)

Aplicación corriendo

Page 103: ASP.NET MVC (2011)

Probar la lista de Customers Colocar en la URL:

Se debe exhibir la siguiente página:

http://localhost:50000/customer

Tabla de clientes

Page 104: ASP.NET MVC (2011)

Pase de ID de cliente

El hipervinculo Metropolitan Sports Supply apunta a la siguiente URLhttp://localhost:50000/customer/Info/5

Donde se enruta según estos parámetros:

Info es la vista (info.aspx de customer) 5 es el ID de cliente a mostrar

Page 105: ASP.NET MVC (2011)

http://localhost:50000/customer/info/5

Hacer clic en la opción de “Agregar una nueva dirección”, para dar de alta una nueva entrada en la colección de direcciones del cliente

Page 106: ASP.NET MVC (2011)

http://localhost:50000/Address/Create?CustomerID=5

Rellenar los campos y hacer clic en Create

Page 107: ASP.NET MVC (2011)

¿PREGUNTAS?

Page 108: ASP.NET MVC (2011)

¡MUCHAS GRACIAS!

CARLOS PEREZ [email protected] Logica10mobile.blogspot.com