ASP.NET MVC (2011)

ACTIVE SERVER PAGES .NET 4.0

MODELO-VISTA-CONTROLADORMVC 2 Y 3

RAZOR ENGINE

Nombre del Instructor

¿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.

¿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.

MVC – Perspectiva 1

Browser

1. Petición

CCONTROLADOR

2. Parámetros de ejecución

M MODELO

3. Colección datos

resultado

5. Contenido HTTP

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

MODELO

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.

“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)

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

CONTROLADOR1.

Petición HTTP

CCONTROLADOR

3. Colección datos

resultado5. Contenido

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.

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

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

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

Empleado

Director

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

ASP.NET MVC 3http://www.microsoft.com/downloads/en/details.aspx?FamilyID=82cbd599-d29a-43e3-b78b-0f863d22811a&displaylang=en

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

Proyecto ASP.NET MVC 3

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

¿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

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.

EJERCICIO

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

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

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

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)

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

3.2 Content

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

cascada Imágenes Temas Archivos de medios,

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

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)

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

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

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

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

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.

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

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

4. Enrutamiento MapPageRoute con ASP.NET WebForms 4.0

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

5. HomeController

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

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

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

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()

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

Content ContentResult

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

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

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

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.

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

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.

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

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

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

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} )

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.

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

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

9.2 Seleccionar tablas Seleccione las

siguientes tablas Address Customer CustomerAddress

Con ellas formaremos la entidad “Domicilio” del cliente.

Clic en Finalizar

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.

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

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

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

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

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)

End Sub

9.4.3 Adición de domicilio a un cliente existente

Public Sub UpdateAddress()

End Sub

9.4.4 Grabar la dirección

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

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)

End Sub

9.4.5 Eliminar la dirección

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

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

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

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

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

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

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

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

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”

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

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

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

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

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

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})

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

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”

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

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

Código fuente

Vista diseño

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

Código fuente

Vista diseño = ?

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

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

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”

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

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>

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>

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

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)

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

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

12.19 Crear la vista Edit de AddressController

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

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

Clic en Add SE CREA

EDIT.vbhtml

12.20 Verificar Edit.aspx recién creado

Código fuente

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

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

12.22 Crear vista Nuevo Domicilio en AddressController

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

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

Clic en Add SE CREA

Create.vbhtml

12.22.2 Verificar Create.vbhtml recién creada

Código HTML

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

DEPURACION DE LA APLICACION

Correr la aplicación

Ir al árbol de objetos en Solution Explorer

Ubicar el proyecto MVCRunWebCamp.

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

Aplicación corriendo

Probar la lista de Customers Colocar en la URL:

Se debe exhibir la siguiente página:

http://localhost:50000/customer

Tabla de clientes

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

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

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

Rellenar los campos y hacer clic en Create

¿PREGUNTAS?

¡MUCHAS GRACIAS!

CARLOS PEREZ logica10@gmail.com Logica10mobile.blogspot.com

ASP.NET MVC (2011)

Technology

ASP.NET MVC 4

Тренинг ASP.NET MVC 3

MVC & ASP.NET (Spanish)

11. ASP.NET MVC

Tổng quan về ASP.NET MVC Framework...Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 2 1 Tại sao sử dụng ASP.NET MVC 1.1 ASP.NET MVC là

ASP.NET MVC - Donutsdocshare01.docshare.tips/files/27608/276088487.pdf · 2016-07-01 · ASP.NET MVC Урок 0. Вступление. Я пишу сайты на asp.net mvc. В

ASP.NET MVC - AJAX

ASP.NET MVC + Geoprocessamento

Desvendando ASP.NET MVC

Ajax reverse (Comet) con ASP.NET MVC - JUTI 2011

ASP.NET, MVC, ASP.NET MVC

ASP.NET MVC Framework

ASP.NET MVC 2.0

ASP.NET Web Forms X ASP.NET MVC

ASP.NET WebForms x ASP.NET MVC

ASP.NET MVC 3

Palestra ASP.NET MVC

Curso asp.net mvc

GT Framework v2.0.2 for ASP.NET MVC 5 - Mostisoft MVC Provosal.pdf · 2015-03-30 · MVC 5 GT Framework v2.0.2 for ASP.NET MVC 5. INDEX GTFramework Web for ASP.NET MVC Component Stack

2011 - DotNetFranken: ASP.NET MVC Localization