COMERCIO ELECTRONICO UNSCH 2013
Laboratorio N 1:Fundamentos
1. OBJETIVOS: Afianzar al estudiante en el manejo, instalacin y
anlisis del Framework(es una estructura conceptual y tecnolgica de
soporte definido, normalmente con artefactos o mdulos de software
concretos, con base a la cual otro proyecto de software puede ser
ms fcilmente organizado y desarrollado. Tpicamente, puede incluir
soporte de programas, bibliotecas, y un lenguaje interpretado,
entre otras herramientas, para as ayudar a desarrollar y unir los
diferentes componentes de un proyecto.Representa una arquitectura
de software que modela las relaciones generales de las entidades
del dominio, y provee una estructura y una especial metodologa de
trabajo, la cual extiende o utiliza las aplicaciones del dominio.)
MVC .NET con AJAX (tcnica de desarrollo web para crear aplicaciones
interactivas ,Ajax es una tecnologa asncrona, en el sentido de que
los datos adicionales se solicitan al servidor y se cargan en
segundo plano sin interferir con la visualizacin ni el
comportamiento de la pgina. JavaScript es el lenguaje interpretado
(scripting language) en el que normalmente se efectan las funciones
de llamada de Ajax mientras que el acceso a los datos se realiza
mediante XMLHttpRequest, objeto disponible en los navegadores
actuales. En cualquier caso, no es necesario que el contenido
asncrono est formateado en XML.)para desarrollo de aplicaciones
dinmicas. Afianzar en el estudiante conocimientos y utilizacin de
la ORM Entity Framework. Realizar una primera interaccin con la
tecnologa Java Script, CSS(hojas de estilo en cascada,es un
lenguaje usado para definir la presentacin de un documento
estructurado escrito en HTML o XML), Html5(lenguaje bsico de la
World Wide Web,) , AJAX JQUERY(es una biblioteca de JavaScript,
creada inicialmente por John Resig, que permite simplificar la
manera de interactuar con los documentos HTML, manipular el rbol
DOM, manejar eventos, desarrollar animaciones y agregar interaccin
con la tcnica AJAX a pginas web. Fue presentada el 14 de enero de
2006 en el BarCamp NYC.)
ASP.NET.-es un framework para aplicaciones web desarrollado y
comercializado por Microsoft. Es usado por programadores para
construir sitios web dinmicos, aplicaciones web y servicios web
XML. es la tecnologa sucesora de la tecnologa Active Server Pages
(ASP). ASP.NET esta construido sobre el Common Language Runtime,
permitiendo a los programadores escribir cdigo ASP.NET usando
cualquier lenguaje admitido por el .NET Framework.
HTTP.- en espaol protocolo de transferencia de hipertexto, es el
protocolo usado en cada transaccin de la World Wide Web.
Runtime.-tiempo de ejecucinHandler.-manipuladorRequest.-
peticin.Controller.- controlador.Customer.-cliente.
BROWSER.-navegador.HTML.-es el lenguaje de marcado predominante
para la elaboracin de pginas web.
AJAXXmlJson.- acrnimo de JavaScript Object Notation, es un
formato ligero para el intercambio de datos. JSON es un subconjunto
de la notacin literal de objetos de JavaScript que no requiere el
uso de XML.La simplicidad de JSON ha dado lugar a la generalizacin
de su uso, especialmente como alternativa a XML en AJAX. Una de las
supuestas ventajas de JSON sobre XML como formato de intercambio de
datos en este contexto es que es mucho ms sencillo escribir un
analizador sintctico (parser) de JSON. En JavaScript, un texto JSON
se puede analizar fcilmente usando el procedimiento eval(), lo cual
ha sido fundamental para que JSON haya sido aceptado por parte de
la comunidad de desarrolladores AJAX, debido a la ubicuidad(en
todas partes) de JavaScript en casi cualquier navegador web. Si
bien es frecuente ver JSON posicionado contra XML, tambin es
frecuente el uso de JSON y XML en la misma aplicacin. Por ejemplo,
una aplicacin de cliente que integra datos de Google Maps con datos
meteorolgicos en SOAP hacen necesario soportar ambos formatos.
$.ajax({type:'GET' 'POST'
,url:'@Url.Action("Accion","Controlador")',success:function(data){resultado
de la accin asncrona correcta},error:function(errorData){resultado
de la accin asncrona de un error}});
BOOTSTRAP.- proceso mediante el cual se han desarrollado
entornos de programacin cada vez ms complejos a partir de otros ms
simples2. DESARROLLO DE LA PRCTICA 1
2.1. Crear un proyecto mvc3 con plantilla internet.2.2. Dentro
del Controlador Home agregar un mtodo tipo
jsonpublicActionResultMiMetodo(){returnJson(new{id=123,nombre="Richard"},JsonRequestBehavior.AllowGet);}
2.3. En la Vista Index del controlador Home agregar un Boton
2.4. En la seccin de java script agregar un mtodo Ajax
jqueryfunctionMiAjax(){$.ajax({type:'GET',url:'@Url.Action("MiMetodo","Home")',success:function(data){alert(data.nombre);},error:function(errorData){alert(errorData);}});returntrue;}
2.5. Agregar la funcin de inicializacin del java script y
enlazar a la llamasa del botn.
$(function(){$("#miboton").click(function(){MiAjax();});});
2.6. Verificar en el aplicativo la llamada Ajax
2.7. Crear una clase
personapublicclassPersona{publicintId{get;set;}publicstringNombre{get;set;}publicstringParametro{get;set;}}
2.8. Ahora agregar al mtodo json 2 parametros par1 y par2
publicActionResultMiMetodo(stringpar1,intpar2){varopersona=newPersona();opersona.Id=111;opersona.Nombre="Richard";opersona.Parametro="Parametros:"+par1+"y"+par2;returnJson(opersona,JsonRequestBehavior.AllowGet);}
2.9. En la vista Index modificar la llamada Ajax
functionMiAjax(){$.ajax({type:'GET',url:'@Url.Action("MiMetodo","Home")',dataType:"json",data:{par1:"Variable",par2:999},
success:function(data){
$("#midiv").html(""+data.Id+"-"+data.Nombre+"-"+data.Parametro+"");},error:function(errorData){alert(errorData);}});returntrue;}
2.10. Probar la visualizacin
3. DESARROLLO DE LA PRCTICA 2 CRUD JQERY
3.1. Crear un proyecto mvc3 con plantilla internet.3.2. Crear
Una Base de Datos de Prueba y Crear la tabla usuario
CREATE TABLE Usuario(Id INT IDENTITY(1,1) PRIMARY KEY ,Nombre
VARCHAR(50),Clave VARCHAR(20))
3.3. En la aplicacin MVC Crear un contexto para la tabla Usuario
usando Entity Framewok.3.4. En la cabecera del controlador Home
crear la llamada al contexto
privateBuscadorEntitiesdb=newBuscadorEntities();
3.5. Crear en el Controlador las operaciones CRUD, teniendo en
cuenta retornos tipo json.
publicActionResultListarUsuarios(){returnJson(db.Usuario.ToList(),JsonRequestBehavior.AllowGet);}
publicActionResultCrearUsuario(stringpUsuario,stringpClave){varusuario=newUsuario();usuario.Nombre=pUsuario;usuario.Clave=pClave;
db.Usuario.Add(usuario);db.SaveChanges();
returnJson(true,JsonRequestBehavior.AllowGet);}
publicActionResultEditarUsuario(intpId,stringpUsuario,stringpClave){varusuario=newUsuario();usuario.Id=pId;usuario.Nombre=pUsuario;usuario.Clave=pClave;
db.Entry(usuario).State=EntityState.Modified;db.SaveChanges();
returnJson(true,JsonRequestBehavior.AllowGet);}
publicActionResultEliminarUsuario(intpId){Usuariousuario=db.Usuario.Find(pId);db.Usuario.Remove(usuario);db.SaveChanges();
returnJson(true,JsonRequestBehavior.AllowGet);}
3.6. En la Vista Index del controlador Home crear una tabla de
visualizacion de datos y controles para el mantenimiento de datos
del usuario.
PersonasExistentes:IdUsuarioClave
IdUsuarioClave
3.7. Crear los mtodos java script de listar,crear,editar y
eliminar usando Ajax jquery
functionListarPersonas(){$.ajax({type:'GET',url:'@Url.Action("ListarUsuarios","Home")',dataType:"json",data:{},success:function(data){varhtml="";jQuery.each(data,function(i,val){html=html+""+""+val.Id+""+""+val.Nombre+""+""+val.Clave+""+"";});
$("#usuariotbody").html(html);},error:function(errorData){alert(errorData);}});returntrue;}functionCrear(){$.ajax({type:'GET',url:'@Url.Action("CrearUsuario","Home")',dataType:"json",data:{pUsuario:$("#txtUsuario").val(),pClave:$("#txtClave").val()},success:function(data){ListarPersonas();},error:function(errorData){alert(errorData);}});returntrue;}
functionEditar(){$.ajax({type:'GET',url:'@Url.Action("EditarUsuario","Home")',dataType:"json",data:{pId:$("#txtId").val(),pUsuario:$("#txtUsuario").val(),pClave:$("#txtClave").val()},success:function(data){ListarPersonas();},error:function(errorData){alert(errorData);}});returntrue;}
functionEliminar(){$.ajax({type:'GET',url:'@Url.Action("EliminarUsuario","Home")',dataType:"json",data:{pId:$("#txtId").val()},success:function(data){ListarPersonas();},error:function(errorData){alert(errorData);}});returntrue;}
3.8. En la seccin de java script realizar el enlace de los
controles con los mtodos Ajax jquery
$(function(){ListarPersonas();
$("#btnCrear").click(function(){Crear();});$("#btnEditar").click(function(){Editar();});$("#btnEliminar").click(function(){Eliminar();});});
3.9. Probar el funcionamiento de la aplicacin!!!!
Ing. Richard Zapata Casaverde
