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

Ing. Richard Zapata Casaverde

COMERCIO ELECTRONICO

UNSCH 2013

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 ejecucin
Handler.-manipulador
Request.- peticin.
Controller.- controlador.
Customer.-cliente.

Ing. Richard Zapata Casaverde

COMERCIO ELECTRONICO

UNSCH 2013

BROWSER.-navegador.
HTML.-es el lenguaje de marcado predominante para la elaboracin de pginas web.

Ing. Richard Zapata Casaverde

COMERCIO ELECTRONICO

UNSCH 2013

AJAX
Xml
Json.- 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.

Ing. Richard Zapata Casaverde

COMERCIO ELECTRONICO

$.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
}
});

Ing. Richard Zapata Casaverde

UNSCH 2013

COMERCIO ELECTRONICO

UNSCH 2013

BOOTSTRAP.- proceso mediante el cual se han desarrollado entornos de programacin

cada vez ms complejos a partir de otros ms simples
2. DESARROLLO DE LA PRCTICA 1
2.1. Crear un proyecto mvc3 con plantilla internet.
2.2. Dentro del Controlador Home agregar un mtodo tipo json
public ActionResult MiMetodo()
{
return Json(new {id=123,nombre="Richard"},JsonRequestBehavior.AllowGet);
}
2.3. En la Vista Index del controlador Home agregar un Boton
<input type="button" id="miboton" value="Llamada Ajax"/>
2.4. En la seccin de java script agregar un mtodo Ajax jquery

function MiAjax() {
$.ajax({
type: 'GET',
url: '@Url.Action("MiMetodo", "Home")',
success: function(data) { alert(data.nombre); },
error: function(errorData) { alert(errorData); }
});
return true;

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 persona

public class Persona
{

public int Id { get; set; }

public string Nombre { get; set; }
public string Parametro { get; set; }

}
2.8. Ahora agregar al mtodo json 2 parametros par1 y par2

Ing. Richard Zapata Casaverde

COMERCIO ELECTRONICO

UNSCH 2013

public ActionResult MiMetodo(string par1,int par2 )

{

var opersona = new Persona();

opersona.Id = 111;
opersona.Nombre = "Richard";
opersona.Parametro = "Parametros : " + par1 + " y " + par2;
return Json(opersona, JsonRequestBehavior.AllowGet);

}
2.9. En la vista Index modificar la llamada Ajax
function MiAjax() {
$.ajax({
type: 'GET',
url: '@Url.Action("MiMetodo", "Home")',
dataType: "json",
data: { par1: "Variable", par2: 999 },
success: function (data) {
$("#midiv").html("<h1>" + data.Id + "-" + data.Nombre + "-" + data.Parametro + "</h1>");

},
error: function(errorData) { alert(errorData); }
});
return true;
}
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
private BuscadorEntities db = new BuscadorEntities();
3.5. Crear en el Controlador las operaciones CRUD, teniendo en cuenta retornos tipo json.
{

public ActionResult ListarUsuarios()

return Json(db.Usuario.ToList(), JsonRequestBehavior.AllowGet);

Ing. Richard Zapata Casaverde

COMERCIO ELECTRONICO

UNSCH 2013

}
public ActionResult CrearUsuario(string pUsuario, string pClave)
{
var usuario = new Usuario();
usuario.Nombre = pUsuario;
usuario.Clave = pClave;
db.Usuario.Add(usuario);
db.SaveChanges();
}

return Json(true, JsonRequestBehavior.AllowGet);

public ActionResult EditarUsuario(int pId,string pUsuario, string pClave)

{
var usuario = new Usuario();
usuario.Id = pId;
usuario.Nombre = pUsuario;
usuario.Clave = pClave;
db.Entry(usuario).State = EntityState.Modified;
db.SaveChanges();
return Json(true, JsonRequestBehavior.AllowGet);
}
public ActionResult EliminarUsuario(int pId)
{
Usuario usuario = db.Usuario.Find(pId);
db.Usuario.Remove(usuario);
db.SaveChanges();
}

return Json(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.
<h1>Personas Existentes:</h1>
<label>Id</label> <input type="text" id="txtId" style="width: 80px"/>
<label>Usuario</label> <input type="text" id="txtUsuario" style="width: 80px"/>
<label>Clave</label> <input type="text" id="txtClave" style="width: 80px"/>
<input type="button" id="btnCrear" value="Crear"/>
<input type="button" id="btnEditar" value="Editar"/>
<input type="button" id="btnEliminar" value="Eliminar"/>
<br/>
<table id="usuario" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Id</th>
<th>Usuario</th>
<th>Clave</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Ing. Richard Zapata Casaverde

COMERCIO ELECTRONICO

UNSCH 2013

3.7. Crear los mtodos java script de listar,crear,editar y eliminar usando Ajax jquery
function ListarPersonas() {
$.ajax({
type: 'GET',
url: '@Url.Action("ListarUsuarios", "Home")',
dataType: "json",
data: {},
success: function (data) {
var html = "";
jQuery.each(data, function (i, val) {
html = html +
"<tr>" +
"<td>" + val.Id + "</td>" +
"<td>" + val.Nombre + "</td>" +
"<td>" + val.Clave + "</td>" +
"</tr>";
});

$("#usuario tbody").html(html);
},
error: function (errorData) { alert(errorData); }
});
return true;

function Crear() {
$.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); }
});
return true;
}
function Editar() {
$.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); }
});
return true;
}
function Eliminar() {
$.ajax({
type: 'GET',
url: '@Url.Action("EliminarUsuario", "Home")',
dataType: "json",
data: { pId: $("#txtId").val()},

Ing. Richard Zapata Casaverde

COMERCIO ELECTRONICO

UNSCH 2013

success: function (data) {

ListarPersonas();
},
error: function (errorData) { alert(errorData); }
});
return true;
}
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