Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Programacin III
CIBERTEC
CARRERAS PROFESIONALES
NDICE
Presentacin
Red de contenidos
Unidad de aprendizaje 1
1.1 Tema 1
1.2 Tema 2
1.3 Tema 3
Unidad de aprendizaje 2
2.1 Tema 4
2.2 Tema 5
2.3 Tema 6
: Vistas
Unidad de aprendizaje 3
3.1 Tema 7
: El patrn Repository
3.2 Tema 8
3.3 Tema 9
: Ajax y Jquery
Unidad de aprendizaje 4
4.1 Tema 10
4.2 Tema 11
4.3 Tema 12
CIBERTEC
CARRERAS PROFESIONALES
CIBERTEC
CARRERAS PROFESIONALES
PRESENTACIN
El curso de Lenguaje de Programacin III pertenece a la Escuela de Tecnologa de
Informacin y se dicta en las carreras de Tecnologa de la institucin. Este curso brinda un
conjunto de herramientas de programacin para trabajar en aplicaciones web, en funcin
al diseo de pginas web y con un origen de datos que permita al alumno realizar, en
forma eficiente, operaciones de consulta y actualizacin de datos bajo el entorno web.
El manual para este curso ha sido diseado bajo la modalidad de unidades de aprendizaje,
las que desarrolla durante semanas determinadas. En cada una de ellas, el alumno hallar
los logros que se deber alcanzar al final de la unidad; el tema tratado, el cual ser
ampliamente desarrollado; y los contenidos que debe desarrollar. Por ltimo, encontrar
las actividades y trabajos prcticos que deber desarrollar en cada sesin, los que le
permitir reforzar lo aprendido en la clase.
El curso es eminentemente prctico. Consiste en diseo y programacin de aplicaciones
web con base de datos utilizando ADO .NET Entity Framework. La primera parte de este
manual ensea a familiarizarse con el entorno de desarrollo de una aplicacin web MVC
4.0: diseo del modelo, uso del Entity Framework Code First, generacin de
mantenimientos con el scafoolding, todo ello mediante ejemplos didcticos. Luego, se
desarrollar el tema de las vistas y controladores, de manera ms detallada,
implementando una solucin ecommerce. Finalmente se implementan mejoras a la
solucin dando una mayor interactividad del lado del cliente con Jquery, Ajax y adopcin
de patrones de software considerados Best Practices.
Este manual reviste importancia para una capacitacin en conocimientos generales en el
manejo de aplicaciones web, utilizando la tecnologa de punta que se implementa
actualmente en el mercado.
CIBERTEC
CARRERAS PROFESIONALES
REDDECONTENIDOS
Diseo de
un sitio web
con MVC
Introduccin
a ASP.Net
4.0
CIBERTEC
Diseo
con
Master
Pages
y
manejo
de
estado
Acceso a
datos con
EF y
seguridad
Control
es de
usuario
Acceso
a datos
con
ADO.N
et y
manejo
de
capas
Manejo de
JQUERY y
AJAX
Manejo
de
WebSe
rvices
y WCF
Manejo
de
control
es de
AJAX
ASP.Net
MVC
Manejo
de
imgene
sy
Proyect
os de
AJAX
AJAX
MVC
(Modelo
Vista
Controlad
or)
CARRERAS PROFESIONALES
UNIDAD DE
APRENDIZAJE
1
Logros de la unidad de aprendizaje
Al trmino de la unidad, los alumnos, utilizando los conceptos explicados en clase, tienen claro
los componentes que forman parte de la arquitectura de la Web y las tecnologas que lo
implementan, adicionalmente se tendr una clara diferenciacin entre ASP.NET Web Form y
MVC, conociendo sus ventajas y desventajas.
Finalmente, con las tcnicas explicadas en clase, estarn en la capacidad de construir
aplicaciones Web orientadas a Datos con MVC, Entity Framework, seguridad con Simple
MembershipProvider e integracin con proveedores de autenticacin externas, tales como
Facebook, Google, etc.
Arquitectura de la Web
Patrn MVC (Modelo Vista Controlador)
ASP.NET MVC 4.0
Scaffolding y Razor
Web Form y MVC
Laboratorio
Resumen
CIBERTEC
CARRERAS PROFESIONALES
Http
Internet
Servidor Web
6
Http-Response
5
Browser
IE
FireFox
Chrome
Opera
Safari, etc.
Tecnologa Web
ASP.NET
PHP
JSF
JSP
Suite Macromedia
Etc.
Respuesta en HTML
Scripts del Cliente
Java Script
Jquery
CIBERTEC
CARRERAS PROFESIONALES
CIBERTEC
CARRERAS PROFESIONALES
10
CIBERTEC
CARRERAS PROFESIONALES
11
Por otro lado el equipo de ASP.NET vio la necesidad de contar con un motor de
renderizado que sea simple, til y que de una mayor interaccin entre el modelo y la vista.
El resultado de esta necesidad es Razor.
ASP.NET Web Pages-Razor proporciona una sintaxis de programacin simple para
escribir cdigo en pginas web donde el cdigo basado en servidor se incrusta en el
formato HTML de las pginas web. El cdigo de Razor se ejecuta en el servidor antes de
que la pgina se enve al explorador. Este cdigo de servidor puede crear dinmicamente
contenido de cliente, es decir, puede generar formato HTML u otro contenido sobre la
marcha y, a continuacin, enviarlo al explorador junto con cualquier cdigo HTML esttico
que contenga la pgina
Finalmente, Razor no es un nuevo lenguaje de programacin, por el contrario se basa en
sintaxis de C# y VB, teniendo como principal objetivo reutilizar el conocimiento de los
programadores de .NET.
En la siguiente figura se muestra un ejemplo de la sintaxis Razor.
CIBERTEC
CARRERAS PROFESIONALES
12
ASP.NET MVC
Ventajas
Desventajas
Ruteo URL y mejor soporte para los
Mayor esfuerzo en el aprendizaje del
motores de bsqueda
framework.
Excelente soporte para el desarrollo de tipo
TDD (Desarrollo orientado al Test)
Mejora en la separacin de conceptos ya
que usa el Modelo, la Vista y el controlador
Fcil manejo en desarrollo con mltiples
equipos.
Total control en el HTML para las vistas
MVC es un framework extensible y es un
proyecto Open Source.
1.6. Laboratorio
2. Vamos a usar el lenguaje C# con la plantilla Web y el tipo de proyecto Aplicacin web
de ASP.NET MVC 4, como nombre de proyecto ponemos MVC01 y una ubicacin
donde se guardar el proyecto, finalmente damos Aceptar
CIBERTEC
CARRERAS PROFESIONALES
13
1
2
4
3. En la opcin de seleccionar plantilla de MVC, elegimos la opcin Bsico y como motor
de vista: Razor y damos click en Aceptar.
CIBERTEC
CARRERAS PROFESIONALES
14
CIBERTEC
CARRERAS PROFESIONALES
15
CIBERTEC
CARRERAS PROFESIONALES
16
7. Dentro del mtodo Index que se crea por defecto, instanciamos un objeto Cliente, este
objeto se devolver a la vista, tal como se muestra:
8. Ahora agregamos la vista, para ello, sobre el mtodo Index del Controlador, hacemos
click derecho y sale la opcin Agregar vista, para este caso, dejamos los valores por
defecto
CIBERTEC
CARRERAS PROFESIONALES
CIBERTEC
17
CARRERAS PROFESIONALES
18
Nota: Tener en cuenta que el MVC crea en la carpeta Views la estructura de carpeta
Cliente, y dentro de la carpeta Cliente un archivo llamado Index.cshtml.
9. En la vista Index que acabamos de crear, en la parte superior, referencia al objeto
Cliente a travs de @model
10. El lenguaje de marcado para crear nuestra vista es Razor, agregamos el siguiente
marcado.
@model Mvc01.Models.Cliente
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<fieldset>
<legend>Cliente</legend>
<div>
<b> @Html.DisplayNameFor(model=>model.ClienteId)</b>
</div>
<div>
@Html.DisplayFor(model=>model.ClienteId)
</div>
<div>
CIBERTEC
CARRERAS PROFESIONALES
19
<b>@Html.DisplayNameFor(model=>model.Apellido)</b>
</div>
<div>
@Html.DisplayFor(model=>model.Apellido)
</div>
<div>
<b> @Html.DisplayNameFor(modelo=>modelo.Nombre)</b>
</div>
<div>
@Html.DisplayFor(modelo=>modelo.Nombre)
</div>
<div>
<b> @Html.DisplayNameFor(modelo=>modelo.Direccion)</b>
</div>
<div>
@Html.DisplayFor(modelo=>modelo.Direccion)
</div>
<div>
<b> @Html.DisplayNameFor(modelo=>modelo.DNI)</b>
</div>
<div>
@Html.DisplayFor(modelo=>modelo.DNI)
</div>
<div>
<b> @Html.DisplayNameFor(modelo=>modelo.FecNac)</b>
</div>
<div>
@Html.DisplayFor(modelo=>modelo.FecNac)
</div>
</fieldset>
11. Finalmente para darle metadata de configuracin, adecuamos la clase Cliente tal como
se muestra:
CIBERTEC
CARRERAS PROFESIONALES
20
1.7. Resumen
El funcionamiento de la Web es posible gracias a una serie de componentes que
interactan entre s, tales como el Web Browser, el protocolo Http, los servidores Web,
las aplicaciones Web, el formato HTML, XML, Json, cdigos scripts en Jquery, etc.
MVC es un patrn de software que nos permite un desarrollo de aplicaciones con una
mayor flexibilidad y eficiencia, haciendo una correcta separacin de conceptos, tales
como el modelo, la vista y el controlador.
CIBERTEC
CARRERAS PROFESIONALES
21
CIBERTEC
CARRERAS PROFESIONALES
22
La siguiente figura muestra las opciones disponibles en Entity Framework para poder
trabajar:
CIBERTEC
CARRERAS PROFESIONALES
23
I
I
I
I
I
I.
II.
III.
CIBERTEC
CARRERAS PROFESIONALES
24
Se puede apreciar que en la clase Amigo hay dos propiedades, Nombre y Edad, en la
propiedad Nombre se indica que debe tener un valor requerido y que la longitud de su valor
es mximo de 50 caracteres, por otro lado la el valor de la propiedad Edad debe estar entre
0 y 120.
2.4 Simple MemberShip en MVC 4.0.
CIBERTEC
CARRERAS PROFESIONALES
25
ASP.NET Membership providers fue mostrado por primera vez con ASP.NET 2.0 en el ao
2005. Su objetivo era facilitar los requerimientos de Membresa, autenticacin, perfiles,
accesos, roles, usuarios, etc.
Su diseo inicial estuvo basado en generar una serie de tablas, procedimientos
almacenados en SQL Server y trabajar con varios controles Web form, mostrando as una
fuerte integracin y automatizacin a la hora de crear las interfaces de usuario para los
mecanismos de autenticacin.
Como muchas tecnologas de Microsoft, traen muchas ventajas y facilidades para el
desarrollo de soluciones de software, pero tambin acarrean una serie de problemas u
opciones poco tiles. Membership no fue la excepcin y uno de los grandes inconvenientes
era su modelo de base de datos, el cual se presenta muy sobrecargado y con algunos
problemas de performance.
Bajo este escenario, el equipo de ASP.NET realiza un rediseo completo de su sistema de
Membresa, dejando las mejores caractersticas y reescribiendo todo lo que en su primer
momento fue desacertado, teniendo como resultado final el Simple MemberShipProvider,
liberado con Visual Studio 2012.
La siguiente figura muestra una comparativa del modelo de base de datos
MemberShipProvider
SimpleMemberShip
CIBERTEC
CARRERAS PROFESIONALES
26
2.5 Laboratorio
2. Vamos a usar el lenguaje C# con la plantilla Web y el tipo de proyecto Aplicacin web
de ASP.NET MVC 4, como nombre de proyecto ponemos VentasMVC y una ubicacin
donde se guardar el proyecto, finalmente damos Aceptar.
CIBERTEC
CARRERAS PROFESIONALES
27
1
2
4
3. En la opcin de seleccionar plantilla de MVC, elegimos la opcin Aplicacin de Internet,
como motor de vista Razor y damos click en Aceptar.
CIBERTEC
CARRERAS PROFESIONALES
28
4. En la carpeta Models agregamos las clases Proveedor, Categora y Producto con las
propiedades que se muestran.
public class Proveedor
{
public int ProveedorId { get; set; }
public string Nombre { get; set; }
public string Direccion { get; set; }
public string Correo { get; set; }
public List<Producto> productos { get; set; }
}
CIBERTEC
CARRERAS PROFESIONALES
using
using
using
using
using
29
System;
System.Collections.Generic;
System.Data.Entity;
System.Linq;
System.Web;
namespace VentasMVC.Models
{
public class MyDataContext:DbContext
{
public DbSet<Producto> listaProducto { get; set; }
public DbSet<Categoria> listaCategoria { get; set; }
public DbSet<Proveedor> listaProveedor { get; set; }
}
}
Nuestras 4 clases creadas deberan estar en la carpeta Models, tal como se muestra:
CIBERTEC
CARRERAS PROFESIONALES
30
7. Llegado a este punto compilamos el proyecto para que se generen los assemblies del
modelo.
8. Ahora agregamos los controladores para la clase Proveedor, Categora y Producto
Para el caso de la clase Proveedor, al nombre del controlador le damos
ProveedorController, en la opcin plantilla elegimos Controlador MVC con acciones de
lectura, escritura y vistas que usa Entity Framework; en la opcin clase modelo
elegimos Proveedor y por ltimo en la opcin de clase de contexto MyDataContext.
Finalmente hacemos click a Agregar
CIBERTEC
CARRERAS PROFESIONALES
31
Repetir la operacin para las clases Categora y Producto, con sus nombres respectivos
9. Scaffolding es una de las caractersticas del framework de MVC que nos genera cdigo
de manera automtica, para este escenario se ha creado la clase controller y las vistas
para las operaciones CRUD, en conjunto con EF ha creado la BD en el servidor, con el
nombre especificado en el Web.Config.
CIBERTEC
CARRERAS PROFESIONALES
32
11. Por defecto, EF genera las tablas con los nombres de las clases pluralizadas, es decir,
mi clase se llama Producto y la tabla se llama Productoes, mi clase se llama Proveedor
y la tabla se llama Proveedors, etc. Si queremos cambiar esa opcin reescribimos el
mtodo OnModelCreating de la clase MyDataContext.
CIBERTEC
CARRERAS PROFESIONALES
33
12. Para que los cambios tenga efecto, borramos la BD y volvemos a ejecutar el proyecto
de Visual Studio.
CIBERTEC
CARRERAS PROFESIONALES
34
[Table("Empleados")]
public class Empleado
{
[Column("EmpleadoId"),Key]
public int Codigo { get; set; }
public string Nombres { get; set; }
public string DNI { get; set; }
[Column("FecNac")]
public DateTime Nacimiento { get; set; }
}
14. Si ejecutamos en este momento nos saldr un error que nos indica que el modelo ha
tenido cambios The model backing the 'MyDataContext' context has changed since
the database was created.
15. Para corregir el error activamos la opcin de migracin de Entity Framework a travs
de la consola del Package Manager
16. Abrimos el Package Manager.
CIBERTEC
CARRERAS PROFESIONALES
35
17. En el promt del Package Manager (PM>) escribimos Enable-Migrations ContextTypeName VentasMVC.Models.MyDataContext , luego de la ejecucin verificar
que se haya creado la carpeta Migrations en el proyecto.
CIBERTEC
CARRERAS PROFESIONALES
36
18. Con el comando anterior la clase MyDataContext est habilitada para poder actualizar
la base de datos. Hay dos modos de actualizacin: Manual y Automtica, empecemos
viendo la opcin Manual, en el prompt del PM> escribimos Add Migration prueba1
enter y luego update-database, de igual manera presionamos enter.
CIBERTEC
CARRERAS PROFESIONALES
37
20. Si no quisiramos escribir los comandos de actualizacin por cada cambio que se hace
al modelo, entonces activamos la actualizacin automtica, para ello en la Clase
Configuration ponemos en el constructor:
AutomaticMigrationsEnabled = true;
Y en el global.asax, agregamos la entrada:
using System.Data.Entity;
using VentasMVC.Migrations;
Esto es en la seccin de los NameSpace y en el evento Application_Start()
Database.SetInitializer(new
MigrateDatabaseToLatestVersion<VentasMVC.Models.MyDataContext,
Configuration>());
21. Con estas opciones configuradas, agregamos una propiedad adicional a la clase
Empleado llamada Direccin y al ejecutar automticamente se debe actualizar la BD.
CIBERTEC
CARRERAS PROFESIONALES
38
Regex: ^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z09]+)*(\\.[A-Za-z]{2,})$
CIBERTEC
CARRERAS PROFESIONALES
39
2. Ejecutamos y vemos que aparecen en las opciones de men, el detalle es que todos
pueden acceder a estas opciones. Si quisiramos restringir el acceso a estas opciones
permitindole solo a un grupo determinado de usuarios una alternativa de solucin,
sera el uso del MemberShipProvider.
3. Agregamos una entrada al connectionString del web config
<add name="DefaultConnection"
connectionString="Server=.;Initial
Catalog=Seguridad;Trusted_connection=yes"
providerName="System.Data.SqlClient" />
CIBERTEC
CARRERAS PROFESIONALES
40
CIBERTEC
CARRERAS PROFESIONALES
41
CIBERTEC
CARRERAS PROFESIONALES
42
CIBERTEC
CARRERAS PROFESIONALES
43
2.6 Resumen
Entity Framework es la tecnologa que proporciona Microsoft para el acceso a datos.
EF nos ofrece mltiples formas de trabajo: podemos partir de la base de datos, del
modelo de dominio o incluso de clases simples conocidas como POCO.
El corazn del EF es la clase DbContext. Esta clase principalmente nos ayuda con las
operaciones CRUD.
Las anotaciones de datos son una forma nueva en ASP.NET para realizar la validacin
de la entrada de datos por parte del usuario, consta de una serie de atributos que se
configuran al modelo, tanto a las clases como a sus propiedades.
SimpleMembership es una herramienta que nos ayuda a simplificar el desarrollo de la
parte de Membresia, autenticacin, acceso, roles, perfiles, etc. SimplemMembership
presenta un modelo simplificado y con integracin a proveedores externos de
autenticacin
CIBERTEC
CARRERAS PROFESIONALES
44
El protocolo OAuth
Proveedores externos para autenticacin en MVC 4
Revisin de la API de Facebook
Laboratorio
Resumen
CIBERTEC
CARRERAS PROFESIONALES
45
//OAuthWebSecurity.RegisterGoogleClient();
}
}
http://facebooksdk.net/
El SDK para Facebook llega con una serie de propiedades mtodos y eventos, tal como se
muestra:
CIBERTEC
DateTimeConvertor
FacebookApiEventArgs
FacebookApiException
FacebookApiLimitException
FacebookBatchParameter
FacebookClient
FacebookMediaObject
FacebookMediaStream
FacebookOAuthException
FacebookOAuthResult
FacebookUploadProgressChangedEventArgs
HttpMethod
HttpWebRequestWrapper
HttpWebResponseWrapper
JsonArray
JsonObject
WebExceptionWrapper
CARRERAS PROFESIONALES
46
Una explicacin detallada de cada elemento del SDK y ejemplos de cdigo se pueden
encontrar en http://facebooksdk.net/docs/reference/SDK/
3.4 Laboratorio
2. Vamos a usar el lenguaje C# con la plantilla Web y el tipo de proyecto Aplicacin web
de ASP.NET MVC 4, como nombre de proyecto ponemos MVCFB y una ubicacin
donde se guardar el proyecto, finalmente damos Aceptar
CIBERTEC
CARRERAS PROFESIONALES
47
1
2
4
3. En la opcin de seleccionar plantilla de MVC, elegimos la opcin Aplicacin de Internet,
como motor de vista Razor y damos click en Aceptar.
CIBERTEC
CARRERAS PROFESIONALES
48
CIBERTEC
CARRERAS PROFESIONALES
49
6. Se deber agregar un nombre para la aplicacin que sea nico (Facebook validar la
unicidad del nombre). Luego damos click en Continuar.
7. Luego llenamos los datos para que nuestro sitio web se autentique con Facebook.
CIBERTEC
CARRERAS PROFESIONALES
50
CIBERTEC
CARRERAS PROFESIONALES
51
11. Debido a que hemos elegido la plantilla Aplicacin de Internet, hay varias pginas que
se han creado por defecto, para probar la autenticacin por Facebook podemos
restringir el acceso a la opcin de men Contacto.
CIBERTEC
CARRERAS PROFESIONALES
52
CIBERTEC
CARRERAS PROFESIONALES
CIBERTEC
53
CARRERAS PROFESIONALES
54
15. Adicionalmente podemos ver que en el servidor SQL se cre la base de datos
SeguridadMVC y se registr el usuario autenticado.
CIBERTEC
CARRERAS PROFESIONALES
55
2. Ahora para que a partir de esta clase se pueda crear la tabla se deber registrar en la
clase UsersContext que hereda de DbContext.
3. Ahora para poder ver el controlador donde se obtiene la informacin enviada por
Facebook, vemos el link
CIBERTEC
CARRERAS PROFESIONALES
Segn la imagen, el
ExternalLoginCallBack
56
controlador
solicitado
Account
el
mtodo
es
CIBERTEC
CARRERAS PROFESIONALES
57
CIBERTEC
CARRERAS PROFESIONALES
58
Nota: Si ya existe base de datos de SeguridadMVC, es probable que salga un error por
desincronizacin del modelo con la base de datos (por la clase InformacionExtra). Para
solucionar el problema tiene dos opciones: borrar la base de datos de seguridad del
SQL Server o activar la migracin en el proyecto (Enable-Migrations)
9. Finalmente, para guardar esa informacin en la base de datos, ubicamos el mtodo
ExternalLoginConfirmation y modificamos el cdigo, tal como se muestra:
CIBERTEC
CARRERAS PROFESIONALES
CIBERTEC
59
CARRERAS PROFESIONALES
60
CIBERTEC
CARRERAS PROFESIONALES
61
CIBERTEC
CARRERAS PROFESIONALES
62
4. Ejecutamos y vemos que el campo verificado de la base de datos est con un valor
diferente de nulo.
CIBERTEC
CARRERAS PROFESIONALES
63
3.5 Resumen
El protocolo OAuth (Open Authorization) es un estndar de internet que permite
compartir informacin de una entidad sin necesidad de brindar informacin de
credenciales por parte de la entidad. Este protocolo, hoy en da, es utilizado para la
mayora de redes sociales tales como Facebook, Twitter, etc.
ASP.NET MVC 4 trae un modelo de programacin bastante rpido y sencillo de usar
para la utilizacin de los proveedores de autenticacin basados en OAuth. Los
proyectos de MVC tienen incorporada una clase llamada AuthConfig donde estn los
parmetros de configuracin para rpidamente integrarse con estos proveedores.
Una de las redes sociales de mayor impacto hoy es Facebook. En ASP.NET MVC hay
un SDK que nos facilita el desarrollo e integracin de nuestras aplicaciones con esta
red social.
CIBERTEC
CARRERAS PROFESIONALES
64
UNIDAD DE
APRENDIZAJE
2
Logros de la unidad de aprendizaje
Al trmino de la unidad, los alumnos, utilizando las tcnicas explicadas en clase, podrn
desarrollar aplicaciones empresariales orientadas al e-commerce, considerando la exploracin
de catlogos en lnea, manejo de un carrito de compras y el proceso final de Checkout.
Para definir una expresin lambda se usa el llamado operador lambda (=>)
A la izquierda de este operador se indicarn las variables o parmetros de la funcin
annima.
A la derecha del operador indicaremos el cdigo de la funcin (la expresin o bloque de
instrucciones).
Las expresiones lambda son bastante usadas en consultas de LINQ basadas en mtodos
como argumentos de los mtodos de operador de consulta estndar, tales como Where.
Al escribir expresiones lambda, no tiene por qu especificar un tipo para los parmetros de
entrada, ya que el compilador puede deducir el tipo segn el cuerpo de la lambda, el tipo
de delegado subyacente y otros factores que se describen en la especificacin del lenguaje
C#. Para la mayora de los operadores de consulta estndar, la primera entrada es el tipo
de los elementos en la secuencia de origen. As, si est realizando una consulta sobre un
IEnumerable<Customer>, se deducir que la variable de entrada ser un objeto Customer,
lo cual significa que se podr tener acceso a sus mtodos y propiedades
Ejem:
IEnumerable<Customer> customers;
customers.Where(c => c.City == "London");
//La variable de entrada c es de tipo customer
Tambin puede proporcionar una expresin lambda cuando el tipo de argumento es
Expression<Func>, por ejemplo, en los operadores de consulta estndar que se definen en
CIBERTEC
CARRERAS PROFESIONALES
65
Single
Skip
Take
Any
CIBERTEC
Descripcin
Devuelve solo un
elemento que satisfice
la condicin o un valor
por
default,
este
mtodo emitir una
exception si existe
ms de un element
que
satisface
la
condicin
Devuelve solo un
elemento
que
satisface la condicin
, este mtodo emitir
una
exception
si
existe ms de un
element que satisfice
la condicin o si
ningn
elemento
satisface la condicin
Omite un numero
especifico
de
elementos y devuelve
los
elementos
restantes
Ejemplo
MyDataContext MyDB=new MyDataContext();
var item =
MyDB.listaCart.SingleOrDefault(c =>
c.Identificador == ShoppingCartId && c.AlbumId
== album.AlbumId);
Devuelve
un
especifico nmero de
elementos contiguos
desde un punto de
inicio,
en
una
coleccin
o
secuencia, es anlogo
al operador TOP de
SQL
Devuelve un valor
bool
indicando
si
algn elemento de
una
determinada
Pet[] pets =
IEnumerable<int> topThreeGrades =
grades.AsQueryable().OrderByDescending(grade
=> grade).Take(3);
/*Resultado
98 92 85
*/
CARRERAS PROFESIONALES
coleccin, satisface la
condicin
66
Vaccinated=false },
new Pet { Name="Whiskers",
Age=1, Vaccinated=false } };
bool unvaccinated =
pets.AsQueryable().Any(p => p.Age
> 1 && p.Vaccinated == false);
http://msdn.microsoft.com/en-us/library/system.linq.queryable_methods.aspx
4.2 Laboratorio
El laboratorio del Carrito de compras con MVC 4.0 abarca los conceptos que se han
tratado en las unidades anteriores, tales como Entity Framework, DbContext, Scaffold y
este captulo de Expresiones Lambda, para el desarrollo de este laboratorio por favor
refirase al laboratorio del captulo VI VISTAS
4.3 Resumen
Una expresin lambda es una funcin annima que se puede utilizar para crear
delegados o tipos de rbol de expresin.
Las expresiones Lambda nos facilita enormemente la manipulacin de colecciones,
haciendo operaciones en una sola expresin y que antes de ello se hubiera tenido que
recurrir a la creacin de procedimiento especializados.
Las expresiones Lambda son muy utilizadas tambin con los operadores estndares
definidos en LINQ, tales como Count, Skip, Take, Single, etc. esto nos ayuda ms aun
con el tratamiento de colecciones de objetos.
CIBERTEC
CARRERAS PROFESIONALES
67
5. EL LENGUAJE RAZOR
TEMARIO
CIBERTEC
CARRERAS PROFESIONALES
68
Combinar Razor con los Html Helpers nos ayuda a crear de manera rpida y sencilla el
cdigo e incluso acceder a datos que no necesariamente vienen del controlador, tal como
se muestra:
@{
var items = new List<SelectListItem>{
new SelectListItem {Value = "1", Text
new SelectListItem {Value = "2", Text
new SelectListItem {Value = "3", Text
new SelectListItem {Value = "4", Text
new SelectListItem {Value = "5", Text
};
=
=
=
=
=
"Blue"},
"Red"},
"Green", Selected = true},
"Yellow", Selected = true},
"Black"}
}
@Html.ListBox("myListbox", items, null, 6, true)
@{
var db = Database.Open("Northwind");
var data = db.Query("SELECT CategoryId, CategoryName FROM Categories");
var items = data.Select(i => new SelectListItem {
Value = i.CategoryId.ToString(),
Text = i.CategoryName,
Selected = i.CategoryId == 4 ? true : false
});
}
@Html.DropDownList("CategoryId", items)
@{
var db = Database.Open("Northwind");
var data = db.Query("SELECT CategoryId, CategoryName FROM Categories");
var items = data.Select(i => new SelectListItem {
Value = i.CategoryId.ToString(),
Text = i.CategoryName
});
}
@Html.DropDownList("CategoryId", "Please Select One", items, 4, new {@class
= "special"})
CIBERTEC
CARRERAS PROFESIONALES
69
HTML Element
Html.CheckBox
Html.ActionLink
Html.DropDownList
Html.Hidden
Html.Label
Html.ListBox
Html.Password
Html.Radio
Html.TextArea
Html.TextBox
A continuacin, mostramos una comparativa de cdigo creado con los HTML Helpers de
Razor y su equivalencia en HTML
HTML Helper Razor
HTML renderizado
<form method="post">
First Name:
@Html.TextBox("firstname")<br />
Last Name:
@Html.TextBox("lastname",
Request["lastname"])<br />
<form method="post">
First Name: <input
id="firstname" name="firstname"
type="text" value="" /><br />
Last Name: <input id="lastname"
name="lastname" type="text" value=""
CIBERTEC
CARRERAS PROFESIONALES
Town: @Html.TextBox("town",
Request["town"], new
Dictionary<string, object>(){{
"class", "special" }})<br />
Country: @Html.TextBox("country",
Request["country"], new { size = 50
})<br />
<input type="submit" />
</form>
70
/><br />
Town: <input id="town"
name="town" class="special"
type="text" value="" /><br />
Country: <input id="country"
name="country" size="50" type="text"
value="" /><br />
<input type="submit" />
</form>
5.3 Laboratorio
El laboratorio del Carrito de compras con MVC 4.0 abarca los conceptos que se han
tratado en las unidades anteriores, tales como Entity Framework, DbContext, Scaffold,
expresiones Lambdas y este captulo del Lenguaje Razor, para el desarrollo de este
laboratorio por favor refirase al laboratorio del captulo VI VISTAS
5.4 Resumen
Razor es el nuevo motor de renderizado incluido en ASP.NET que trabaja tanto con
WebForm as como tambin MVC.
Tener en cuenta que los motores de renderizado son los responsables de generar el cdigo
HTML en el servidor Web, para luego enviarlo al cliente web solicitante.
Razor no es nuevo lenguaje de programacin, uno de los principales objetivos de diseo
fue la de combinar el conocimiento de programacin (C#, VB) con el conocimiento de
HTML.
La combinacin de Razor con los HTML Helpers nos ayudan a construir pginas web
dinmicas, de una manera ms sencilla y rpida.
CIBERTEC
CARRERAS PROFESIONALES
71
6. VISTAS
TEMARIO
Una pgina de vista es una instancia de la clase ViewPage. Hereda de la clase Page e
implementa la interfaz IViewDataContainer. La clase ViewPage define una propiedad
ViewData que devuelve un objeto ViewDataDictionary. Esta propiedad puede ser utilizada
para enviar datos a la vista desde el controlador.
En el modelo Model-View-Controller (MVC), las vistas estn pensadas exclusivamente para
encapsular la lgica de presentacin. No deben contener lgica de aplicacin ni cdigo de
recuperacin de base de datos (aun sabiendo que tcnicamente es posible). El controlador
debe administrar toda la lgica de aplicacin. Una vista representa la interfaz de usuario
adecuada usando los datos que recibe del controlador. Estos datos se pasan a una vista
desde un mtodo de accin de controlador usando el mtodo View.
Igual que las pginas ASP.NET en aplicaciones basadas en formularios Web Forms, las
vistas de pgina de ASP.NET (archivos .aspx) pueden usar pginas maestras para definir
un diseo y una estructura coherentes. En un sitio tpico, la pgina maestra se enlaza a
una pgina de contenido en la directiva @ Page de la pgina de contenido. Tambin en
MVC se definen pginas maestras; en las plantillas de proyecto de MVC se crea por default
un element denominado _Layout dentro de la carpeta View/Shared
CIBERTEC
CARRERAS PROFESIONALES
72
CIBERTEC
CARRERAS PROFESIONALES
73
6.4 Laboratorio
2. Vamos a usar el lenguaje C# con la plantilla Web y el tipo de proyecto Aplicacin web
de ASP.NET MVC 4, como nombre de proyecto ponemos CarritoMVC y una ubicacin
donde se guardar el proyecto, finalmente damos Aceptar.
CIBERTEC
CARRERAS PROFESIONALES
74
1
2
3
4
3. En la opcin de seleccionar plantilla de MVC, elegimos la opcin Aplicacin de Internet,
como motor de vista Razor y damos click en Aceptar.
CIBERTEC
CARRERAS PROFESIONALES
75
CIBERTEC
CARRERAS PROFESIONALES
76
6. Actualizamos el diseo de la web, con los recursos que vienen incluidos en la gua, a la
seccin Content del proyecto, tal como se muestra:
CIBERTEC
CARRERAS PROFESIONALES
77
CIBERTEC
CARRERAS PROFESIONALES
78
CIBERTEC
CARRERAS PROFESIONALES
79
9. Al mtodo Index, agregamos su vista, hacemos click derecho sobre el mtodo Index y
elegimos la opcin Agregar Vista, tal como se muestra:
CIBERTEC
CARRERAS PROFESIONALES
80
CIBERTEC
CARRERAS PROFESIONALES
81
11. Ejecutamos y cuando se cree nuestra BD, agregamos ciertos datos a la tabla Gnero.
12. Actualizamos la vista Index para que la lista de Gneros sean un hiperlink hacia los
lbumes asociados al gnero.
CIBERTEC
CARRERAS PROFESIONALES
82
15. Agregamos el cdigo Razor para mostrar los lbumes del gnero elegido y creamos el
mtodo Detalle de la clase TiendaController.
CIBERTEC
CARRERAS PROFESIONALES
83
|
16. Generamos la vista para el controlador Detalle.
CIBERTEC
CARRERAS PROFESIONALES
84
18. Ahora agregamos nuestra clase de negocio ShoppingCart donde se implementar las
opciones de agregar tems, quitar tems, obtener total, limpiar tems, etc. En nuestro
folder Models agregamos la clase ShoppingCart.cs con el siguiente cdigo
namespace CarritoMVC.Models
{
public class ShoppingCart
{
string ShoppingCartId { get; set; }
public static ShoppingCart ObtenerCart(HttpContextBase context)
{
ShoppingCart obj = new ShoppingCart();
if (context.Session["IdCart"]==null)
{
if (!String.IsNullOrEmpty(context.User.Identity.Name))
{
context.Session["IdCart"] =
context.User.Identity.Name;
}
else
{
context.Session["IdCart"] = Guid.NewGuid().ToString();
}
}
obj.ShoppingCartId = context.Session["IdCart"].ToString();
return obj;
}
public void AgregarItem(Album album)
CIBERTEC
CARRERAS PROFESIONALES
85
{
MyDataContext MyDB=new MyDataContext();
var item = MyDB.listaCart.SingleOrDefault(c => c.Identificador
== ShoppingCartId && c.AlbumId == album.AlbumId);
if (item != null)
{
item.Cantidad++;
}
else
{
item = new Cart
{
Identificador = ShoppingCartId,
Cantidad = 1,
AlbumId = album.AlbumId,
Fecha = DateTime.Now
};
MyDB.listaCart.Add(item);
}
MyDB.SaveChanges();
}
public int QuitarItem(int id)
{
MyDataContext MyDB=new MyDataContext();
var item = MyDB.listaCart.SingleOrDefault(c => c.Identificador
== ShoppingCartId && c.ID == id);
int cantidad = 0;
if (item.Cantidad > 1)
{
item.Cantidad--;
cantidad = item.Cantidad;
}
else
{
MyDB.listaCart.Remove(item);
}
MyDB.SaveChanges();
return cantidad;
}
public void LimpiarItems()
{
MyDataContext MyDB = new MyDataContext();
var items = MyDB.listaCart.Where(c => c.Identificador ==
ShoppingCartId);
foreach (var c in items)
{
MyDB.listaCart.Remove(c);
}
MyDB.SaveChanges();
}
public List<Cart> ObtenerItems()
{
MyDataContext MyDB=new MyDataContext();
var items=
MyDB.listaCart.Where(c=>c.Identificador==ShoppingCartId);
return items.ToList();
}
public decimal ObtenerTotal()
{
MyDataContext MyDB = new MyDataContext();
CIBERTEC
CARRERAS PROFESIONALES
86
19. Adicionalmente creamos la carpeta ViewModels para almacenar las clases tipadas para
las vistas del ShoppingCart
CIBERTEC
CARRERAS PROFESIONALES
87
namespace CarritoMVC.ViewModels
{
public class ShoppingCartRemoveViewModel
{
public string Mensaje { get; set; }
public decimal Total { get; set; }
public int CantidadTotal { get; set; }
public int CantidadItem { get; set; }
public int IdItem { get; set; }
}
CIBERTEC
CARRERAS PROFESIONALES
88
System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Web.Mvc;
CarritoMVC.Models;
CarritoMVC.ViewModels;
namespace CarritoMVC.Controllers
{
public class ShoppingCartController : Controller
{
CIBERTEC
CARRERAS PROFESIONALES
89
//
// GET: /ShoppingCart/
public ActionResult Index()
{
ShoppingCart carrito =
ShoppingCart.ObtenerCart(this.HttpContext);
var viewModel = new ShoppingCartViewModel
{
Items = carrito.ObtenerItems(),
Total = carrito.ObtenerTotal()
};
return View(viewModel);
}
public ActionResult Agregar(int id)
{
MyDataContext MyDB = new MyDataContext();
var item = MyDB.listaAlbum.Single(a => a.AlbumId == id);
var carrito = ShoppingCart.ObtenerCart(HttpContext);
carrito.AgregarItem(item);
return RedirectToAction("Index");
}
[HttpPost]
public ActionResult Quitar(int id)
{
MyDataContext MyDB = new MyDataContext();
string nombreAlbum = MyDB.listaCart.Single(c => c.CartId ==
id).album.Nombre;
var carrito = ShoppingCart.ObtenerCart(HttpContext);
int cantidadItem= carrito.QuitarItem(id);
var viewModel = new ShoppingCartRemoveViewModel
{
Mensaje = nombreAlbum + " ha sido quitado de su
compra",
Total = carrito.ObtenerTotal(),
CantidadTotal = carrito.ObtenerCantidad(),
CantidadItem = cantidadItem,
IdItem = id
};
return Json(viewModel);
}
[ChildActionOnly]
public ActionResult Resumen()
{
var carrito = ShoppingCart.ObtenerCart(HttpContext);
ViewData["Resumen"] = carrito.ObtenerCantidad();
return PartialView("Resumen");
}
}
}
CIBERTEC
CARRERAS PROFESIONALES
90
24. Agregamos el cdigo para la vista, para quitar tems del carrito usaremos Jquery con
Ajax.
@model CarritoMVC.ViewModels.ShoppingCartViewModel
@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$(".RemoveLink").click(
function () {
var recordToDelete = $(this).attr("data-id");
if (recordToDelete != '') {
$.post("/ShoppingCart/Quitar",{"id":recordToDelete},
CIBERTEC
CARRERAS PROFESIONALES
91
function (data) {
if (data.CantidadItem == 0) {
$('#row-' +
data.IdItem).fadeOut('slow');
}
else {
$('#item-count-' +
data.IdItem).text(data. CantidadItem);
}
$('#cart-total').text(data.Total);
$('#update-message').text(data.Mensaje);
}
);
}
}
);
}
);
</script>
<h3><em>Revisa</em> tu compra:</h3>
<p class="button">
@Html.ActionLink("Checkout>>","RegistroyPago","Checkout")
</p>
<div id="update-message"></div>
<table>
<tr>
<th>
Album
</th>
<th>
Precio
</th>
<th>
Cantidad
</th>
<th></th>
</tr>
@foreach (var item in Model.Items)
{
<tr id="row-@item.ID">
<td>
@Html.ActionLink(item.album.Nombre,"Detalle","Tienda",new
{id=item.AlbumId})
</td>
<td>
@item.album.Precio
</td>
<td id="item-count-@item.ID">
@item.Cantidad
</td>
<td>
<a href="#" data-id="@item.ID" class="RemoveLink">Borrar</a>
</td>
</tr>
}
<tr>
<td>Total</td>
<td></td>
<td></td>
CIBERTEC
CARRERAS PROFESIONALES
92
<td id=cart-total>@Model.Total</td>
</tr>
</table>
26. Antes de hacer la lgica para el Checkout, verificamos que el usuario est autenticado.
Debemos actualizar el identificador del carrito, para ello, en la clase AccountController
creamos el mtodo ActualizarIdentificador y luego lo llamamos de los mtodos Login y
Register, tal como se muestra:
CIBERTEC
CARRERAS PROFESIONALES
93
27. El proceso de checkout requiere que el usuario est autenticado, en este proyecto
vamos a utilizar el MemberShipProvider y vamos a crear una base de datos para la
Seguridad llamada CarritoSeguridad, para ello cambiamos el Web.Config, luego
creamos el checkout Controller usando un template vaco (vamos a la carpeta
Controller click derecho- Agregar Controlador y le llamamos CheckoutController)
finalmente decoramos la clase para que se autorice el uso a los usuarios autenticados.
CIBERTEC
CARRERAS PROFESIONALES
94
System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Web.Mvc;
CarritoMVC.Models;
namespace CarritoMVC.Controllers
{
[Authorize]
public class CheckOutController : Controller
{
//
// GET: /CheckOut/
const string codigoPromocion = "FREE";
public ActionResult RegistroyPago()
{
return View();
CIBERTEC
CARRERAS PROFESIONALES
95
}
[HttpPost]
public ActionResult RegistroyPago(FormCollection values)
{
var orden = new Orden();
TryUpdateModel(orden);
try
{
if (string.Equals(codigoPromocion,
values["codigoPromocion"], StringComparison.OrdinalIgnoreCase) ==
false)
{
return View(orden);
}
else
{
MyDataContext MyDB = new MyDataContext();
orden.Usuario = User.Identity.Name;
orden.Fecha = DateTime.Now;
MyDB.listaOrden.Add(orden);
MyDB.SaveChanges();
var carrito =
ShoppingCart.ObtenerCart(HttpContext);
carrito.CrearOrden(orden);
return RedirectToAction("Completado", new { id =
orden.OrdenId });
}
}
catch
{
return View(orden);
}
}
public ActionResult Completado(int id)
{
MyDataContext MyDB = new MyDataContext();
bool EsValido = MyDB.listaOrden.Any(o => o.OrdenId == id &&
o.Usuario == User.Identity.Name);
if (EsValido)
{
return View(id);
}
else
{
return View("Error");
}
}
}
}
29. Ahora, agregamos la vista para el mtodo RegistroyPago con la opcin de Scaffold
editar, tal como se muestra:
CIBERTEC
CARRERAS PROFESIONALES
96
31. En la clase Orden de la carpeta Models, excluimos del scaffold los campos OrdenId,
Usuario, Total y Fecha, ya que estos valores son configurados internamente.
CIBERTEC
CARRERAS PROFESIONALES
97
CIBERTEC
CARRERAS PROFESIONALES
98
35. Ahora creamos un men de gneros con vistas parciales, para ello en la clase
TiendaController creamos el mtodo MenuGeneros tal como se muestra:
CIBERTEC
CARRERAS PROFESIONALES
99
@model IEnumerable<CarritoMVC.Models.Genero>
<ul id="categories">
@foreach (var g in Model)
{
<li>@Html.ActionLink(g.Descripcion,"ListaAlbum","Tienda",new
{genero=g.Descripcion},null)</li>
}
</ul>
CIBERTEC
CARRERAS PROFESIONALES
100
<div id="main">
@RenderBody()
</div>
<div id="footer">
Construido con MVC 4.0
</div>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
40. Ejecutamos
CIBERTEC
CARRERAS PROFESIONALES
101
6.5 Resumen
Las vistas son las responsables de procesar la interfaz de usuario, con ayuda de Razor
generarn el HTML que se enviar al cliente Web.
_Layout sirve para generar lo que en Web Form se conoce como paginas maestras,
plantillas que sirven como base de diseo del site.
Las vistas parciales son objetos de vista que pueden incluirse dentro de otras vistas. En
comparacin con Web Form, las vistas parciales serian homlogas de los controles ascx.
El patrn ViewModel tiene como objetivo dar soporte a las necesidades de informacin de
las vistas cuando las clases del modelo no satisfacen el requerimiento de informacin para
la pgina.
CIBERTEC
CARRERAS PROFESIONALES
102
UNIDAD DE
APRENDIZAJE
3
Logros de la unidad de aprendizaje
Al trmino de la unidad, los alumnos, utilizando las tcnicas explicadas en clase implementarn
desarrollos de aplicaciones Web, considerando las mejores practicas de arquitectura de
Software, uso de patrones, etc.
Adicionalmente mejorarn la experiencia de usuario, agregando un mayor dinamismo e
interaccin de la pgina a travs de lenguajes de script (Jquery) y tecnologas de solicitud
asncronas (Ajax).
7. EL WEBGRID CONTROL
TEMARIO
Tipo
Source
columnNames
IEnumerable<string>
defaultSort
String
rowsPerPage
Int
CIBERTEC
Comentario
CARRERAS PROFESIONALES
103
canPage
Bool
canSort
Bool
ajaxUpdateContainerId String
Tipo
Comentario
tableStyle
String
headerStyle
String
footerStyle
String
rowStyle
String
alternatingRowStyle String
selectedRowStyle
String
Caption
String
displayHeader
Bool
Columns
exclusions
IEnumerable<string>
firstText
String
previousText
String
nextText
String
lastText
String
7.3 Laboratorio
CIBERTEC
CARRERAS PROFESIONALES
104
2. Vamos a usar el lenguaje C# con la plantilla Web y el tipo de proyecto Aplicacin web
de ASP.NET MVC 4, como nombre de proyecto ponemos LabWebGrid y una ubicacin
donde se guardar el proyecto. Finalmente damos Aceptar.
1
2
4
3. En la opcin de seleccionar plantilla de MVC, elegimos la opcin Aplicacin de Internet,
como motor de vista Razor y damos click en Aceptar.
CIBERTEC
CARRERAS PROFESIONALES
105
4. En esta gua vamos a trabajar con el modelo EF que se crea a partir de una base de
datos existente (Northwind). Para ello, sobre la carpeta Model, hacemos click derechoAgregar Nuevo elemento; y en el cuadro de dialogo, en la seccin Datos, elegimos
ADO.NET Entity Data Model y le damos como nombre Modelo.edmx; finalmente, click
en Agregar, tal como se muestra:
CIBERTEC
CARRERAS PROFESIONALES
106
2
1
3
4
5. La siguiente pantalla nos indica si vamos a crear el modelo a partir de una base de
datos, o si se crea a partir de un modelo vaco. Para este escenario elegimos la opcin
Generar desde la base de datos y hacemos click en siguiente.
CIBERTEC
CARRERAS PROFESIONALES
107
6. La siguiente pantalla nos pide configurar la conexin a la base de datos. Hacemos click
en Nueva conexin y en el siguiente cuadro de dilogo llenamos los datos que se
muestran en la figura, para conectarnos a Northwind.
CIBERTEC
CARRERAS PROFESIONALES
108
CIBERTEC
CARRERAS PROFESIONALES
109
8. Los pasos anteriores nos ayudaron a crear nuestro modelo. eEn este escenario se ha
construido el modelo a partir de una base de datos existentes. Ahora procedemos a
crear el controlador.
Sobre la carpeta Controller hacemos click derecho Agregar-Controlador y en el cuadro
de dialogo damos como Nombre del controlador ProductoController, tal como se
muestra:
CIBERTEC
CARRERAS PROFESIONALES
110
System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Web.Mvc;
LabWebGrid.Models;
namespace LabWebGrid.Controllers
{
public class ProductoController : Controller
{
//
// GET: /Producto/
public ActionResult Index()
{
NorthwindEntities MyDB = new NorthwindEntities();
CIBERTEC
CARRERAS PROFESIONALES
111
return View(MyDB.Products.ToList());
}
}
}
10. Ahora creamos la Vista para el mtodo Index. Para ello sobre el mtodo Index
hacemos click derecho Agregar Vista y creamos una vista fuertemente tipada, tal como
se muestra:
CIBERTEC
CARRERAS PROFESIONALES
112
11. Luego, modificamos la vista para que el modelo se una coleccin (IEnumerable) e
instanciamos el objeto WebGrid para poder mostrar un listado de productos, tal como
se muestra:
@model IEnumerable<LabWebGrid.Models.Product>
@{
ViewBag.Title = "Index";
WebGrid wg = new WebGrid(Model);
}
<h2>Lista de Productos</h2>
@wg.GetHtml()
CIBERTEC
CARRERAS PROFESIONALES
113
CIBERTEC
CARRERAS PROFESIONALES
114
2. Vemos que podemos controlar las columnas que deseamos mostrar, adicionalmente
tambin podemos modificar el encabezado de cada columna. Por defecto el
encabezado muestra el nombre de la propiedad del clase (Product), para ello usamos
el parmetro Header, tal como se muestra:
@model IEnumerable<LabWebGrid.Models.Product>
@{
ViewBag.Title = "Index";
WebGrid wg = new WebGrid(Model);
}
<h2>Lista de Productos</h2>
@wg.GetHtml(
columns: new []{
wg.Column("ProductId",header:"ID"),
wg.Column("ProductName",header:"Producto"),
wg.Column("UnitPrice",header:"Precio"),
wg.Column("Discontinued",header:"Devaluado")
}
)
CIBERTEC
CARRERAS PROFESIONALES
115
3. Tambin podemos dar formato a cada campo de la lista con el parmetro format: En
este caso vamos a hacer que el campo Producto sea un hiperlink, formateamos a dos
decimales el campo precio, y mostraremos un checkbox para el campo Descontinuado,
tal como se muestra:
@model IEnumerable<LabWebGrid.Models.Product>
@{
ViewBag.Title = "Index";
WebGrid wg = new WebGrid(Model);
}
<h2>Lista de Productos</h2>
@wg.GetHtml(
columns: new []{
wg.Column("ProductId",header:"ID"),
wg.Column("ProductName",header:"Producto",format:(item)=>Html.ActionLink((
string)item.ProductName,"","") ),
wg.Column("UnitPrice",header:"Precio",format:(item)=>item.UnitPrice.ToStri
ng("0.00")),
wg.Column("Discontinued",header:"Devaluado",format:(item)=>Html.CheckBox((
string)item.ProductName,(bool)item.Discontinued))
}
)
CIBERTEC
CARRERAS PROFESIONALES
116
CIBERTEC
CARRERAS PROFESIONALES
117
5. WebGrid, por defecto, implementa la paginacin y permite la ordenacin por todas las
columnas. Esta configuracin puede ser modificada, en este caso vamos hacer que no
se permita la ordenacin por el campo ProductID y por el campo Discontinued,
utilizando el atributo CantSort.
@model IEnumerable<LabWebGrid.Models.Product>
@{
ViewBag.Title = "Index";
WebGrid wg = new WebGrid(Model);
}
<h2>Lista de Productos</h2>
@wg.GetHtml(
columns: new []{
wg.Column("ProductId",header:"ID",canSort:false),
wg.Column("ProductName",header:"Producto",format:(item)=>Html.ActionLin
k((string)item.ProductName,"","") ),
wg.Column("UnitPrice",header:"Precio",format:(item)=>item.UnitPrice.ToS
tring("0.00")),
wg.Column("Discontinued",header:"Devaluado",format:(item)=>Html.CheckBo
x((string)item.ProductName,(bool)item.Discontinued),canSort:false),
wg.Column("",header:"Acciones",format:@<text>
@Html.ActionLink("Editar","","")
@Html.ActionLink("Eliminar","","")
</text>)
}
)
6. Hasta este momento hemos vistos personalizaciones a nivel de columna, ahora vamos
a realizar dos configuraciones a nivel del Grid, por defecto WebGrid pgina a 10
CIBERTEC
CARRERAS PROFESIONALES
118
Filtros y bsquedas
CIBERTEC
CARRERAS PROFESIONALES
119
1. Terminamos esta gua implementando una bsqueda por Nombre de producto. Para
ello, en el archivo Index.cshtml de la carpeta Views/Producto agregamos el html (las
seccin FieldSet) para mostrar un cuadro de texto y el botn buscar.
@model IEnumerable<LabWebGrid.Models.Product>
@{
ViewBag.Title = "Index";
WebGrid wg = new WebGrid(Model,rowsPerPage:5);
}
<h2>Lista de Productos</h2>
@using(@Html.BeginForm("Index","Producto",FormMethod.Get))
{
<fieldset>
<legend>Buscar</legend>
@Html.Label("lblProducto","Producto:")
@Html.TextBox("producto")
<input type="submit" value="Buscar" />
</fieldset>
}
@wg.GetHtml(
alternatingRowStyle:"FilaAlterna",
columns: new []{
wg.Column("ProductId",header:"ID",canSort:false),
wg.Column("ProductName",header:"Producto",format:(item)=>Html.ActionLin
k((string)item.ProductName,"","") ),
wg.Column("UnitPrice",header:"Precio",format:(item)=>item.UnitPrice.ToS
tring("0.00")),
wg.Column("Discontinued",header:"Devaluado",format:(item)=>Html.CheckBo
x((string)item.ProductName,(bool)item.Discontinued),canSort:false),
wg.Column("",header:"Acciones",format:@<text>
@Html.ActionLink("Editar","","")
@Html.ActionLink("Eliminar","","")
</text>)
}
)
System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Web.Mvc;
LabWebGrid.Models;
namespace LabWebGrid.Controllers
{
public class ProductoController : Controller
{
//
// GET: /Producto/
CIBERTEC
CARRERAS PROFESIONALES
120
3. Ejecutamos (F5)
7.4 Resumen
Una manera fcil de poder representar informacin tabular en la pgina cliente se puede
dar al utilizar el control WebGrid.
El control WebGrid est disponible desde la versin 3 de MVC y adems permite
personalizar completamente la presentacin de la informacin, formateando la data,
especificando las columnas, cambiando textos de cabecera, integrndose con los CSSs,
etc.
El control WebGrid tambin nos ayuda a generar de manera automtica las opciones de
paginacin y ordenacin de las filas a mostrar.
CIBERTEC
CARRERAS PROFESIONALES
121
El patrn IoC
Implementaciones del IoC: Dependency Injection (DI)
Laboratorio
Resumen
CIBERTEC
CARRERAS PROFESIONALES
122
Una manera de inyectar las dependencias es utilizando un constructor con parmetros del
objeto dependiente. ste constructor recibe las dependencias como parmetros y las
establece en los atributos del objeto.
Considerando un diseo de dos capas donde tenemos una capa de BusinessFacade y otra
de BusinessLogic. La capa BusinessFacade depende de la BusinessLogic para operar
correctamente. Todas las clases de lgica de negocio implementan la interface
IBusinessLogic.
En la inyeccin basada en un constructor, se crear una instancia de BusinessFacade
usando un constructor parametrizado al cual se le pasar una referencia de un
IBusinessLogic para poder inyectar la dependencia.
Finalmente, la inyeccin de dependencias no debera usarse siempre que una clase
dependa de otra, ms bien es efectivo en situaciones especficas como las siguientes:
Inyectar datos de configuracin en un componente.
Inyectar la misma dependencia en varios componentes.
Inyectar diferentes implementaciones de la misma dependencia.
Inyectar la misma implementacin en varias configuraciones
Se necesitan alguno de los servicios provistos por un contenedor.
La IoC no es necesaria si uno va a utilizar siempre la misma implementacin de una
dependencia o la misma configuracin, o al menos, no reportar grandes beneficios en
estos casos.
8.3 Laboratorio
CIBERTEC
CARRERAS PROFESIONALES
123
2. Vamos a usar el lenguaje C# con la plantilla Web y el tipo de proyecto Aplicacin web
de ASP.NET MVC 4, como nombre de proyecto ponemos DI y una ubicacin donde se
guardar el proyecto, finalmente damos Aceptar
CIBERTEC
CARRERAS PROFESIONALES
124
1
2
4
3. En la opcin de seleccionar plantilla de MVC, elegimos la opcin Aplicacin de Internet,
como motor de vista Razor y damos click en Aceptar.
CIBERTEC
CARRERAS PROFESIONALES
125
CIBERTEC
CARRERAS PROFESIONALES
126
2
1
4
3
5. La siguiente pantalla nos indica si vamos a crear el modelo a partir de una base de
datos, o si se crea a partir de un modelo vaco, para este escenario elegimos la opcin
Generar desde la base de datos y hacemos click en siguiente.
6. La siguiente pantalla nos pide configurar la conexin a la base de datos. Hacemos click
en Nueva conexin y en el siguiente cuadro de dilogo llenamos los datos que se
muestra en la figura para conectarnos a Northwind.
CIBERTEC
CARRERAS PROFESIONALES
127
CIBERTEC
CARRERAS PROFESIONALES
128
CIBERTEC
CARRERAS PROFESIONALES
CIBERTEC
129
CARRERAS PROFESIONALES
130
8. Los pasos anteriores nos ayudaron a crear nuestro modelo. En este escenario se ha
construido el modelo a partir de una base de datos existentes, ahora procedemos a
crear el controlador.
Sobre la carpeta Controller hacemos click derecho Agregar-Controlador y en el cuadro
de dialogo damos como Nombre del controlador ClienteController, tal como se
muestra:
CIBERTEC
CARRERAS PROFESIONALES
131
10. Ahora creamos la Vista para el mtodo Index. Para ello, sobre el mtodo Index
hacemos click derecho Agregar Vista y creamos una vista fuertemente tipada, tal como
se muestra:
CIBERTEC
CARRERAS PROFESIONALES
132
11. Luego, modificamos la vista para que el modelo se una coleccin (IEnumerable) e
instanciamos el objeto WebGrid para poder mostrar un listado de clientes, tal como se
observa:
@model
IEnumerable<DI.Models.Customer>
@{
ViewBag.Title = "Index";
WebGrid wg = new WebGrid(Model);
}
<h2>Lista de Clientes</h2>
@wg.GetHtml(columns: new []{
wg.Column("CustomerId","ID"),
wg.Column("CompanyName","Direccion"),
wg.Column("Address","Direccion"),
}
)
CIBERTEC
CARRERAS PROFESIONALES
133
CIBERTEC
CARRERAS PROFESIONALES
134
2. Luego, creamos una clase dentro de la carpeta Servicios, llamada MiServicioSQL y all
creamos un mtodo llamado ListarTodos que devuelva los Customers en una
coleccin de objetos, tal como se muestra:
CIBERTEC
CARRERAS PROFESIONALES
135
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using DI.Models
namespace DI.Servicios
{
public class MiServicioSQL
{
public List<Customer> ListarTodos()
{
NorthwindEntities MyDB=new NorthwindEntities();
return MyDB.Customers.ToList();
}
}
}
CIBERTEC
CARRERAS PROFESIONALES
136
4. Llegado a este punto hemos logrado romper la alta dependencia que tena el
controlador con el modelo; sin embargo, ahora la dependencia est entre el
controlador y la nueva clase de servicio.
Para poder superar este inconveniente, el patrn DI sugiere crear una interfaz con los
mtodos necesitados, para que las clases implementen la funcionalidad requerida, por
tanto a nuestro proyecto le agregamos una Interfaz llamada IServicio con un mtodo
llamado ListarTodos, tal como se muestra:
using System;
using System.Collections.Generic;
using System.Linq;
CIBERTEC
CARRERAS PROFESIONALES
137
using System.Text;
using System.Threading.Tasks;
using DI.Models;
namespace DI.Controllers
{
public interface IServicio
{
List<Customer> ListarTodos();
}
}
CIBERTEC
CARRERAS PROFESIONALES
138
return View(servicio.ListarTodos());
}
}
}
Ntese que con respecto a la versin anterior del controlador, en el mtodo index se
instanciaba la clase de servicio, ahora estamos usando una Interfaz que se instanciar
en el constructor del controlador, llegado a este punto, si ms adelante nos pidieran
cambios, por ejemplo, cambiar el proveedor de base datos a Oracle y cambiar de EF a
otro ORM, solo tendramos que implementar la interfaz y cambiar Solo en el
constructor del controlador.
7. Hasta el momento hemos llegado al punto de tener una muy mnima dependencia
entre el controlador y la clase de servicio (en el constructor).
Finalicemos el patrn DI anulando incluso esa mnima dependencia.
Para ello, en vez de que en el constructor de la clase se cree el objeto para la interfaz,
invirtamos las responsabilidades, es decir, en vez de ser el controlador el responsable
de crear el objeto, deleguemos esa responsabilidad a otra entidad, de tal manera que
al controlador se le pase el objeto ya creado, una manera de pasar el objeto ya creado
constara en hacer que el controlador pida esa referencia a travs de un parmetro en
su constructor tal como se muestra:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DI.Models;
using DI.Servicios;
namespace DI.Controllers
{
public class ClienteController : Controller
{
//
// GET: /Cliente/
IServicio servicio;
public ClienteController(IServicio _servicio)
{
servicio = _servicio;
}
public ActionResult Index()
{
return View(servicio.ListarTodos());
}
}
}
CIBERTEC
CARRERAS PROFESIONALES
139
Ntese que este pequeo cambio es bastante significativo para nuestros intereses, ya
que ahora el controlador no tiene dependencia alguna con la clase de servicio.
8. Nuestra solucin nos trae un ltimo detalle a resolver. Ahora que el controlador ya no
es responsable de instanciar la interfaz de servicio, se requiere que otra entidad se
encargue de dicha labor.
Una alternativa de solucin para crear el objeto de interfaz es hacer que el mismo
framework de MVC tome esta responsabilidad tal como sigue.
Primero creamos una clase MyDependencyResolver que implemente la interfaz
IDependencyResolver:
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Web.Mvc;
DI.Servicios;
namespace DI.Controllers
{
public class MyDependencyResolver : IDependencyResolver
{
public object GetService(Type serviceType)
{
if (serviceType == typeof(ClienteController))
return new ClienteController(new MiServicioSQL());
return null;
}
public IEnumerable<object> GetServices(Type serviceType)
{
return Enumerable.Empty<object>();
}
}
}
CIBERTEC
CARRERAS PROFESIONALES
140
9. Ejecutamos (F5)
8.4 Resumen
Los patrones de Software tienen como objetivo dar una solucin a un problema comn.
En el desarrollo de software, una de las principales consideraciones en el diseo es la de
mantener una alta cohesin y un bajo acoplamiento.
El patrn IoC se enfoca en darnos una solucin al dilema del bajo acoplamiento, haciendo
una reduccin a cero respecto a la dependencia de funcionalidades entre clases.
Actualmente existen dos formas de implementar el patrn IoC, utilizando la inyeccin de
Dependencia (ID) o con el patrn Service Locutor.
El patrn DI nos da la posibilidad de inyectar la dependencia a travs del constructor de la
clase o utilizando propiedades de las mismas.
CIBERTEC
CARRERAS PROFESIONALES
141
9. AJAX Y JQUERY
TEMARIO
CIBERTEC
CARRERAS PROFESIONALES
142
2. Vamos a usar el lenguaje C# con la plantilla Web y el tipo de proyecto Aplicacin web
de ASP.NET MVC 4, como nombre de proyecto ponemos Jquery y una ubicacin
donde se guardar el proyecto, finalmente damos Aceptar
CIBERTEC
CARRERAS PROFESIONALES
143
1
2
4
3. En la opcin de seleccionar plantilla de MVC, elegimos la opcin Aplicacin de Internet,
como motor de vista Razor y damos click en Aceptar.
CIBERTEC
CARRERAS PROFESIONALES
144
4. Ahora vamos a ir probando varias piezas de cdigo de Jquery que se integran con la
vista de MVC.
En la carpeta View/Home agregamos una nuevas vista llamada vista1 y dentro de la
vista1 agregamos el siguiente cdigo:
@{
ViewBag.Title = "Vista1";
}
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var searchBox = $('#txtTexto');
searchBox.focus(
function () {
if (searchBox.val() == this.title) {
searchBox.removeClass("defaultText");
searchBox.val("");
}
});
searchBox.blur(
function () {
if (searchBox.val() == "") {
searchBox.addClass("defaultText");
searchBox.val(this.title);
}
});
searchBox.blur();
});
</script>
<h2>Texto por Default</h2>
@using (@Html.BeginForm())
{
<fieldset>
<input type="text" id="txtTexto" title="Ingrese su busqueda aqui"
class="defaultText" />
<input type="submit" value="Buscar" />
</fieldset>
}
CIBERTEC
CARRERAS PROFESIONALES
145
CIBERTEC
CARRERAS PROFESIONALES
146
<h2>Deshabilitar el Copiar-Pegar</h2>
@using (@Html.BeginForm())
{
<fieldset>
<table>
<tr>
<td colspan="2">Cambio de clave</td>
</tr>
<tr>
<td>Clave Actual:</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>Nueva clave:</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>Confirmar nueva clave:</td>
<td><input type="password" id="txtConfirmar" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Aceptar" />
</td>
</tr>
</table>
</fieldset>
}
Este cdigo deshabilita la opcin de copiar, cortar, pegar de una caja de texto.
CIBERTEC
CARRERAS PROFESIONALES
147
Este cdigo tiene un check que selecciona todas las opciones de un grupo de checks
CIBERTEC
CARRERAS PROFESIONALES
148
9.5 Resumen
Las aplicaciones Web actuales, exigen mayor interactividad del lado del cliente Browser.
La industria del software plante como alternativa el desarrollo de aplicaciones de tipo RIA,
teniendo como mayor desventaja la instalacin de software adicional en el cliente (Flash,
Silverlight, etc.).
Javascript, Ajax y Jquery continan siendo las mejores opciones para el desarrollo de
cdigo del lado del cliente, siendo Jquery una alternativa que brinda mayor facilidad de
desarrollo y compatibilidad con los navegadores.
CIBERTEC
CARRERAS PROFESIONALES
149
UNIDAD DE
APRENDIZAJE
4
Logro de la unidad de aprendizaje
Al trmino de la unidad, los alumnos, utilizando las tcnicas explicadas en clase, implementan
soluciones Web con ASP.NET Web Form, utilizando una arquitectura en 3 capas y utilizando
helpers de acceso a datos tales como el Enterprise Library.
10.1
Formularios y Controles Web de ASP.NET
ASP.NET proporciona un modelo de desarrollo Web unificado que incluye los servicios
necesarios para crear aplicaciones Web para la empresa. ASP.NET forma parte de .NET
Framework y permite aprovechar al mximo las caractersticas de Common Language
Runtime, como la seguridad de tipos, la herencia, la interoperabilidad de lenguajes y el
control de versiones.
Las pginas Web ASP.NET se utilizan como la interfaz de usuario programable para su
aplicacin Web. Este tipo de pginas presenta la informacin al usuario en cualquier
explorador o dispositivo cliente e implementa lgica de aplicacin mediante el cdigo de la
parte servidor. Las pginas Web ASP.NET:
Se basan en la tecnologa Microsoft ASP.NET, en la que el cdigo que se ejecuta en el
servidor genera de forma dinmica salida de pginas Web en un explorador o dispositivo
cliente.
Son compatibles con cualquier explorador o dispositivo mvil. Las pginas Web ASP.NET
representan automticamente el cdigo HTML adecuado al explorador para funciones tales
como estilos, diseo, etc. Como alternativa, se pueden disear las pginas Web ASP.NET
para ejecutarse en un explorador determinado, como Microsoft Internet Explorer y
aprovechar as todas las caractersticas de un explorador especfico.
Admiten cualquier lenguaje compatible con Common Language Runtime de .NET, incluidos
Microsoft Visual Basic, Microsoft Visual C#, Microsoft J# y Microsoft JScript.NET.
Se crean en el entorno Microsoft .NET Framework. Esto proporciona todos los beneficios
del marco de trabajo, incluidos un entorno administrado, seguridad de tipos y herencia.
Son flexibles gracias a la posibilidad de incorporar a ellas controles creados por los
usuarios y de otros fabricantes.
En las pginas Web ASP.NET, la programacin de la interfaz de usuario se divide en dos
partes: el componente visual y el lgico. Si ha trabajado con herramientas como Visual
Basic y Visual C++ anteriormente, reconocer esta divisin entre la parte visible de una
pgina y el cdigo que se oculta detrs y que interacta con ella.
CIBERTEC
CARRERAS PROFESIONALES
150
El elemento visual est compuesto por un archivo que contiene el marcado esttico como
HTML o controles de servidor ASP.NET o ambos. La pgina Web ASP.NET funciona como
un contenedor del texto y los controles estticos que se desea mostrar.
La lgica de las pginas Web ASP.NET se compone del cdigo creado para interactuar con
la pgina. El cdigo puede residir en un bloque de script en la pgina o en una clase
independiente. Si el cdigo est en un archivo de clase independiente, a este archivo se le
conoce como archivo de cdigo subyacente. El cdigo del archivo de cdigo subyacente se
puede escribir en Visual Basic, Visual C#, Visual J# o JScript .NET.
Las pginas Web ASP.NET se compilan en un archivo de biblioteca de vnculos dinmicos
(.dll). La primera vez que un usuario examina la pgina .aspx con el explorador, ASP.NET
genera automticamente un archivo de clase .NET que representa a la pgina y la compila.
El archivo .dll se ejecuta en el servidor y genera dinmicamente la salida HTML para su
pgina.
A continuacin, se muestra el marco global de ASP.NET y la interaccin con los Web Form
y MVC.
10.2
Controles de validacin.
Los controles de validacin comprueban los datos proporcionados por el usuario en los
controles SelectionList y TextBox. La validacin se produce cuando el formulario se enva
al servidor. Los controles de validacin comprueban los datos proporcionados por el
usuario y, si estos no superan alguna de las pruebas de validacin, ASP.NET devuelve la
pgina al dispositivo de cliente. Cuando esto ocurre, los controles de validacin que
detectaron los errores muestran mensajes de error.
A excepcin del control ValidationSummary, todos los controles de validacin deben hacer
referencia a un control SelectionList o TextBox. Almacena la referencia en la propiedad
ControlToValidate del control de validacin. Como el control ValidationSummary no hace
referencia a ningn otro control, no contiene la propiedad ControlToValidate.
Entre los controles de validacin que existen se incluyen cinco controles que realizan
comparaciones y un control que resume todos los errores que puedan producirse. Todos
los controles de validacin deben colocarse en un control Form o Panel, o dentro de la
plantilla de un control de una pgina Web mvil. Tambin puede arrastrar el control de
validacin hasta una pgina de control de usuario mvil.
En la tabla siguiente se muestran los controles de validacin, y la validacin que estos
controles pueden realizar.
Control
CIBERTEC
Tarea de validacin
CARRERAS PROFESIONALES
151
CompareValidator
CustomValidator
RangeValidator
RegularExpressionValidator
RequiredFieldValidator
ValidationSummary
10.3
Laboratorio
2. Vamos a usar una solucin en Visual C#, Web y de tipo Aplicacin Web vaca de
ASP.NET y le damos como nombre Validaciones, tal como se muestra:
CIBERTEC
CARRERAS PROFESIONALES
152
2
1
CIBERTEC
CARRERAS PROFESIONALES
153
CIBERTEC
CARRERAS PROFESIONALES
154
CIBERTEC
CARRERAS PROFESIONALES
155
6. En este escenario, las consideraciones de validacin son las siguientes: todos los
campos son valores obligatorios, el correo debe tener un formato correcto, la edad
debe estar en un rango de 18 a 40 y finalmente los campos de clave y reingreso deben
ser iguales.
Empezamos agregando un control RequiredFieldValidator en la tercera columna para
cada caja de texto, configurando la propiedad ControlToValidate con la caja de texto
respectiva, ErrorMessage en *, Display en Dynamic y ToolTip en El campo es
obligatorio
CIBERTEC
CARRERAS PROFESIONALES
156
CIBERTEC
CARRERAS PROFESIONALES
157
8. Para que la edad este entre 18 y 40, usamos el control RangeValidator y configuramos
las propiedades ControlToValidate, ErrorMessage, Type y los valores de Minimun y
Maximun Value
CIBERTEC
CARRERAS PROFESIONALES
CIBERTEC
158
CARRERAS PROFESIONALES
159
CIBERTEC
CARRERAS PROFESIONALES
CIBERTEC
160
CARRERAS PROFESIONALES
161
Nota:
Es probable que se tenga que deshabilitar la validacin Unobtrusive
protected void Page_Load(object sender, EventArgs e)
{
Page.UnobtrusiveValidationMode =
System.Web.UI.UnobtrusiveValidationMode.None;
}
10.4
Resumen
ASP.NET es el marco de trabajo sobre el cual se puede crear aplicaciones de tipo Web
Form, MVC, Web Api y SignalR, etc.
Las aplicaciones Web Form tuvieron como objetivo continuar con el paradigma de
desarrollo de aplicaciones Windows, es decir una interfaz visual, controles y programacin
orientada a eventos.
Las aplicaciones Web Forms tiene la particularidad de dividir el diseo en un archivo y el
cdigo en otro (Code Behind).
ASP.NET Web Form viene con una serie de controles de validacin para facilitarnos la
tarea de validacin de ingreso de datos por parte del usuario.
CIBERTEC
CARRERAS PROFESIONALES
162
La programacin en capas
La capa de datos
La capa de entidad
La capa de reglas de negocio
Laboratorio
Resumen
11.1
La programacin en capas
La programacin en capas es una arquitectura cliente-servidor en la que el objetivo
primordial es la separacin de la lgica de negocios de la lgica de diseo; un ejemplo
bsico de esto consiste en separar la capa de datos de la capa de presentacin al usuario.
La ventaja principal de este estilo es que el desarrollo se puede llevar a cabo en varios
niveles y, en caso de que sobrevenga algn cambio, slo se ataca al nivel requerido sin
tener que revisar entre cdigo mezclado. Un buen ejemplo de este mtodo de
programacin sera el modelo de interconexin de sistemas abiertos.
Adems, permite distribuir el trabajo de creacin de una aplicacin por niveles; de este
modo, cada grupo de trabajo est totalmente abstrado del resto de niveles, de forma que
basta con conocer la API que existe entre niveles.
En el diseo de sistemas informticos actual se suelen usar las arquitecturas multinivel o
Programacin por capas. En dichas arquitecturas a cada nivel se le confa una misin
simple, lo que permite el diseo de arquitecturas escalables (que pueden ampliarse con
facilidad en caso de que las necesidades aumenten).
11.2
La capa de datos.
En la capa de datos se gestiona el acceso a los datos de la aplicacin. Se emplean
gestores de bases de datos que realizan la recuperacin y el almacenamiento fsico de los
datos a partir de solicitudes de la capa de negocio.
En esta capa se puede hacer uso de una propiedad denominada persistencia de objetos,
que permite vincular objetos de bases de datos relacionales a objetos de lenguajes de
programacin como clases para aumentar el nivel de abstraccin y facilitar el acceso a los
datos desde la capa de negocio. Existen varias implementaciones tecnolgicas sobre
persistencia que debern emplearse atendiendo a las necesidades de cada aplicacin
11.3
La capa de entidad
Las entidades del negocio de una aplicacin representa entidades reales y adems suelen
ser sustantivos, como por ejemplo: Cliente, Nmina, Factura, Depsito, etc.
Tcnicamente en .NET suele ser un proyecto de Bibliotecas de clase con una serie de
clases que representa el dominio del negocio y sus propiedades respectivas.
11.4
La capa de reglas de negocio.
Esta capa almacena toda la lgica de la aplicacin como algoritmos, validaciones y
coordinacin necesaria para resolver la problemtica. Es responsable de representar conceptos
de negocio, informacin sobre la situacin de los procesos e implementacin de las reglas de negocio. Esta
capa sirve de nexo entre las peticiones del usuario (capa de presentacin) y la conexin al
servidor de datos (capa de acceso a datos)
CIBERTEC
CARRERAS PROFESIONALES
11.5
163
Laboratorio
CIBERTEC
CARRERAS PROFESIONALES
164
USE master
go
CREATE DATABASE CRM
GO
USE CRM
GO
CREATE TABLE Cliente
(
IdCliente int primary key identity(1,1),
Nombres varchar(100),
Direccion varchar(150),
Telefono varchar(50)
)
GO
CREATE PROC selCliente
as
SELECT
IdCliente ,
Nombres ,
Direccion,
Telefono
FROM Cliente
go
CREATE PROC insCliente
@Nombres varchar(100),
@Direccion varchar(150),
@Telefono varchar(50)
as
INSERT INTO Cliente
(
Nombres ,
Direccion,
CIBERTEC
CARRERAS PROFESIONALES
165
Telefono
)
values
(
@Nombres ,
@Direccion,
@Telefono
)
go
CREATE PROC updCliente
@IdCliente int,
@Nombres varchar(100),
@Direccion varchar(150),
@Telefono varchar(50)
as
UPDATE Cliente
set
Nombres =@Nombres ,
Direccion=@Direccion,
Telefono =@Telefono
Where IdCliente=@IdCliente
GO
CREATE PROC delCliente
@IdCliente int
AS
DELETE FROM Cliente
Where IdCliente=@IdCliente
go
CIBERTEC
CARRERAS PROFESIONALES
166
2. Vamos a usar una solucin en blanco ubicada en Otros tipos de proyecto .Soluciones
de Visual Studio, y le damos como nombre Mantenimiento, tal como se muestra:
3
4
CIBERTEC
CARRERAS PROFESIONALES
167
CIBERTEC
CARRERAS PROFESIONALES
168
5. A nuestras tres capas borramos la clase Class1 que se crea por defecto y creamos una
clase llamada Cliente en cada proyecto y finalmente agregamos un proyecto ms
llamado ClienteWeb de tipo Aplicacin Web Vaca de ASP.NET, tal como se muestra:
CIBERTEC
CARRERAS PROFESIONALES
169
2
1
CIBERTEC
System;
System.Collections.Generic;
System.Linq;
System.Text;
CARRERAS PROFESIONALES
170
using System.Threading.Tasks;
namespace CapaEntidad
{
public class Cliente
{
public int IdCliente { get; set; }
public string Nombres { get; set; }
public string Direccion { get; set; }
public string Telefono { get; set; }
}
}
CIBERTEC
CARRERAS PROFESIONALES
171
CIBERTEC
CARRERAS PROFESIONALES
172
{
if (cnn.State == ConnectionState.Open)
{
cnn.Close();
}
}
return resultado;
}
public bool Actualizar(CapaEntidad.Cliente entidad)
{
SqlConnection cnn = new SqlConnection(cadenaConexion);
SqlCommand cmd = new SqlCommand("updCliente", cnn);
cmd.CommandType = CommandType.StoredProcedure;
bool resultado;
SqlParameter par;
par = cmd.Parameters.Add("@IdCliente", SqlDbType.Int);
par.Direction = ParameterDirection.Input;
par.Value = entidad.IdCliente;
par = cmd.Parameters.Add("@Nombres", SqlDbType.VarChar, 100);
par.Direction = ParameterDirection.Input;
par.Value = entidad.Nombres;
par = cmd.Parameters.Add("@Direccion", SqlDbType.VarChar,
150);
par.Direction = ParameterDirection.Input;
par.Value = entidad.Direccion;
par = cmd.Parameters.Add("@Telefono", SqlDbType.VarChar, 50);
par.Direction = ParameterDirection.Input;
par.Value = entidad.Telefono;
try
{
cnn.Open();
int cantidadFilas = cmd.ExecuteNonQuery();
if (cantidadFilas > 0)
{
resultado = true;
}
else
{
resultado = false;
}
}
catch
{
//codigo de registro de log aqui
resultado = false;
}
finally
{
if (cnn.State == ConnectionState.Open)
{
cnn.Close();
}
}
return resultado;
}
CIBERTEC
CARRERAS PROFESIONALES
173
CIBERTEC
CARRERAS PROFESIONALES
174
System;
System.Collections.Generic;
System.Linq;
System.Text;
System.Threading.Tasks;
System.Data;
namespace CapaReglas
{
public class Cliente
{
private CapaDatos.Cliente objCliente = new CapaDatos.Cliente();
public DataTable ListarTodos()
{
return objCliente.ListarTodos();
}
public bool Adicionar(CapaEntidad.Cliente entidad)
{
return objCliente.Adicionar(entidad);
}
public bool Actualizar(CapaEntidad.Cliente entidad)
{
return objCliente.Actualizar(entidad);
}
public bool Eliminar(CapaEntidad.Cliente entidad)
{
return objCliente.Eliminar(entidad);
}
}
}
CIBERTEC
CARRERAS PROFESIONALES
175
10. Estando en la vista de diseo del formulario, agregamos un tabla con dos filas
CIBERTEC
CARRERAS PROFESIONALES
176
11. En la primera fila de la tabla le ponemos como ttulo Lista de Clientes y en la segunda
fila agregamos un control GridView y un control ObjectDataSource , tal como se
muestra:
CIBERTEC
CARRERAS PROFESIONALES
177
CIBERTEC
CARRERAS PROFESIONALES
CIBERTEC
178
CARRERAS PROFESIONALES
CIBERTEC
179
CARRERAS PROFESIONALES
180
CIBERTEC
CARRERAS PROFESIONALES
181
15. Por ultimo, para la funcionalidad de Agregar, podemos agregar a nuestra pagina un
botn con propiedad Text Adicionar y que navegue a una pgina llamada nuevo.aspx
CIBERTEC
CARRERAS PROFESIONALES
182
16. Estando en formulario Nuevo.aspx , agregamos una tabla con 4 filas por dos columnas
y hacemos el siguiente diseo
CIBERTEC
CARRERAS PROFESIONALES
using
using
using
using
using
using
183
System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Web.UI;
System.Web.UI.WebControls;
namespace ClienteWeb
{
public partial class Nuevo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
CapaEntidad.Cliente entidad = new CapaEntidad.Cliente();
entidad.Nombres = txtNombre.Text;
entidad.Direccion = txtDireccion.Text;
entidad.Telefono = txtTelefono.Text;
CapaReglas.Cliente objCliente = new CapaReglas.Cliente();
bool resultado= objCliente.Adicionar(entidad);
if (resultado == true)
{
Response.Redirect("Cliente.aspx");
}
else
{
Response.Write("Error al realizar la accion");
}
}
}
}
18. Ejecutamos
CIBERTEC
CARRERAS PROFESIONALES
184
CIBERTEC
CARRERAS PROFESIONALES
185
12.1
12.2
Laboratorio
CIBERTEC
CARRERAS PROFESIONALES
186
CIBERTEC
CARRERAS PROFESIONALES
187
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Data;
using System.Data.SqlClient;
using Microsoft.Practices.EnterpriseLibrary.Data;
using Microsoft.Practices.EnterpriseLibrary.Data.Sql;
using System.Data.Common;
namespace CapaDatos
{
public class Cliente
{
public DataTable ListarTodos()
{
Database db= DatabaseFactory.CreateDatabase();
DataTable dt =db.ExecuteDataSet(CommandType.StoredProcedure,
"selCliente").Tables[0];
return dt;
}
public bool Adicionar(CapaEntidad.Cliente entidad)
{
bool resultado;
Database db= DatabaseFactory.CreateDatabase();
DbCommand cmd = db.GetStoredProcCommand("insCliente",
entidad.Nombres,
CIBERTEC
CARRERAS PROFESIONALES
188
entidad.Direccion,
entidad.Telefono);
try
{
int cantidadFilas = db.ExecuteNonQuery(cmd);
if (cantidadFilas>0)
{
resultado=true;
}
else
{
resultado=false;
}
}
catch
{
//codigo de registro de log aqui
resultado = false;
}
return resultado;
}
public bool Actualizar(CapaEntidad.Cliente entidad)
{
bool resultado;
Database db = DatabaseFactory.CreateDatabase();
DbCommand cmd = db.GetStoredProcCommand("updCliente",
entidad.IdCliente,
entidad.Nombres,
entidad.Direccion,
entidad.Telefono);
try
{
int cantidadFilas = db.ExecuteNonQuery(cmd);
if (cantidadFilas > 0)
{
resultado = true;
}
else
{
resultado = false;
}
}
catch
{
//codigo de registro de log aqui
resultado = false;
}
return resultado;
}
public bool Eliminar(CapaEntidad.Cliente entidad)
{
bool resultado;
Database db = DatabaseFactory.CreateDatabase();
DbCommand cmd = db.GetStoredProcCommand("delCliente",
entidad.IdCliente);
try
CIBERTEC
CARRERAS PROFESIONALES
189
{
int cantidadFilas = db.ExecuteNonQuery(cmd);
if (cantidadFilas > 0)
{
resultado = true;
}
else
{
resultado = false;
}
}
catch
{
//codigo de registro de log aqui
resultado = false;
}
return resultado;
}
}
}
3. Ejecutamos, los resultados son los mismos, pero la capa de datos esta refactorizada
con un cdigo ms simplificado y claro.
CIBERTEC
CARRERAS PROFESIONALES
190
12.3
Resumen
Los Helpers de la capa de datos ayudan a simplifcar el cdigo de acceso a datos.
Microsoft a travs de los Enterprise Library nos ayuda con un conjunto de libreras para
mejorar nuestro cdigo, simplificando y reduciendo la cantidad de cdigo que se escribe.
CIBERTEC
CARRERAS PROFESIONALES