ACTIVE SERVER PAGES .NET 4.0    MODELO-VISTA-CONTROLADOR                   MVC 2 Y 3                RAZOR ENGINE          ...
¿Qué es un patrón dearquitectura de software? Es una norma de diseño establecida en el  campo de la Ingeniería de Softwar...
¿Qué es el patrón dearquitectura MVC? MODELO-VISTA-CONTROLADOR Es un patrón de arquitectura de software.   VISTA: repre...
MVC – Perspectiva 1          1. Petición                                           2. Parámetros             HTTP         ...
MODELOLos objeto de modelo                           2. Parámetros•Implementan la lógica      de ejecucióndel dominio de l...
VISTA“Arma” la interfaz de usuario.• Los datos que muestra son estados del objeto queestán gestionando•Utiliza controles c...
VISTA La GUI se construye con elementos propios de la tecnología que se utilice  Cliente liviano (por lo general, HTML o ...
CONTROLADOR        1. Petición                   2. Parámetros           HTTP                        de ejecución         ...
Acople fuerte Dos clases están fuertemente acopladas  cuando   Una clase dependiente A tiene un fuerte    “conocimiento”...
Acople débil     Dos clases están débilmente acopladas cuando       Una clase dependiente A no tiene conocimiento (o    ...
MVC es acople débil Existe acople débil entre los tres  componentes MVC Permite el enfoque profundo en cada uno de  esto...
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 la...
Proyecto ASP.NET MVC 3                   Usar marcación de HTML5                   A 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 bro...
Objetivos de Razor Engine Compacto: minimiza la cantidad de tipeo en un    archivo   Fácil: es sencillo de aprender y pe...
EJERCICIO
1. Crear la aplicación enVS2010 Hacer clic en New/ Project Seleccionar el tipo de proyecto   .NET 4.0 Framework   Tipo...
1.1 Proyecto de test VS2010 crea dos proyectos en MVC   1. El proyecto MVC3RunWebCamp en sí mismo   2. Un proyecto para...
2. Configurar el puerto TCPde escucha en 50000 Hacer clic con botón derecho sobre la raíz del proyecto en el   explorador...
3. Estructura de carpetas A continuación comentaremos algo acerca de  las carpetas creadas en estos proyectos         Pro...
3.1 App_Data Es la carpeta de  almacenamiento físico  de datos. Su papel es similar al de  la misma carpeta en  una apli...
3.2 Content Esta carpeta se recomienda  para contenido estático   Hojas de estilo en cascada   Imágenes   Temas   Arc...
3.3 Controllers Contiene la definición de  clases de los controladores   Manejo de interacción con el    usuario   Mani...
3.4 Models Contiene clases que  representan el modelo de  aplicación Código   define los objetos   define la interacci...
3.5 Scripts De existir, aquí se colocan los  programas JavaScript   Algunos módulos son de uso    propio de Intellisense...
3.6 Views Contiene los componentes que  muestran la interfaz de usuario  según engine:   .ascx, .aspx, .master   para   ...
3.6 Views Por defecto, ASP.NET MVC crea tres carpetas con vistas:   Account: vista de la cuenta,    gestionada por    Ac...
4. Enrutamiento MVC MVC “mapea” URLs a las clases que son los    controladores   Las URLs entrantes no se refieren a rec...
WEB FORMS 4 - Enrutamiento Las URL como ésta no son amigables para los motores  de búsqueda:http://www.mysite.com/product...
WEB FORMS 4 - Enrutamiento                     Enrutamiento ASP.NETHTTP REQUESTProducts/Bikes                Ruta:        ...
4. Enrutamiento en Global.asaxShared Sub RegisterRoutes(ByVal routes As RouteCollection)       routes.IgnoreRoute("{resour...
4. Enrutamiento MapPageRoutecon ASP.NET WebForms 4.0
5. HomeController<HandleError()> _Public Class HomeController    Inherits System.Web.Mvc.Controller   Function Index() As ...
5. HomeController<HandleError()> _Public Class HomeController    Inherits System.Web.Mvc.Controller   Function Index() As ...
5.1 Distintos tipos deActionResult ActionResult       Lo que retorna el controlador luego de su ejecución                 ...
5.2 VIEW() Normalmente, no se devuelve directamente  ViewResult(), sino el método View() de la clase de  base del Control...
5.2 VIEW()<HandleError()> _Public Class HomeController    Inherits System.Web.Mvc.Controller   Function Index() As ActionR...
5.3 Métodos de clase de base   del controladorMétodos            Retorna una instancia de:View               ViewResultRed...
6. ViewData     Es la propiedad de vista específica de MVC     Para producir una salida visible:      1. Se debe interac...
7. Examinando las vistas Una carpeta por  controlador   Account   Home Dentro de cada carpeta   Archivos aspx, ascx  ...
7.1 VistasASPX Son archivos regulares de ASP.NET Por ejemplo, About.aspx Aquí, es una vista que todavía no tiene contenido...
7.1 VistasRAZOR Tienen la extensión VBHTML ó CSHTML@Code    ViewData("Title") = "About Us"End Code<h2>About</h2><p>     Pu...
7.2 Vistas   Las vistas, por defecto, no contienen código    ejecutable   El controlador pasa la información a ser    ex...
7.3 Vistas ASPXIndex.aspx si tiene contenidodinámicoNótese comoViewData(“Message”)realiza la exhibición de datos<%@ Page L...
7.3 Vistas RazorIndex.aspx si tiene contenidodinámicoNótese comoViewData(“Message”)realiza la exhibición de datos@Code    ...
7.3.1 ASPX vs. RAZOR ASP.NET ASPX<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master"Inherits="System.Web.Mv...
8. Ruta por defecto    http://localhost:50000 se intercepta por el     mecanismo de intercepción y enrutamiento     de AS...
9. Agregar un Entity Data Model   Para manejar los datos de la base de datos,    creamos un Entity Data Model de ADO.NET ...
9.1 Elegir contenido del modelo  Seleccionar “Generar desde base de datos” y   hacer clic en Siguiente  Creamos la conex...
9.1.1 Se puede crear unaconexión a un MDF El archivo MDF (master data file) es el  principal de SQL Server, donde aloja l...
9.2 Seleccionar tablas Seleccione las siguientes  tablas   Address   Customer   CustomerAddress Con ellas formaremos ...
9.3 Verificar AW1.edmx VS2010 crea el modelo AW1.edmx en la  carpeta Models. Verificar que contenga los vínculos, que és...
9.4 Implementar elrepositorio Haga clic con botón derecho sobre el  proyecto MVC3RunWebCamp Cree un nuevo ítem de código...
9.4.1 Codificar la clase de   repositorioPublic Class AdventureWorksRepository   Private context As New AdventureWorksLTEn...
9.4.2 Recuperación de    entidad CustomerPublic Function GetCustomers(ByVal page As Integer, ByVal sizeAs Integer) As IEnu...
9.4.3 Adición de domicilio a    un cliente existentePublic Sub AddAddress(ByVal address As Address, ByVal customerIdAs Int...
9.4.3 Adición de domicilio a    un cliente existentePublic Sub AddAddress(ByVal address As Address, ByVal customerIdAs Int...
9.4.4 Grabar la direcciónPublic Sub UpdateAddress()          context.SaveChanges()End Sub    SaveChanges quedó también de...
9.4.5 Eliminar la direcciónPublic Sub DeleteAddress(ByVal address As Address, _                            ByVal customerI...
9.4.6 Recuperar la direcciónPublic Function GetAddressById(ByVal addressId AsInteger) As Address       Return context.Addr...
10. Implementar     CustomerViewData (MVC view)      Una vez creada la entidad y su repositorio, se        deben crear la...
11. Implementar   AddressViewData (MVC view)       Dentro de la carpeta ViewData, cree otra nueva        clase llamada Ad...
12. ImplementarCustomerController    Tendrá dos métodos de acción:      Index view: vista en forma de lista de los clien...
12.1 CustomerController   El código por defecto que genera VS2010 es el      siguiente:Namespace MVCApp1    Public Class C...
12.2 CustomerController    Instanciar un repositorioNamespace MVCApp1    Public Class CustomerController        Inherits ...
12.3 CustomerController – Index()     Crear el método de acción para manejar la      vista CustomerControllerIndex.     ...
12.4 CustomerController – Info()     Crear el método de acción para manejar la      vista CustomerControllerInfo.     Ag...
12.5 AddressController Gestiona dos vistas   Vista Edit: modificar el domicilio de un cliente   Vista New: agregar un n...
12.6 AddressController     Instanciar un repositorio para servicio de      acceso a datos.Public Class AddressController ...
12.7 AddressController- EliminarIndex() y Details() por defecto    Eliminar las siguientes líneas de los métodos por defe...
12.8 AddressController - Crear elmanejador de la vista Create.     Reemplace el código de Create() de la      operación G...
12.9 AddressController - Crear elmanejador de envío de formularios     Reemplace el código de Create() de la      operaci...
12.10 Crear el manejador depresentación de vista Edit Reemplace el código de Edit de la operación POST actual por el sigu...
12.10.1 AddressControllerQué hace la vista EditaddressViewData.Address = _           Me.repository.GetAddressById(addressI...
12.11 Implementar laeliminación de un domicilio    Agregar el siguiente método Delete a la     clase AddressController:Pu...
12.12 Crear la vista Indexde CustomerController   1. Abrir el código del método Index en      CustomerController   2. Clic...
12.12.1 Cuadro de diálogo decrear vista Index.aspx  Configurar   como se   muestra en el   cuadro de   diálogo  Pulsar A...
12.13 Con ASPX, la páginaIndex.aspx recién creada sería  Código fuente    Vista diseño
12.13.1 Con RAZOR la páginarecién creada es:  Código fuente   Vista diseño = ?
12.14 Codificar Lista de clienteen la vista index.aspx<asp:Content ID="Content2" ContentPlaceHolderID="MainContent"runat="...
12.14.1 Codificar Lista decliente en la vista index.vbhtml@Code    ViewData("Title") = "Index"End Code<h2>customers</h2><u...
12.15 Crear la vista Info deCustomerController   1. Abrir el código del método Info en      CustomerController   2. Clic c...
12.15.1 Cuadro de diálogo decrear vista Info.aspx  Configurar cómo   se muestra en el   cuadro de   diálogo  Pulsar Add ...
12.16      Colocar HTML en info.aspx de customer <h2>     Customer Information</h2>     <fieldset>       <p>           Com...
12.16.1 O editar Info.vbhtml <h2>     Customer Information</h2>     <fieldset>       <p>           CompanyName:           ...
12.17 Agregue el detalle de lasdirecciones del cliente (ASPX)  El siguiente código va debajo <fieldset> pero dentro de   ...
12.17.1 Agregue el detalle de lasdirecciones del cliente (vbHTML)  El siguiente código va debajo <fieldset> pero dentro d...
12.18 Verificar lista de clienteen la vista index.aspx<asp:Content ID="Content2" ContentPlaceHolderID="MainContent"runat="...
12.18.1 Verificar lista decliente en la vista index.vbhtml@Code    ViewData("Title") = "Index"End Code<h2>customers</h2><u...
12.19 Crear la vista Edit deAddressController   1. Abrir el código del método Edit en      AddressController   2. Clic con...
12.19.1 Cuadro de diálogo decrear vista Edit.aspx  Configurar como   se muestra en el   cuadro de diálogo  Clic en Add ...
12.20 Verificar Edit.aspxrecién creado  Código fuente
12.21 HTML campos de domicilio /1 @Code     ViewData("Title") = "Edit" End Code <h2>Editing: @Model.Address.AddressLine1 %...
12.21 HTML campos de domicilio /2…viene de la diapositiva anterior<p><label for="City">City:</label>@Html.TextBox("Address...
12.22 Crear vista Nuevo Domicilioen AddressController   1. Abrir el código del método Create (GET)      en AddressControll...
12.22.1 Cuadro de diálogo decrear vista Edit.aspx  Configurar como   se muestra en el   cuadro de diálogo  Clic en Add ...
12.22.2 Verificar Create.vbhtmlrecién creada    Código HTML
12.23 Agregue HTML de los camposdel nuevo domicilio (Create.aspx)<h2>                                                    <...
DEPURACION DE LA APLICACION
Correr la aplicación Ir al árbol de  objetos en  Solution  Explorer Ubicar el proyecto  MVCRunWebCamp. Botón derecho ->...
Aplicación corriendo
Probar la lista de Customers Colocar en la URL:   http://localhost:50000/customer Se debe exhibir la siguiente página:  ...
Pase de ID de cliente El hipervinculo Metropolitan Sports Supply  apunta a la siguiente URL  http://localhost:50000/custo...
http://localhost:50000/customer/info/5                          Hacer clic en la opción                          de “Agreg...
http://localhost:50000/Address/Create?CustomerID=5                                    Rellenar los campos y               ...
¿PREGUNTAS?
¡MUCHAS GRACIAS! CARLOS PEREZ logica10@gmail.com Logica10mobile.blogspot.com
Próxima SlideShare
Cargando en…5
×

ASP.NET MVC (2011)

2.459 visualizaciones

Publicado el

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

Publicado en: Tecnología
0 comentarios
4 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
2.459
En SlideShare
0
De insertados
0
Número de insertados
49
Acciones
Compartido
0
Descargas
129
Comentarios
0
Recomendaciones
4
Insertados 0
No insertados

No hay notas en la diapositiva.

ASP.NET MVC (2011)

  1. 1. ACTIVE SERVER PAGES .NET 4.0 MODELO-VISTA-CONTROLADOR MVC 2 Y 3 RAZOR ENGINE Nombre del Instructor
  2. 2. ¿Qué es un patrón dearquitectura 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.
  3. 3. ¿Qué es el patrón dearquitectura 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.
  4. 4. MVC – Perspectiva 1 1. Petición 2. Parámetros HTTP de ejecuciónBrowser C 3. Colección M CONTROLADOR 5. Contenido datos resultado MODELO HTTP datos resultado 3. Colección interfaz usuario 4.Contenido de Los componentes M, V y CCLIENTE SERVIDOR están del lado servidor. V VISTA
  5. 5. MODELOLos objeto de modelo 2. Parámetros•Implementan la lógica de ejecucióndel dominio de laaplicación. 3. Colección M•Suelen leer y persistir datos resultado MODELOestados en una RDBMS.•En sistemas grandespueden tener una capa deacceso a datos (DAL)separada.
  6. 6. VISTA“Arma” la interfaz de usuario.• Los datos que muestra son estados del objeto queestán gestionando•Utiliza controles comunes de la GUI en cuestión (cajasde texto, dropdownlists, checkboxes) datos resultado 3. Colección interfaz usuario 4.Contenido de V VISTA
  7. 7. VISTA 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/XML datos resultado 3. ColecciónWinForms .NET interfaz usuario 4.Contenido deFormularios JavaVisual FoxProVisual BasicDelphiPowerBuilder V VISTA
  8. 8. CONTROLADOR 1. Petición 2. Parámetros HTTP de ejecución C CONTROLADOR 3. Colección 5. Contenido datos resultado HTTPEs 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á alcliente en la GUI.
  9. 9. 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 B A Inicio() Saldo() Nuevo() Fin()
  10. 10. 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. interfaz Empleado DirectorA B Inicio() Inicio() Inicio() Saldo() Saldo() Saldo() Nuevo() Nuevo() Nuevo() Fin() Fin() Fin()
  11. 11. 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
  12. 12. ASP.NET MVC 3http://www.microsoft.com/downloads/en/details.aspx?FamilyID=82cbd599-d29a-43e3-b78b-0f863d22811a&displaylang=en
  13. 13. 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
  14. 14. Proyecto ASP.NET MVC 3 Usar marcación de HTML5 A través de Modernizr 1.7
  15. 15. ¿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
  16. 16. 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.
  17. 17. EJERCICIO
  18. 18. 1. Crear la aplicación enVS2010 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
  19. 19. 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
  20. 20. 2. Configurar el puerto TCPde 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.
  21. 21. 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)
  22. 22. 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
  23. 23. 3.2 Content Esta carpeta se recomienda para contenido estático  Hojas de estilo en cascada  Imágenes  Temas  Archivos de medios, etc.
  24. 24. 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
  25. 25. 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)
  26. 26. 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
  27. 27. 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 finalContiene una vista por cada controlador. Para un controladorClienteController existirá una vista Cliente.Cuando ASP.NET MVC busca una vista, ubica un archivo .aspxcon el nombre especificado enViewsnombre_controladornombre_acción.aspx
  28. 28. 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
  29. 29. 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
  30. 30. 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.
  31. 31. WEB FORMS 4 - Enrutamiento Enrutamiento ASP.NETHTTP REQUESTProducts/Bikes Ruta: Product/{name} -> Product.aspx Página WebForm Nombre de archivo RESPUESTA Product.aspx Valores de la ruta: Name = “Bikes”
  32. 32. 4. Enrutamiento en Global.asaxShared 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
  33. 33. 4. Enrutamiento MapPageRoutecon ASP.NET WebForms 4.0
  34. 34. 5. HomeController<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 http://localhost/index llamará a la funcion Index() del tipo ActionResult http://localhost/about llamará a la función About() del tipo ActionResult
  35. 35. 5. HomeController<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 Los métodos mapeados deben  Ser públicos  No deben tener NonActionAtribute  Siempre devolver un objeto del tipo ActionResult
  36. 36. 5.1 Distintos tipos deActionResult 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 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 FileContentResul Un archivo descargable con contenido binario t FilePathResult Un archivo descargable con un camino (path) FileStreamResult Un archivo descargable con un stream de datos
  37. 37. 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
  38. 38. 5.2 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 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()
  39. 39. 5.3 Métodos de clase de base del controladorMétodos Retorna una instancia de:View ViewResultRedirect RedirectResultRedirectToAction RedirectToRouteResult, es decir, redirecciona a la acción especificadaRedirectToRoute RedirectToRouteResult, es decir, redirecciona a la ruta especificada.JSON JsonResultJavaScriptResult JavaScriptResultContent ContentResultFile Dependiendo de los parámetros pasados al método retorna: •FileContentResult •FilePathResult •FileStreamResult
  40. 40. 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..” 1. Se debe devolver el resultado de View()Function Index() As ActionResult ViewData("Message") = “Bienvenidos al MUG" Return View()End Function
  41. 41. 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
  42. 42. 7.1 VistasASPX Son archivos regulares de ASP.NET Por ejemplo, About.aspx Aquí, es una vista que todavía no tiene contenido dinámico definido.<%@ 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>
  43. 43. 7.1 VistasRAZOR Tienen la extensión VBHTML ó CSHTML@Code ViewData("Title") = "About Us"End Code<h2>About</h2><p> Put content here.</p>
  44. 44. 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.
  45. 45. 7.3 Vistas ASPXIndex.aspx si tiene contenidodinámicoNótese comoViewData(“Message”)realiza la exhibición de datos<%@ 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 <ahref="http://asp.net/mvc" title="ASP.NET MVCWebsite">http://asp.net/mvc</a>.</p></asp:Content>
  46. 46. 7.3 Vistas RazorIndex.aspx si tiene contenidodinámicoNótese comoViewData(“Message”)realiza la exhibición de datos@Code ViewData("Title") = "Home Page"End Code<h2>@ViewData("Message")</h2><p> To learn more about ASP.NET MVC visit <ahref="http://asp.net/mvc" title="ASP.NET MVCWebsite">http://asp.net/mvc</a>.</p>
  47. 47. 7.3.1 ASPX vs. RAZOR ASP.NET 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.NETMVC Website">http://asp.net/mvc</a>.</p></asp:Content> RAZOR VBHTML@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.NETMVC Website">http://asp.net/mvc</a>.</p>
  48. 48. 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.asaxroutes.MapRoute( _ "Default", _ "{controller}/{action}/{id}", _ New With {.controller = "Home", _ .action = "Index", _ .id = UrlParameter.Optional} )
  49. 49. 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.
  50. 50. 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
  51. 51. 9.1.1 Se puede crear unaconexió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
  52. 52. 9.2 Seleccionar tablas Seleccione las siguientes tablas  Address  Customer  CustomerAddress Con ellas formaremos la entidad “Domicilio” del cliente. Clic en Finalizar
  53. 53. 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.
  54. 54. 9.4 Implementar elrepositorio 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
  55. 55. 9.4.1 Codificar la clase de repositorioPublic Class AdventureWorksRepository Private context As New AdventureWorksLTEntities() ‘colocar el codigo aquíEnd Class  El primer miembro a definir será el contexto  AdventureWorksLTEntities quedó definido al crear el modelo AW1, en su archivo .designer.vb
  56. 56. 9.4.2 Recuperación de entidad CustomerPublic Function GetCustomers(ByVal page As Integer, ByVal sizeAs Integer) As IEnumerable(Of Customer) Return context.Customer.OrderBy(Function(c) _ c.CustomerID).Skip(page * size).Take(size)End FunctionPublic Function GetCustomerById(ByVal customerId As Integer)As Customer Return context.Customer.Include( _ "CustomerAddress.Address").Where(Function(c) _ c.CustomerID = customerId).First()End Function
  57. 57. 9.4.3 Adición de domicilio a un cliente existentePublic Sub AddAddress(ByVal address As Address, ByVal customerIdAs 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
  58. 58. 9.4.3 Adición de domicilio a un cliente existentePublic Sub AddAddress(ByVal address As Address, ByVal customerIdAs 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
  59. 59. 9.4.4 Grabar la direcciónPublic Sub UpdateAddress() context.SaveChanges()End Sub  SaveChanges quedó también definido en el modelo de entidad AW1.edmx
  60. 60. 9.4.5 Eliminar la direcciónPublic 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
  61. 61. 9.4.6 Recuperar la direcciónPublic Function GetAddressById(ByVal addressId AsInteger) As Address Return context.Address.Where(Function(a) _ a.AddressID = addressId).First()End FunctionPublic 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
  62. 62. 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 IntegerEnd Class
  63. 63. 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 Address Public Property CustomerId As IntegerEnd Class
  64. 64. 12. ImplementarCustomerController  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
  65. 65. 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
  66. 66. 12.2 CustomerController  Instanciar un repositorioNamespace 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
  67. 67. 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
  68. 68. 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
  69. 69. 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”
  70. 70. 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
  71. 71. 12.7 AddressController- EliminarIndex() 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
  72. 72. 12.8 AddressController - Crear elmanejador 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
  73. 73. 12.9 AddressController - Crear elmanejador 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
  74. 74. 12.10 Crear el manejador depresentació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
  75. 75. 12.10.1 AddressControllerQué hace la vista EditaddressViewData.Address = _ Me.repository.GetAddressById(addressId) UpdateModel(addressViewData) Me.repository.UpdateAddress() Return RedirectToAction("Info", "Customer", _ New With {.id = customerId}) 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
  76. 76. 12.11 Implementar laeliminació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
  77. 77. 12.12 Crear la vista Indexde CustomerController 1. Abrir el código del método Index en CustomerController 2. Clic con botón derecho 3. Seleccionar “Add View”
  78. 78. 12.12.1 Cuadro de diálogo decrear vista Index.aspx  Configurar como se muestra en el cuadro de diálogo  Pulsar Add  SE CREA INDEX.vbhtml
  79. 79. 12.13 Con ASPX, la páginaIndex.aspx recién creada sería Código fuente Vista diseño
  80. 80. 12.13.1 Con RAZOR la páginarecién creada es: Código fuente Vista diseño = ?
  81. 81. 12.14 Codificar Lista de clienteen 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
  82. 82. 12.14.1 Codificar Lista decliente 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
  83. 83. 12.15 Crear la vista Info deCustomerController 1. Abrir el código del método Info en CustomerController 2. Clic con botón derecho 3. Seleccionar “Add View”
  84. 84. 12.15.1 Cuadro de diálogo decrear vista Info.aspx  Configurar cómo se muestra en el cuadro de diálogo  Pulsar Add  SE CREA INFO.vbHtml
  85. 85. 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>
  86. 86. 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>
  87. 87. 12.17 Agregue el detalle de lasdirecciones 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) %>
  88. 88. 12.17.1 Agregue el detalle de lasdirecciones 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)
  89. 89. 12.18 Verificar lista de clienteen 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
  90. 90. 12.18.1 Verificar lista decliente 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
  91. 91. 12.19 Crear la vista Edit deAddressController 1. Abrir el código del método Edit en AddressController 2. Clic con botón derecho 3. Seleccionar “Add View”
  92. 92. 12.19.1 Cuadro de diálogo decrear vista Edit.aspx  Configurar como se muestra en el cuadro de diálogo  Clic en Add  SE CREA EDIT.vbhtml
  93. 93. 12.20 Verificar Edit.aspxrecién creado Código fuente
  94. 94. 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
  95. 95. 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
  96. 96. 12.22 Crear vista Nuevo Domicilioen AddressController 1. Abrir el código del método Create (GET) en AddressController 2. Clic con botón derecho 3. Seleccionar “Add View”
  97. 97. 12.22.1 Cuadro de diálogo decrear vista Edit.aspx  Configurar como se muestra en el cuadro de diálogo  Clic en Add  SE CREA Create.vbhtml
  98. 98. 12.22.2 Verificar Create.vbhtmlrecién creada Código HTML
  99. 99. 12.23 Agregue HTML de los camposdel nuevo domicilio (Create.aspx)<h2> <p> Create Address <label for="StateProvince"> </h2> State/Province:</label> @Html.ValidationSummary("Create was unsuccessful. @Html.TextBox("Address.StateProvince")Please correct the errors and try again.") </p> @Using (Html.BeginForm()) <p> @<fieldset> <label for="PostalCode"> <legend>Fields</legend> Postal Code:</label> <p> @Html.TextBox("Address.PostalCode") <label for="AddressLine1"> </p> Address Line 1:</label> <p> @Html.TextBox("Address.AddressLine1") <label for="CountryRegion"> </p> Country/Region:</label> <p> @Html.TextBox("Address.CountryRegion") <label for="AddressLine2"> </p> Address Line 2:</label> <p> @Html.TextBox("Address.AddressLine2") <input type="submit" value="Create" /> </p> </p> <p> </fieldset> <label for="City"> End Using City:</label> @Html.TextBox("Address.City") </p>
  100. 100. DEPURACION DE LA APLICACION
  101. 101. Correr la aplicación Ir al árbol de objetos en Solution Explorer Ubicar el proyecto MVCRunWebCamp. Botón derecho -> Debug -> Start New Instance
  102. 102. Aplicación corriendo
  103. 103. Probar la lista de Customers Colocar en la URL: http://localhost:50000/customer Se debe exhibir la siguiente página: Tabla de clientes
  104. 104. Pase de ID de cliente El hipervinculo Metropolitan Sports Supply apunta a la siguiente URL http://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
  105. 105. 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
  106. 106. http://localhost:50000/Address/Create?CustomerID=5 Rellenar los campos y hacer clic en Create
  107. 107. ¿PREGUNTAS?
  108. 108. ¡MUCHAS GRACIAS! CARLOS PEREZ logica10@gmail.com Logica10mobile.blogspot.com

×