Vous êtes sur la page 1sur 77

More Next Blog Create Blog Sign In

Leandro Tuttini Blog

Mostrando entradas con la etiqueta jQuery. Mostrar todas las


Archivo del blog
entradas
2013 (21)
viernes, 29 de junio de 2012 2012 (24)
[ASP.NET] PopUp Edicin - Usando Jquery UI Dialog
noviembre (2)

octubre (4)
Introduccin
septiembre (3)

En este ejemplo se editaran ordenes de compra pero sin hacer uso alguno agosto (2)
de eventos de asp.net, se har uso de una serie de libreras jquery que
julio (2)
ayudaran en el proceso
junio (2)
Solo el botn de filtro y la paginacin del gridview conservarn los eventos
de asp.net, la edicin de la entidad ser completamente sin hacer uso de [ASP.NET] PopUp Edicin -
eventos. Usando Jquery UI Dialog

Para esto se usara: [ASP.NET] PopUp Edicin -


Usando Ajax Toolkit
jquery UI dialog
jquery autocomplete Moda...
jtemplates
momentjs mayo (2)

open in browser PRO version Are you a developer? Try out the HTML to PDF API abril (4) pdfcrowd.com
abril (4)

marzo (1)

febrero (2)

2011 (23)

2010 (55)

2009 (22)

2008 (1)

Datos personales

LE A ND R O TUTTI NI

Ver todo mi perfil

Microsoft MVP C# 2010 -


2013

Implementando jQuery Autocomplete


open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Implementando jQuery Autocomplete
Etiquetas

La implementacin se encuentra en el archivo autocomplete.js del ADO.NET (12)


proyecto, en este simplemente se define
ASP.NET (35)
$(function () { C# (34)
$("[id*='txtCustomer']").autocomplete({ Crystal Reports (5)
source: function (request, response) { DataGridView (13)

var params = new Object(); Dynamic CRM (5)


params.companyName = request.term;
Entity Framework (10)
$.ajax({ GridView (12)
type: "POST",
contentType: "application/json; charset=utf- JavaScript (1)
8",
url: "Default.aspx/GetCustomerList", jQuery (13)
data: JSON.stringify(params),
dataType: "json", Linq (6)
async: true, MS Access (2)
success: function (data) {
N-Tier (6)
response($.map(data.d, function (item) {
return { NHibernate (1)
label: item
} Office (1)
}))
}, Reporting Service (2)
error: function (request, status, error) { VB.NET (5)
alert(jQuery.parseJSON(request.responseTe
xt).Message); Visual Studio (3)
}
}); WinForm (35)

},
Seguidores
open: function (event, ui) {
Participar en este sitio
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
$(this).autocomplete("widget").css({ Participar en este sitio
"width": 200, "font-size": 12 Google Friend Connect
});
Miembros (457) Ms
},

select: function (event, ui) {

$("[id*='txtCustomer']").val(ui.item.label);

} Ya eres miembro? Iniciar sesin

});
});

Como puede observarse invoca a un WebMethod implementado en el


cdigo de la pagina

[WebMethod]
public static string[] GetCustomerList(string companyName)
{
string[] list =
CustomerRepository.GetCustomer(companyName)
.Select(x => x.CompanyName)
.ToArray();

return list;
}

Es importante resaltar el uso de una seccin de estilo que permite definir


el scroll del desplegable

<style type="text/css">
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
/* prevent horizontal scrollbar */
overflow-x: hidden;
/* add padding to account for vertical scrollbar */
padding-right: 20px;
}
</style>

Implementando Edicin GridView

La edicin en el control GridView tiene algunos detalles interesantes para


el anlisis. la seleccin se implementa por medio de un simple template
conteniendo el tag de html de imagen al cual se le asocia un atributo para
identificar el id de la orden que define

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Este atributo ser luego usado por el evento de la imagen cuando hace
$(this).attr(idorder)

function RegisterEditOrderEvent() {

$("[id*='gvOrders'] [id*='imgeditorder']").click(function
() {

var orderId = $(this).attr("idorder");


open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
var orderId = $(this).attr("idorder");

$('#popuporderedit').dialog({ title: 'Edicion Orden


Nro: ' + orderId });
$('#popuporderedit').data('orderId', orderId);
$('#popuporderedit').dialog('open');

});

Nota: hay que remarcar como se asigna el id de la orden al dialogo,


usando el .data(), usado luego para saber que id esta mostrando el popup

Se observara tambin que este evento no esta en el clsico


$(function(){ para que se cargue cuando la pagina este disponible, sino
que es invocado puntualmente ante determinados eventos.

Esto es necesario porque el gridview sigue conservando los eventos de


asp.net, y el postback que estos causando quitan las asociaciones de los
eventos de jquery adjunta a los controles, a pesar de usar UpdatePanel
estos eventos aun existen, por eso se usa al final de cada accin el
ScriptManager.RegisterStartupScript() para que vuelva a lanzar la
ejecucin y rebindear el evento click

protected void gvOrders_PageIndexChanging(object sender,


GridViewPageEventArgs e)
{
gvOrders.PageIndex = e.NewPageIndex;
LoadGridOrder();

ScriptManager.RegisterStartupScript(Page, typeof(Page),
"registerorderevent", "RegisterEditOrderEvent();",
true);

protected void btnFiltrar_Click(object sender, EventArgs e)


{
LoadGridOrder();
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
LoadGridOrder();

ScriptManager.RegisterStartupScript(Page, typeof(Page),
"registerorderevent", "RegisterEditOrderEvent();",
true);
}

Edicin usando jQuery UI Dialog

La definicin es bastante simple, lo que quizs sea complejo es la carga y


actualizacin de los campos de la entidad

$('#popuporderedit').dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 500,
heigth: 250,
title: 'Edicion Orden Nro:',
open: function (event, ui) {

initialize();
loadOrder($(this).data('orderId'));

},
close: function (event, ui) {

//limpia todos los textbox del popup


$('#popuporderedit :text').val('');

},
buttons: {
Actualizar: function () {

updateOrder();

},
Cancel: function () {
$(this).dialog("close");
}
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
}
}
});

Jquery UI Dialog Carga controles

La carga de los datos en el popup tiene dos momentos, una de


inicializacin y otra de asignacin de los datos de la entidad que se edita

En este caso la inicializacin mas que nada implica cargar los combo

function initialize() {

loadComboBox('ddlCustomer', 'GetAllCustomer');
loadComboBox('ddlEmployeer', 'GetAllEmploye');
loadComboBox('ddlShipVia', 'GetAllShipper');

function loadComboBox(comboname, webmethodname) {

var template = "{#foreach $T as record}\


<option
value='{$T.record.id}'>{$T.record.n
ame}</option>\
{#/for}";

var combo = $('#' + comboname);

$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/" + webmethodname,
data: '{}',
dataType: "json",
async: true,
success: function (data) {

//combo.setTemplate($("#SelectTemplate").html());
combo.setTemplate(template);
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
combo.setTemplate(template);
combo.processTemplate(JSON.parse(data.d));

},
error: function (request, status, error) {
alert(JSON.parse(request.responseText).Message);
}
});

Es importante notar como se hace uso de jtemplate para definir el


<option> de combo. El tmplate puede ser definido tanto en una variable,
o si este es algo mas complejo podra hacerse en una seccin del html

<script type="text/html" id="SelectTemplate">


{#foreach $T as record}
<option
value="{$T.record.id}">{$T.record.name;}</option>
{#/for}
</script>

Para que se puede recuperar la info ser necesario contar con los
webmethod

[WebMethod]
public static string GetAllCustomer()
{
var list = CustomerRepository.GetAllCustomer()
.Select(x => new
{
id = x.CustomerID,
name = x.CompanyName
});

return JsonConvert.SerializeObject(list);
}

[WebMethod]
public static string GetAllEmploye()

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
public static string GetAllEmploye()
{
var list = EmployeRepository.GetAllEmploye()
.Select(x => new
{
id = x.EmployeeID,
name = x.FullName
});

return JsonConvert.SerializeObject(list);
}

[WebMethod]
public static string GetAllShipper()
{
var list = ShipperRepository.GetAllShipper()
.Select(x => new
{
id = x.ShipperID,
name = x.CompanyName
});

return JsonConvert.SerializeObject(list);
}

Se hace uso de la librera JSON.Net para serializar el objeto annimo

Para cargar la orden se usa una tcnica similar

function loadOrder(orderId) {

var params = new Object();


params.orderId = orderId;

$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/GetOrder",
data: JSON.stringify(params),
dataType: "json",
async: true,
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
async: true,
success: function (data) {

var order = JSON.parse(data.d);

$('#ddlCustomer').val(order.CustomerID);
$('#ddlEmployeer').val(order.EmployeeID);

$('#txtOrderDate').val(order.OrderDate);
$('#txtRequiredDate').val(order.RequiredDate);
$('#txtShippedDate').val(order.ShippedDate);

$('#ddlShipVia').val(order.ShipVia);
$('#txtFreight').val(order.Freight);
$('#txtShipName').val(order.ShipName);
$('#txtShipAddress').val(order.ShipAddress);
$('#txtShipCity').val(order.ShipCity);
$('#txtShipRegion').val(order.ShipRegion);
$('#txtShipPostalCode').val(order.ShipPostalCode)
;
$('#txtShipCountry').val(order.ShipCountry);

},
error: function (request, status, error) {
alert(JSON.parse(request.responseText).Message);
}
});

Definiendo el webmethod que enva los datos de la orden

[WebMethod]
public static string GetOrder(int orderId)
{
var order = OrderRepository.GetOrderById(orderId);

return JsonConvert.SerializeObject(new
{
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
{
OrderID = order.OrderID,
CustomerID = order.CustomerID,
EmployeeID = order.EmployeeID,

OrderDate = order.OrderDate.ToShortDateString(),
RequiredDate =
order.RequiredDate.ToShortDateString(),
ShippedDate = order.ShippedDate.HasValue ?
order.ShippedDate.Value.ToShortDateString() : "",

ShipVia = order.ShipVia,

Freight = order.Freight,
ShipName = order.ShipName,
ShipAddress = order.ShipAddress,
ShipCity = order.ShipCity,
ShipRegion = order.ShipRegion,
ShipPostalCode = order.ShipPostalCode,
ShipCountry = order.ShipCountry
});

Fue necesario redefinir la entidad que se enva y no directo la entidad


Order ya que de no hacerse se obtiene un error de referencia circular,
causado por las entidades asociadas en Entity Framework

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Jquery UI Dialog Actualizacin

Actualizar la entidad implica crear un objeto javascript que represente la


entidad, lo bueno es que JSON.stringify() lo hace muy fcil, mapeando la
entidad directamente

function updateOrder() {

var order = new Object();


order.OrderID = $('#popuporderedit').data('orderId');

order.CustomerID = $('#ddlCustomer').val();
order.EmployeeID = $('#ddlEmployeer').val();

order.OrderDate = moment($('#txtOrderDate').val(),
"DD/MM/YYYY").toDate();
order.RequiredDate = moment($('#txtRequiredDate').val(),
"DD/MM/YYYY").toDate();

var shippedDate = moment($('#txtShippedDate').val(),


"DD/MM/YYYY");
order.ShippedDate = shippedDate == null ? null :
shippedDate.toDate();

order.ShipVia = $('#ddlShipVia').val();
order.Freight = $('#txtFreight').val();
order.ShipName = $('#txtShipName').val();
order.ShipAddress = $('#txtShipAddress').val();
order.ShipCity = $('#txtShipCity').val();
order.ShipRegion = $('#txtShipRegion').val();
order.ShipPostalCode = $('#txtShipPostalCode').val();
order.ShipCountry = $('#txtShipCountry').val();

var params = new Object();


params.order = order;

$.ajax({
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/ActualizarOrder",
data: JSON.stringify(params),
dataType: "json",
async: true,
success: function (data) {

alert('Actualizacion Correcta');
$('#popuporderedit').dialog("close");

},
error: function (request, status, error) {
alert(JSON.parse(request.responseText).Message);
}
});

El nico inconveniente fue con las fechas, al encontrarse en formato


dd/MM/yyyy esta no era reconocida por javascript, es por eso que con
ayuda de momentjs se logro cambiar de formato a una fecha correcta

Cdigo

Para el ejemplo se hace uso de Visual Studio 21010, la base de datos es


Sql Compract 3.5

[C#]

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
[C#]

[csharp] Pop

Publicado por Leandro Tuttini en 13:38 67 comentarios:


Etiquetas: ASP.NET, jQuery

martes, 29 de mayo de 2012


[ASP.NET] - GridView sumar columnas con jquery

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Introduccin

Cuando se trabaja integrando cdigo cliente (javascript) con asp.net


seguramente en algn punto se necesite realizar operaciones con tablas,
siendo el control GridView usado en la mayora de estos casos, es por eso
se intentara mostrar las diferentes formas en que se puede realizar
operaciones con cdigo cliente usando jquery para trabajar con tablas

Para el ejemplo se listara productos con sus respectivos precios, el usuario


completara la cantidad que se solicita de ese producto, realizando el
calculo del precio final que deber abonarse.

Calculo del precio por producto

La primer operacin que debe programarse corresponde al calculo a nivel


de fila, o sea de cada producto. La implementacin completa podr verse
en el cdigo dentro de al carpeta Ej1.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Como se observa en la imagen la columna del precio unitario es fija, el
usuario ingresa una cantidad y al quitar el foco del textbox
automticamente se calcula el precio.

Para lograrlo ser necesario adjuntar un evento de cambio a cada textbox


del gridview, recordemos que el control termina renderizado como una
tabla html, por lo tanto, se puede trabajar en el cliente con el html
resultante.

<script language="javascript" type="text/javascript">

$(document).ready(function() {

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
$("#<%=GridView1.ClientID%>
[id*='txtCantidad']").change(function() {

var tr = $(this).parent().parent();
var precio = $("td:eq(1)", tr).html();

$("td:eq(3) span", tr).html($(this).val() *


precio);

});

});

</script>

Ante un evento se recupera el textbox que lanza la accin, es por eso que
se utiliza $(this), el this en este caso es el textbox, se sube dos niveles en
la estructura del html, o sea a nivel del <tr> que contiene a ese textbox,
para luego aplicar la seleccin a otra columna, en este caso la del precio,
por eso se utiliza td:eq(1) seria la segunda columna (recordar que los
ndices comienzan en cero)

El ultimo paso ser asignar el resultado, se aplica la misma tcnica, se


selecciona la columna y por tratarse de un label de asp.net el cual
renderiza a <span> se usa este selector en jquery.

Si bien en la implementacin puede observarse solo una nica forma para


asignar el evento a los textbox contenido en la columna de gridview
pueden ser usados otro selectores de jquery dependiendo la necesitad:

Usando el atributo class

En este caso el selector hace uso de un atributo del control para poder
localizarlo, todos los textbox que el gridview genere tendrn el mismo
atributo class

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
$('#<%=GridView1.ClientID%> .cantidad').change(function() {
.

Es necesario definir este atributo en el control del tmplate del grid

Usando un doble selector

En este caso se aplicara una doble seleccin, primero se selecciona lo


definido a la derecha y sobre esto aplica lo definido en al izquierda.

$('td:eq(2) :text', '#<%=GridView1.ClientID%>


tr').change(function() {

La parte derecha selecciona todas las filas del grid, mientras que la
izquierda toma solo la tercer columna (Cantidad Pedido), el uso de :text
define que solo los textbox de la celda sern incluidos

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Usando el operador like *=

Por medio del operador de seleccin mediante bsqueda aproximada, se


puede tomar todos aquellos controles que tengan un misma patrn en su
id

$("#<%=GridView1.ClientID%>
[id*='txtCantidad']").change(function() {

En el caso del gridview creara un control por cada dato que se le asigne,
repitiendo el textbox N veces, pero todos tendrn la palabra txtCantidad
en alguna parte de su id

Calculo del precio Total

Calcular el precio total, implica sumar una columna completa para tener el
precio total que se sumara en el footer del gridview. La implementacin
completa podr verse en el cdigo dentro de al carpeta Ej2.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
El aadido que se realiza a la suma de la fila del grid solo implica la llamada
a una funciona para recalcular el total.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Un punto conflictivo cuando se suma una columna es el hecho de paginar
la grid, vamos a ver en este caso como se lograra una implementacin con
y sin paginado

Calculo total sin paginado

Al no paginar se puede reconocer el footer como ultima fila de la tabla


pudiendo aplicar selectores que tengan en cuenta esta situacin.

function CalcularTotal() {

var total = 0;
$('#<%=GridView1.ClientID%>
tr:not(:last)').each(function() {

var coltotal = parseFloat($("td:eq(3) span",


this).html());
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
this).html());

if (!isNaN(coltotal)) {
total += coltotal;
}

});

$('#<%=GridView1.ClientID%> tr:last td:eq(3)


span').html(total);
}

Se puede hacer uso de :last para agregar o descartar esta ultima fila del
grid donde se presentara el total.

Se recorre todas las filas del gridview, dejando fuera el footer, por eso es
:not(:last), se esta descartando el ultimo <tr>. Pero si se toma
exactamente la ultima fila cuando se quiere asignar el total resultante, por
eso se usa el tr:last

Nota: por supuesto hay que quitar la propiedad AllowPaging="True" del


gridview para probarlo sin paginado

Calculo total con paginado

Al tener paginado la ultima final ya no ser el footer, por lo tanto usar el


:last no funciona, se requiere otras tcnicas de seleccin

function CalcularTotal() {

var total = 0;
$("#<%=GridView1.ClientID%>
[id*='lblPrecio']").each(function() {

var coltotal = parseFloat($(this).html());

if (!isNaN(coltotal)) {
total += coltotal;
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
total += coltotal;
}

});

$("#<%=GridView1.ClientID%>
[id*='lblTotal']").html(total);

Se decide ir directamente a los controles que contienen la informacin.

Al tomar el valor del <span> (que representa el lblPrecio), puede que este
no sea un valor numrico valido, es por eso que se parsea a float, si
devuelve NaN es porque no es un numero que sumar.

Cdigo

Se ha usado Visual Studio 2008, es necesario SP1 del VS, como base de
datos Sql Compact 3.5

SumarColum

Publicado por Leandro Tuttini en 21:24 34 comentarios:

Etiquetas: ASP.NET, GridView, jQuery

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
martes, 20 de marzo de 2012
jqGridCrear jerarqua de registros con Tree Grid

Introduccin

La finalidad buscada con el articulo articulo ser demostrar como por


medio del componente jqGrid se pueden representar estructuras de rbol
en diferentes niveles de agrupacin

El ejmeplo esta basado en la ordenes de compra de la db Northwind,


tomando el campo OrderData y agrupando por ao y mes

Es por eso que la opciones de expandir primero mostrarn los aos, luego
los mese y al final la info de la orden.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Se puede dejar el campo de Customer sin ingresar un valor, lo cual listara
todas las ordenes registradas

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Es muy importante notar en el cdigo como se crea el grid que se enviara
por json al grid

var grid = new


{
page = 1,
records = orderList.Count,
total = orderList.Count,

rows = from item in orderList


select new
{
id = item.IdUnique,
cell = new string[]
{
item.Id,
item.Desc,
item.Level.ToString(),
item.Parent,
item.IsLeaf.ToString().ToLower(),
"false"
}
}

};

luego de los campos de datos se debe definir en orden los siguiente tems:

nivel
parent
si es un nodo hoja
si debe mostrarse expandido el nodo

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Cdigo

El ejemplo esta confeccionado con VS 2010 y Sql Compact (la db se


encuentra en la carpeta App_Data)

[C#] [C# Skydrive]

jqGrid - Tree

Publicado por Leandro Tuttini en 23:14 16 comentarios:


Etiquetas: jQuery

domingo, 27 de noviembre de 2011


jqGrid Listar Orden Compra (Maestro-Detalle)

Introduccin

La mayora de las veces los controles que incluye una herramienta de


desarrollo puedo no cumplir con las expectativas que uno busca si quiere
alcanzar una interfaz rica que aproveche toda la potencia de desarrollo, es
por eso que se debe recurrir a componentes externos.

Esta situacin suelo encontrarla al mostrar informacin en un grid, es por


eso que jqGrid es un control ideal para potenciar el desarrollo de la interfaz
del usuario en entorno web y adems se trata de un componente de libre
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
del usuario en entorno web y adems se trata de un componente de libre
uso.

Lo nico aspecto a tener en cuenta se relaciona con la necesidad de


conocer algo de javascript, concretamente jquery y de ser posible
invocacin a webmethods para recuperar la informacin del grid.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Configuracin

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Para poder hacer uso de jqGrid es necesario introducir en el proyecto
algunas libreras de javascript.

Las cuales pueden ser descargadas de la pagina jqGrid

La referencia a estas libreras podran hacerse de dos formas:

- usando el tag <script> en cada una de las paginas donde se requiera el


grid

1. <script src="Scripts/jquery-1.6.4.min.js"
type="text/javascript"></script>
2. <script src="Scripts/jquery-ui-1.8.16.custom.min.js"
type="text/javascript"></script>
3.
4. <script src="Scripts/jqGrid/grid.locale-es.js"
type="text/javascript"></script>
5. <script src="Scripts/jqGrid/jquery.jqGrid.min.js"
type="text/javascript"></script>
6. <link href="Scripts/jqGrid/ui.jqgrid.css"
rel="stylesheet" type="text/css" />

- o usando ScriptManager.RegisterClientScriptInclude(), esto es til


cuando se quiere registrar libreras para todas las paginas de forma global,
aplicndolo en el cdigo de la Master Page

01. public partial class SiteMaster :


System.Web.UI.MasterPage
02. {
03. protected override void OnInit(EventArgs e)
04. {
05.
06. ScriptManager.RegisterClientScriptInclude(Page,
typeof(Page), "jquery",
ResolveUrl(@"~/Scripts/jquery-
1.6.4.min.js"));
07. ScriptManager.RegisterClientScriptInclude(Page,
typeof(Page), "jqueryui",
ResolveUrl(@"~/Scripts/jquery-ui-
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
ResolveUrl(@"~/Scripts/jquery-ui-
1.8.16.custom.min.js"));
08. ScriptManager.RegisterClientScriptInclude(Page,
typeof(Page), "json2",
ResolveUrl(@"~/Scripts/json2.js"));
09.
10. ScriptManager.RegisterClientScriptInclude(Page,
typeof(Page), "gridlocale",
ResolveUrl(@"~/Scripts/jqGrid/grid.locale-
es.js"));
11. ScriptManager.RegisterClientScriptInclude(Page,
typeof(Page), "jqgrid",
ResolveUrl(@"~/Scripts/jqGrid/jquery.jqGrid.m
in.js"));
12.
13. base.OnInit(e);
14. }
15.
16. }

Al usarse un Master Page este podra verse afectado por la rutas relativas
de las paginas, lo que ocasionara una incorrecta resolucin de la url y el
acceso a los archivos .js, el mtodo ResolveUrl() nos ayuda a evitar este
problema.

Definicin del grid

Definir el grid con las opciones bsicas no es nada difcil, para separar el
cdigo de scripting del html de la pagina facilitando as el mantenimiento
vern en el ejemplo que he definido 3 .js segn la operacin de cada uno

En este caso en concreto, se usara el Grid.js, el cual define el grid


maestro

01. $("#tbOrders").jqGrid({
02. datatype: 'json',
03. colNames: ['Fecha Pedido', 'Fecha Solicitud',
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
03. colNames: ['Fecha Pedido', 'Fecha Solicitud',
'Direccion', 'Ciudad', 'Pais'],
04. colModel: [
05. { name: 'OrderDate', index: 'OrderDate',
width: 100, sortable: false },
06. { name: 'RequiredDate', index:
'RequiredDate', width: 100, sortable:
false },
07. { name: 'ShipAddress', index:
'ShipAddress', width: 250, sortable:
false },
08. { name: 'ShipCity', index: 'ShipCity',
width: 110, sortable: false },
09. { name: 'ShipCountry', index:
'ShipCountry', width: 110, sortable:
false }
10. ],
11. height: "300px",
12. onSelectRow: function (id) {
13.
14. getDetailsOrderByOrder(id);
15.
16. }
17. });

y un grid detalle

01. $("#tbDetailsOrder").jqGrid({
02. datatype: 'json',
03. colNames: ['Producto', 'Cantidad', 'Precio'],
04. colModel: [
05. { name: 'ProductName', index:
'ProductName', width: 250, sortable:
false },
06. { name: 'Quantity', index: 'RequiredDate',
width: 100, sortable: false },
07. { name: 'UnitPrice', index: 'UnitPrice',
width: 100, sortable: false }
08. ],
09. height: "200px",
10. width:"800px"
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
10. width:"800px"
11. });

La configuracin es bastante estndar para un uso bsico, a partir de aqu


hay miles de opciones, pero bsicamente se define las columnas (atributo
colNames), as como tambin las propiedades de cada columnas como
ser el ancho de las mismas.

En el grid maestro adems se define un evento, el cual enviara el id de la


entidad seleccionada para cargar as el detalle, por supuesto el id que
recibe como parmetro es el valor que mas adelante veremos en la
estructura json devuelta por el webmethod

Definicin de los Page Mtodos

El siguiente paso ser definir la informacin en el servidor para poder


recuperar los registros que cargaran el grid

Para esto se define dos Page Methods en la propia pagina web que
implementa los grid (podra usarse una pagina adicional para esta
definicin)

01. [WebMethod]
02. [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
03. public static string GetOrdersByCustomer(string
customer)
04. {
05.
06. var orders =
NorthwindData.GetOrdersByCustomer(customer);
07.
08. var grid = new
09. {
10. page = 1,
11. records = orders.Count(),
12. total = orders.Count(),
13.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
13.
14. rows = from item in orders
15. let orderdate = item.OrderDate.HasValue ?
item.OrderDate.Value.ToShortDateString
() : ""
16. let requireddate =
item.RequiredDate.HasValue ?
item.RequiredDate.Value.ToShortDateStr
ing() : ""
17.
18. select new
19. {
20. id = item.OrderID,
21. cell = new string[]{
22. orderdate,
23. requireddate,
24. item.ShipAddress,
25. item.ShipCity,
26. item.ShipCountry,
27. item.Customers.CompanyName
28.
29. }
30. }
31.
32. };
33.
34. return JsonConvert.SerializeObject(grid);
35. }

la estructura que requiere jqGrid es un tanto especial, y gracias a los


mtodos annimos es posible armarla, y como ultimo paso serializarla
usando la librera JSON.NET

La estructura es bastante simple, se define la pagina, la cantidad de


registros y el total, estos valores son tiles cuando el grid esta paginado,
en este caso no implementamos la paginacin.

Luego se definen las filas, en donde se transforma la entidad obteniendo


open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Luego se definen las filas, en donde se transforma la entidad obteniendo
un identidicado en el id, mas una propiedad cell que es en definitiva un
array de string con la informacin de cada columna requiere, es importante
en este punto respetar las posiciones en que debe ir cada dato con
respecto a las definicin de las columnas en el paso anterior.

El mismo proceso se aplica para recuperar los detalles

01. [WebMethod]
02. [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
03. public static string GetDetailsOrdersByOrder(int order)
04. {
05.
06. var orders =
NorthwindData.GetDetailsOrdersByOrder(order);
07.
08. var grid = new
09. {
10. page = 1,
11. records = orders.Count(),
12. total = orders.Count(),
13.
14. rows = from item in orders
15. select new
16. {
17. id = item.OrderID,
18. cell = new string[]{
19. item.ProductsReference.Value.Prod
uctName,
20. item.Quantity.ToString(),
21. item.UnitPrice.ToString("N2")
22. }
23. }
24.
25. };
26.
27. return JsonConvert.SerializeObject(grid);
28. }

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Invocar a los Page Methods

Los grid definidos no estn conectados de forma directa para que estos
invoquen los servicios de datos, sino que se definieron por separado para
que uno desde cdigo controle la invocacin de los servicios.

En el archivos ServiceInvoke.js se encuentra la definicin

01. function getOrdersByCustomer(customer) {


02.
03. var params = new Object();
04. params.customer = customer;
05.
06. $.ajax({
07. type: "POST",
08. contentType: "application/json; charset=utf-8",
09. url: "Default.aspx/GetOrdersByCustomer",
10. data: JSON.stringify(params),
11. dataType: "json",
12. async: false,
13. success: function (data, textStatus) {
14.
15. if (textStatus == "success") {
16.
17. $("#tbDetailsOrder").clearGridData();
18.
19. var grid = $("#tbOrders")[0];
20. grid.addJSONData(jQuery.parseJSON(data.d
));
21.
22. }
23.
24. },
25. error: function (request, status, error) {
26. alert(jQuery.parseJSON(request.responseText)
.Message);
27. }
28. });
29.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
29.
30. }

Por medio de la lnea

$("#tbDetailsOrder").clearGridData();

es que se limpian los registros del grid de detalle, ya que al recargarse el


principal ya no hay un registro seleccionado.

01. function getDetailsOrderByOrder(order) {


02.
03. var params = new Object();
04. params.order = order;
05.
06. $.ajax({
07. type: "POST",
08. contentType: "application/json; charset=utf-8",
09. url: "Default.aspx/GetDetailsOrdersByOrder",
10. data: JSON.stringify(params),
11. dataType: "json",
12. async: false,
13. success: function (data, textStatus) {
14.
15. if (textStatus == "success") {
16.
17. var grid = $("#tbDetailsOrder")[0];
18. grid.addJSONData(jQuery.parseJSON(data.d
));
19.
20. }
21.
22. },
23. error: function (request, status, error) {
24. alert(jQuery.parseJSON(request.responseText)
.Message);
25. }
26. });
27.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
27.
28. }

Ejemplo de Cdigo

El ejemplo fue desarrollado con visual Studio 2008 y Sql Server 2008 R2
Express

Dentro de la carpeta DbScript se encuentra un .sql con la estructura de


la db en caso de no poder usar el .mdf adjunto en la solucin

[C#] [C# SkyDrive]

ListarOr 1

Publicado por Leandro Tuttini en 04:56 46 comentarios:


Etiquetas: jQuery

domingo, 8 de mayo de 2011


[jQuery] RadioButton y CheckBox

Introduccin

Despus del artculo donde se analizo la forma de trabajar con controles


open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Despus del artculo donde se analizo la forma de trabajar con controles
de lista como ser los combos y listbox

[jQuery] Trabajo con ListBox y Combos

seguiremos con otro grupo de controles igual de importantes: Radio


Buttons y Checkbox.

Listado de temas

1. RadioButton
1. Recuperar tem Seleccionado
2. Asignar Seleccin
3. RadioButtonList
2. CheckBox
1. Recuperar tem Seleccionado
2. Asignar Seleccin
3. CheckBoxList

1- RadioButton

1.1 Recuperar tem Seleccionado

En las siguientes lneas se observara algunas de las formas posibles en que


se puede recuperar el tem seleccionado en un radio button.

01. function btnEj1SeleccionUsandoClass_OnClick() {


02.
03. var valor = $('.Ej1radio:checked').val()
04.
05. $('#Ej1Resultado').html(valor);
06. }
07.
08. function btnEj1SeleccionUsandoName_OnClick() {
09.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
09.
10. var valor =
$("input[name='Ej1radio']:checked").val()
11.
12. $('#Ej1Resultado').html(valor);
13. }
14.
15. function btnEj1SeleccionUsandoTabla_OnClick() {
16.
17. var valor = $("#Ej1Table :radio:checked").val()
18.
19. $('#Ej1Resultado').html(valor);
20. }

Bsicamente en todas se hace uso del selector :checked para tomar los
radio marcados por el usuario, al saber que solo uno puede seleccionarse,
se recupera el valor mediante el mtodo val()

1- se usa una clase asignada a los distintos radio button, por el uso del
punto, este es el selector de clase de jquery

2- se selecciona por medio de atributo name, todos los radio deben tener
el mismo

3- se selecciona la tabla que contiene los controles , luego los radio


(mediante :radio), hay que mencionar que si en la misma tabla existe otro
grupo de radio button este tipo de seleccin no podra ser aplicado,
porque tomara todos los radio sin discriminar cada agrupacin

1.2 Asignar seleccin

La asignacin de un valor especifico a los radio se reduce a cambiar el


atributo checked.

01. function btnEj2SeleccionarConTabla_OnClick() {


02.
03. var valor = $('#txtEj2').val();
04.
05. if (valor == null)
06. return;
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
06. return;
07.
08. $("#Ej2Table :radio[value='" + valor +
"']").attr('checked', true);
09.
10. }
11.
12.
13. function btnEj2SeleccionarPorName_OnClick() {
14.
15. var valor = $('#txtEj2').val();
16.
17. if (valor == null)
18. return;
19.
20. $(":radio[name='Ej2radio'][value='" + valor +
"']").attr('checked', true);
21.
22. }

En ambos caso se asigna el atributo checked a true para que este se


desmarque, como los radio trabajaban en grupo no hace falta desmarcar al
resto, ya que esto se hace automticamente.

1- se selecciona la tabla que contiene el radio y se usa como filtro el valor


ingresado en el textbox

2- se usa el nombre que define al grupo de radio buttons, luego sobre


estos filtrar por el valor

Tambin existen otras formas de seleccionar un tem:

01. function btnEj2SeleccionarAtributoJavascript_OnClick() {


02.
03. var valor = $('#txtEj2').val();
04.
05. if (valor == null)
06. return;
07.
08. var option = $(":radio[name='Ej2radio'][value='" +
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
08. var option = $(":radio[name='Ej2radio'][value='" +
valor + "']");
09.
10. if (option.length > 0)
11. option[0].checked = true;
12.
13. }
14.
15. function btnEj2SeleccionarConForEach_OnClick() {
16.
17. var valor = $('#txtEj2').val();
18.
19. if (valor == null)
20. return;
21.
22. $.each($("#Ej2Table :radio"), function() {
23.
24. if (this.value == valor) {
25. this.checked = true;
26. }
27.
28. });
29.
30. }

1- se busca el option que coincide, pero la accin de checkear se logra


por medio de la propiedad provista por javascript. El usar el tem cero [0],
no es porque la seleccin devuelve varios resultados en la bsqueda en un
array, sino que se esta tomando el control javascript de la seleccin de
jquery.

2- aqu la bsqueda se realiza mediante un loop por todos los radio,


comparando su valor con el buscado, el que coincida ser marcado

1.3 RadioButtonList

En esta seccin se har uso de control propuesto por asp.net para


representar un conjunto de radios.

Si se analiza con el IE Developer Tools, al cual se accede presionado


open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Si se analiza con el IE Developer Tools, al cual se accede presionado
F12, se podr inspeccionar el html generado por el control de lista de radio
buttons

Como se observa la opcin esta compuesta por el input comn de html,


pero la descripcin esta dentro de un label

01. function btnEj3SeleccionUsandoName_OnClick() {


02.
03. var option = $(":radio[name='rdlEj3']:checked");
04. var texto = $('label', option.parent());
05.
06. var msg = 'texto: {0}, valor:
{1}'.format(texto.html(), option.val());
07.
08. $('#Ej3Resultado').html(msg);
09. }

Es por eso que luego de tomar la option seleccionado se usa el parent()


para subir un nivel, ahora estaremos posicionado en el tag <td>, y dentro
de este se recupera el label, de esta forma se obtendr la descripcin del
option marcado.

Algo interesante aqu es que en la lnea

$('label', option.parent())

se esta usando un selector de un selector, o sea se buscara solo el label


que este dentro de ese tag <td> y no en todo el sitio, es por eso que se
separa por coma, a la izquierda ira la seleccin del mbito donde aplica el
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
separa por coma, a la izquierda ira la seleccin del mbito donde aplica el
selector de la derecha.

2- CheckBox

2.1 - Recuperar tem Seleccionado

En la seleccin del checkbox se necesita algo mas de cdigo, ya que


pueden ser varios los tems marcados.

En todos los ejemplos se recorren los checks elegidos y se vuelca a una


array para mostrar el resultado en pantalla, aqu se aplica la misma tcnica
que en el artculo previo, cuando se analizo el ListBox.

01. function btnEj1SeleccionUsandoClass_OnClick() {


02.
03. var list = new Array();
04.
05. $.each($('.Ej1check:checked'), function() {
06.
07. var msg = 'valor: {0}'.format($(this).val());
08. list.push(msg);
09.
10. });
11.
12. $('#Ej1Resultado').html(list.join('
13. '));
14. }
15.
16. function btnEj1SeleccionUsandoName_OnClick() {
17.
18. var list = new Array();
19.
20. $.each($("input[name='Ej1check']:checked"),
function() {
21.
22. var msg = 'valor: {0}'.format($(this).val());
23. list.push(msg);
24.
25. });
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
25. });
26.
27. $('#Ej1Resultado').html(list.join('
28. '));
29.
30. }
31.
32. function btnEj1SeleccionUsandoTabla_OnClick() {
33.
34. var list = new Array();
35.
36. $.each($("#Ej1Table :checkbox:checked"), function()
{
37.
38. var msg = 'valor: {0}'.format($(this).val());
39. list.push(msg);
40.
41. });
42.
43. $('#Ej1Resultado').html(list.join('
44. '));
45.
46. }

1- se hace uso de la clase asignada a los ckeck para determinar cuales


fueron marcados, al igual que los radio se usa el punto de jquery como
selector

2- el mismo nombre es usado en cada check que forma parte del grupo,
este es usando este como selector, el name es un atributo por eso es que
se define entre []

3- se selecciona la tabla que contiene los checks, recorriendo los


seleccionados

2.2 - Asignar Seleccin

Aqu tambin hay varias formas de lograrlo al igual que los radio, pero a
diferencia del control anterior si es necesario un paso previo que limpie la
seleccin previa, es por eso que se hace uso del metodo attr() que asigna
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
seleccin previa, es por eso que se hace uso del metodo attr() que asigna
el atributo checked en false

$("#Ej2Table :checkbox").attr('checked', false);

puede variar la forma en que se aplica la seleccin de jquery, pero la idea


es obtener todos los checks y de un golpe desmarcarlos.

En estos ejemplo se puede ingresar en el TextBox varios valores separados


por coma, es por eso que se recorre cada numero ingresado para tomar el
check que mapea con este valor y marcarlo. Se logra este objetivo por
medio del $.each y el split() de la cadena de valores ingresados.

01. function btnEj2SeleccionarConTabla_OnClick() {


02.
03. var valor = $('#txtEj2').val();
04.
05. if (valor == null)
06. return;
07.
08. $("#Ej2Table :checkbox").attr('checked', false);
09.
10. $.each(valor.split(','), function() {
11.
12. $("#Ej2Table :checkbox[value='" + this +
"']").attr('checked', true);
13.
14. });
15.
16. }
17.
18.
19. function btnEj2SeleccionarPorName_OnClick() {
20.
21. var valor = $('#txtEj2').val();
22.
23. if (valor == null)
24. return;
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
24. return;
25.
26. $(":checkbox[name='Ej2check']").attr('checked',
false);
27.
28. $.each(valor.split(','), function() {
29.
30. $(":checkbox[name='Ej2check'][value='" + this +
"']").attr('checked', true);
31.
32. });
33.
34. }

1- se hace uso de la tabla para tomar los check que estn contenidos

2- se recuperan los check por el atributo name asignado al grupo

01. function btnEj2SeleccionarAtributoJavascript_OnClick() {


02.
03. var valor = $('#txtEj2').val();
04.
05. if (valor == null)
06. return;
07.
08. $(":checkbox[name='Ej2check']").attr('checked',
false);
09.
10. $.each(valor.split(','), function() {
11.
12. var option =
$(":checkbox[name='Ej2check'][value='" + this
+ "']");
13.
14. if (option.length > 0)
15. option[0].checked = true;
16. });
17.
18. }
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
3- se hace uso de la propiedad checked de javascript para marcar el
control, aqu la seleccin recupera el check concreto, pero luego con el
uso de [0] se toma el control puro en javasscript que contiene esa
propiedad checked

Remarco que la propiedad checked no es parte de jquery, este usa el


attr() para cambiar el valor, solo javascript posee esta propiedad, por eso
el uso del [0] en el resultado del selector de jquery

01. function btnEj2SeleccionarConForEach_OnClick() {


02.
03. var valor = $('#txtEj2').val();
04.
05. if (valor == null)
06. return;
07.
08. $(":checkbox[name='Ej2check']").attr('checked',
false);
09.
10.
11. $.each($("#Ej2Table :checkbox"), function() {
12.
13. var check = this;
14.
15. $.each(valor.split(','), function() {
16.
17. if (check.value == this)
18. check.checked = true;
19.
20. });
21.
22. });
23.
24. }

4- se aplica la misma tcnica del punto 3, pero se realiza un doblo loop,


open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
4- se aplica la misma tcnica del punto 3, pero se realiza un doblo loop,
primero por cada check en la tabla y luego por los valores ingresados. No
digo que esta sea la forma mas optima de implementarlo, pero me pareci
interesante mostrarlo para conocer como unir dos ciclos.

01. function btnEj2SeleccionarUniendoValores_OnClick() {


02.
03. var valor = $('#txtEj2').val();
04.
05. if (valor == null)
06. return;
07.
08. $(":checkbox[name='Ej2check']").attr('checked',
false);
09.
10. var valuesList = Array();
11.
12. $.each(valor.split(','), function() {
13.
14. var value = "[value='{0}']".format(this);
15. valuesList.push(value);
16.
17. });
18.
19. $(":checkbox[name='Ej2check']").filter(valuesList.jo
in(',')).attr('checked', true);
20.
21. }

5- esta ultima tcnica de seleccin es bastante particular ya que arma un


array de filtros que es ejecutado mediante el mtodo filter() de jquery
sobre la seleccin de todos los checks. Es necesario marcar que cada tem
del filtro deber ser separado por comas.

2.3- CheckBoxList

Al igual que con el RadioButtonList, es una buena idea inspeccionar el html


resultante del render
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Algo interesante que se puede observar es que el control rendiza una tabla
de nombre rdlEj3 que podra ser usada para seleccionar los check
contenidos en esta.

01. function btnEj3SeleccionUsandoName_OnClick() {


02.
03. var options = $("#rdlEj3 :checkbox:checked");
04.
05. var list = new Array();
06.
07. $.each(options, function() {
08.
09. var option = $(this);
10. var valor =
$(this).parent().attr('hiddenValue');
11. var texto = $('label', option.parent());
12.
13. var msg = 'texto: {0}, valor:
{1}'.format(texto.html(), valor);
14. list.push(msg);
15.
16. });
17.
18. $('#Ej3Resultado').html(list.join('
19. '));
20. }

En este caso se toma los check dentro de la tabla que asp.net crea para
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
En este caso se toma los check dentro de la tabla que asp.net crea para
contener estos controles, tomando de esta solo los tildados.

Algo que debe marcarse es que el CheckBoxList no ingresa el valor de cada


tem, es por eso que en el cdigo .net en el evento Page_Load cuando se
asignan los tems, se pusieron unas lneas que agregan el valor del tem

1. foreach (ListItem item in rdlEj3.Items)


2. {
3. item.Attributes["hiddenValue"] = item.Value;
4. }

Esto se rendizan en el html dentro de un tag <span>, es por eso que en


las lneas 9 al 11 se hace uso del parent() para subir un elemento al
seleccionado y recuperar esta informacin.

El control base que provee asp.net solo crea el atributo value=on como
puede verse en la imagen, el atributo hiddenValue es creado al en el loop
de cada tem luego de cargar la lista.

Ejemplo de cdigo

Publicado por Leandro Tuttini en 16:58 10 comentarios:


Etiquetas: jQuery

viernes, 29 de abril de 2011

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
viernes, 29 de abril de 2011
[jQuery] Trabajo con ListBox y Combos

Introduccin

Este artculo se pretende continuar lo empezado en:

[jQuery] Por donde comenzar

En esta ocasin trataremos un conjunto diferente de controles, estos muy


usados en un desarrollo web.

En este caso particular trataremos controles de lista: ListBox y Combos.


Notando cuan similares son a la hora de trabajarlos.

Seleccin de tems

En los ejemplos indicados como 1 y 2, se recuperan los tems marcados por


parte del usuario, pudiendo manipularlos y trabajar con la informacin.

01. function btnEj1Seleccion_OnClick() {


02.
03. var list = new Array();
04.
05. $.each($('#Ej1Select :selected'), function()
{
06.
07. var msg = 'texto: {0}, valor: {1}
08. '.format($(this).text(), $(this).val());
09. list.push(msg);
10.
11. });
12.
13. $('#Ej1Resultado').html(list.join(''));
14.
15. }
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
15. }
16.
17. function btnEj2Seleccion_OnClick() {
18.
19. var optionSelected = $('#Ej2Select
:selected');
20.
21. var msg = 'texto: {0}, valor:
{1}'.format(optionSelected.text(),
optionSelected.val());
22.
23. $('#Ej2Resultado').html(msg);
24.
25. }

Los selectores usados en ambos casos son idnticos, solo lo diferencia la


seleccin mltiple que puede brindar un ListBox, es por eso que aplica un
loop por cada tem marcado por el usuario.

En este cdigo hay que marcar algunos puntos de inters:

La funcin $.each() recorre la seleccin de una lista de tems y aplica una


funcin por cada uno de ellos.

En este caso en concreto se recorre cada tem seleccionado de la lista, o


sea se obtiene cada <option> tomando de este el valor y el texto. Es
importante notar que esta funcin tiene acceso a cada tem por medio del
this, pero se trata de un objeto javascript y no jquery, es por eso que se
aplica nuevamente un selector $(this), para tener acceso a los mtodos
que permiten acceder recuperar la informacin.

Con respecto al selector, este accede al control por medio del sus id, por
eso el uso del #, pero de este se filtra adems los seleccionados usando el
:selected.

Por fuera de la funcin se crea un array de javascript para ubicar cada


dato marcado, se inserta el texto resultante de cada item por medio de
push(), y al final se lo une por medio del join(), para lograr un solo string.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Seguramente se habr notado adems el uso del una funcin format() para
reemplazar en el texto ciertas posiciones con un dato en concreto, bien
esta funcin en si no es estndar de javascript, sino que se encuentra
definida en utils.js, y bsicamente aplicara como un mtodo de extensin
para los tipos de datos string.

El trabajo con combos es idntico a la lista, pero solo se toma un tem


accediendo de forma directa, no requiere ser recorrido sus tems, por eso
es algo ms simple aplicar los selectores.

Agregar / Remover tems

La seccin marcada para el Ejemplo 3, representa la operacin de agregar


y remover elementos en una lista.

01. function btnEj3Agregar_OnClick() {


02.
03. var ej3Texto = $('#txtEj3Texto');
04. var ej3Valor = $('#txtEj3Valor');
05.
06. var newItem =
$('<option/>').text(ej3Texto.val()).val(e
j3Valor.val());
07. $("#Ej3Select").append(newItem);
08.
09. }
10.
11. function btnEj3AgregarDespuesSeleccion_OnClick()
{
12.
13. var itemsSelected = $('#Ej3Select
:selected');
14.
15. if (itemsSelected.length == 0) {
16. alert('Debe seleccionar un item');
17. return;
18. }
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
18. }
19.
20. var ej3Texto = $('#txtEj3Texto');
21. var ej3Valor = $('#txtEj3Valor');
22.
23. var newItem =
$('<option/>').text(ej3Texto.val()).val(e
j3Valor.val());
24. newItem.insertAfter(itemsSelected[0]);
25.
26. }
27.
28.
29. function btnEj3Seleccion_OnClick() {
30.
31. var list = new Array();
32.
33. $.each($('#Ej3Select :selected'), function()
{
34.
35. var msg = 'texto: {0}, valor: {1}
36. '.format($(this).text(), $(this).val());
37. list.push(msg);
38.
39. });
40.
41. $('#Ej3Resultado').html(list.join(''));
42.
43. }
44.
45. function btnEj3RemoverSeleccion_OnClick() {
46.
47. $.each($('#Ej3Select :selected'), function()
{
48.
49. $(this).remove();
50.
51. });
52. }

El agregar una nueva opcin requiere que el html de <opcin> sea creado,
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
El agregar una nueva opcin requiere que el html de <opcin> sea creado,
es por eso que se define este en el selector, para luego disponer de
mtodo de text() y val() para asignar la informacin proveniente del input
del usuario.

Una vez creado el nuevo tem solo se hace un append() a la lista


existente, tambin se podran usar mtodos como ser insertBefore() o
insertAfter() para controlar la ubicacin del nuevo elemento, pero esto
requiere que se indique que elemento ser tomado como objetivo. En el
ejemplo al hacer uso de estos mtodos se debe asegurar que al menos un
tem esta marcado para que funcione correctamente, si mas de uno se ha
seleccionado solo se toma el primero.

El remover un tem es muy simple, solo se recorre la seleccin y se aplica


el remove(), al igual que en la seleccin, el this representa cada tem en el
loop, aqu tambin es necesario aplicar nuevamente el selector para tener
acceso a los mtodo de jquery implementa.

Trabajar con combos es idntico a las listas, solo que se opera con un solo
tem a la vez, el ejemplo 4 implementa justamente estas acciones en un
combo:

01. function btnEj4Agregar_OnClick() {


02.
03. var ej4Texto = $('#txtEj4Texto');
04. var ej4Valor = $('#txtEj4Valor');
05.
06. var newItem =
$('<option/>').text(ej4Texto.val()).val(ej4Valor.
val());
07. $("#Ej4Select").append(newItem);
08.
09. }
10.
11. function btnEj4Seleccion_OnClick() {
12.
13. var optionSelected = $('#Ej4Select :selected');
14.
15. var msg = 'texto: {0}, valor:
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
15. var msg = 'texto: {0}, valor:
{1}'.format(optionSelected.text(),
optionSelected.val());
16.
17. $('#Ej4Resultado').html(msg);
18.
19. }
20.
21. function btnEj4RemoverSeleccion_OnClick() {
22.
23. $('#Ej4Select :selected').remove()
24.
25. }

Algo que quizs no he marcado en los otros ejemplos es que al utilizar algo
como esto

var optionSelected = $('#Ej4Select :selected');

se debe comprender que se esta asignado a la variable la seleccin del


objeto completo, es por eso que luego se puede acceder a la funcionalidad
provista por jquery.

Asignar Seleccin

En algn momento seguramente se requiera marcar un valor de la lista o


combo sin que el usuario realice la accin, sino que ser por medio de
cdigo, por suerte jquery hace esto muy simple, implementndose de igual
forma no importa de que lista se trate.

En los ejemplos 5 y 6, se puede apreciar la implementacin:

01. function btnEj5SeleccionarPorValor_OnClick() {


02.
03. var valor = $('#txtEj5').val();
04.
05. $('#Ej5Select').val(valor);
06.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
06.
07. }
08.
09. function btnEj6SeleccionarPorValor_OnClick() {
10.
11. var valor = $('#txtEj6').val();
12.
13. $('#Ej6Select').val(valor);
14.
15. }

Si se escribe un valor correcto en el TextBox, solo har falta asignar el


val() al selector del control y eso es todo.

Listas ASP.NET

Hasta ahora hemos estado trabajando en los ejemplos con controles html,
pero se debi a que operar con estos o con el control de lista o combo del
asp.net es idntico.

En el ejemplo 7 se podr apreciar justamente este punto:

01. function btnEj7Agregar_OnClick() {


02.
03. var ej7Texto = $('#txtEj7Texto');
04. var ej7Valor = $('#txtEj7Valor');
05.
06. var newItem =
$('<option/>').text(ej7Texto.val()).val(e
j7Valor.val());
07. $('#<%=Ej7Select.ClientID%>').append(newItem
);
08.
09. }
10.
11. function btnEj7Seleccion_OnClick() {
12.
13. var list = new Array();
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
13. var list = new Array();
14.
15. $.each($('#<%=Ej7Select.ClientID%>
:selected'), function() {
16.
17. var msg = 'texto: {0}, valor: {1}
18. '.format($(this).text(), $(this).val());
19. list.push(msg);
20.
21. });
22.
23. $('#Ej7Resultado').html(list.join(''));
24.
25. }
26.
27. function btnEj7RemoverSeleccion_OnClick() {
28.
29. $.each($('#<%=Ej7Select.ClientID%>
:selected'), function() {
30.
31. $(this).remove();
32.
33. });
34. }

Aplicar selectores a un control de asp.net solo requiere el uso de la


propiedad ClientID, si es que se usa el id del control para acceder al
mismo, esto se aplica por si asp.net renombra esta propiedad al realizar el
render del html que enva al cliente.

Cdigo de Ejemplo

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Publicado por Leandro Tuttini en 21:18 4 comentarios:

Etiquetas: jQuery

domingo, 17 de abril de 2011


[jQuery] Por donde comenzar

Introduccin

jQuery es una de las libreras muy mencionada en los ultimo tiempo para el
desarrollo de aplicaciones web.

Usar javascript de forma estndar puede ser algo bastante tedioso ya que
no es una sintaxis del todo amigable para el trabajo diario, o al menos para
quien esta acostumbrado a programa en un lenguaje amenos como ser C#
o VB.NET.

Es por eso que surge jQuery, para solventar este problema, siendo el mas
conocido entre los frameworks de javascript, (esta se gano su lugar en los
tmplate para la creacin de proyectos como son los utilizados en
aplicaciones con ASP.NET MVC), y el que dio impulso a la utilizacin de
este tipo de frameworks, vale aclarar adems que tambin existen otro
como ser: Prototype, MooTools, etc

Este articulo en particular se sumara a los miles que existen publicados


para aportar un punto de inicio para quienes aun no conocen la magia de
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
para aportar un punto de inicio para quienes aun no conocen la magia de
esta librera.

Aqu no se pretende explicar cada unos de los aspectos de jQuery, porque


solo el tema se selectores es enorme y muy variado, sino que iremos a
casos concretos, y analizaremos particularidades en el uso de la librera.

jQuery es muy amplio, con mucha flexibilidad, cuando la usen vern que no
hay una sola forma de hacer las cosas, a veces se pueden aplicar un
selector con distintas combinaciones y todas estarn correctas.

Es por eso que es necesario recurrir a la fuente y consultar la


documentacin provista por la propia librera en su sitio web: jQuery

Para empezar veremos dos puntos bsicos que afectan a la interacciones


de asp.net y javascript, luego continuaremos con el anlisis de dos
controles simples para entrar en tema.

1 Acceder a los controles de asp.net

Algo que debe conocerse cuando se trabaja con controles desde


javascript es como hacer referencia a estos.

Por ejemplo, si en el html de una pagina se define:

<input id="Text1" type="text" />

desde javascript podra seleccionar el control usando:

var text1 = document.getElementById('Text1');

de esta forma se seleccionado el control cuando se trata de uno del tipo


html, pero que sucede si ahora se tiene un control de asp.net, aqu ya no
somos quienes controlamos el render del control, por lo tanto el ID
asignado al mismo puede variar.

Muy bien, ahora si realizamos unas pruebas y ponemos un asp:TextBox en


open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Muy bien, ahora si realizamos unas pruebas y ponemos un asp:TextBox en
una pgina

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

al acceder desde el browser se vera como

<input name="TextBox1" type="text" id="TextBox1" />

ups, pero que sucedi aqu el id no se modifico, seguro pensaran que


estoy mintiendo, pues bien, lo que sucede es que en algunas situaciones
asp.net no cambie el id del control, porque en este caso no lo requiere, el
verdadero problema se presente cuando este control esta contenido
dentro de ciertos contenedores, como ser: un User Control, la Master
Page, o controles que repiten un tmplate, como ser el ListView, GridView,
Repeater, etc

Entonces que sucede ahora si se crear un User Control


(WebUserControl1.ascx) con el textbox dentro del mismo y se lo ubica en
una pagina, al acceder al cdigo del browser se obtendr

<input name="WebUserControl11$TextBox1" type="text"


id="WebUserControl11_TextBox1" />

Ahora si se comprueba como asp.net modifica el id asignado al control en


tiempo de diseo, asp.net necesito ponerle un prefijo con el nombre del
User Control para que este sea nico, ya que en la pagina puede usarse
mas de un mismo user control, sino redefine el id puede haber colisiones en
los nombres.

Como se hara para seleccionar este control sino se conoce previamente el


id que ser generado, pues bien, se dispone en asp.net de la propiedad
ClientID, siendo usada de la siguiente forma:

var userControlText1 =
document.getElementById('<%=TextBox1.ClientID%>');

al inspeccionar el cdigo resultante en el browser se obtendr


open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
var userControlText1 =
document.getElementById('WebUserControl11_TextBox1');

el tag <%= %> permite ubicar all el valor de la propiedad ClientID.

Si bien esto que comento parece un dato menos, es bastante importante


cuando se comienzan a dar los primeros paso en javascript mezclado con
controles del asp.net

2 Acceder a controles asp.net desde un archivo .js

Continuando con el tip del punto anterior, avanzaremos en un tema que


por ah pueda generar dificultades a la hora de ordenar el cdigo.

En algunas oportunidades uno requiera hacer uso de archivos .js para


llevar all el cdigo javascript y trabajarlo de forma separada al html que
esta en el aspx, pero es aqu donde empiezan los problemas.

Resulta que si se hace uso del tag <% %>, este solo puede ser aplicado
dentro de la pgina donde se hace el render por parte de asp.net, o sea
solo funciona dentro del aspx

El archivo .js es referenciado por el aspx, pero este no se incluye en el


proceso de render, por lo tanto el ClientID nunca ser reemplazado.

Pero hay una solucin a este punto, la cual consiste en dejar la definicin
del tag <% %> dentro del aspx, pero que la misma solo asigne a una
variable javascript el nombre del control, luego sera usada en el .js para
as poder tomar el control y trabajarlo.

En la carpeta Ejemplo2 esta la implementacin del cdigo de ejemplo, se


observara la declaracin de las lneas

1. <script type="text/javascript">
2.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
2.
3. var TextBox1 = '<%=TextBox1.ClientID%>';
4.
5. </script>

en donde se asigna en la pagina aspx el nombre como string, para luego


dentro del .js usar

1. function ObtenerValor() {
2.
3. var text1 = document.getElementById(TextBox1);
4. alert(text1.value);
5.
6. }

Es necesario apreciar como cambio la seleccin al usar el


getElementById(), usando ahora el nombre de la variable.

El nico problema que se presenta es que por cada control que se quiera
usar dentro de .js ser necesario crear una variable en la pagina que
incluya el ID que asp.net asigna.

3 Obtener y asignar el valor de un Texbox

Seguramente se preguntaran cuando comenzamos, es cierto hasta aqu


se presentaron temas mas relacionados con javascript, que al propio
jquery, pero eran necesario tenerlos presente ya que estos tambin
afectan al desarrollo.

Bien, comencemos con algo simple.

Seleccionemos el valor de un TextBox, copiando el contenido a otro:

[HTML]

01. <form id="form1" runat="server">


02. <table>

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
02. <table>
03. <tr>
04. <td>
05. <input id="txtInfo" type="text" />
06. </td>
07. <td>
08. <input id="btnMostrar" type="button"
value="button"
onclick="Mostrar_OnClick();"/>
09. </td>
10.
11. </tr>
12. <tr>
13. <td colspan="2">
14. <input id="txtInfoCopia" type="text" />
15. </td>
16. </tr>
17. </table>
18. </form>

[JavaScript]

1. function Mostrar_OnClick() {
2.
3. var info = $('#txtInfo').val();
4.
5. $('#txtInfoCopia').val(info);
6.
7. }

como se observa jquery lo hizo bien simple.

Es preciso conocer que cuando uno selecciona un control y lo hace por el


atributo id debe anteponer el #, este es uno de los tanto selectores
tiene jquery que iremos viendo.

Para que esto funcione es necesario contar con la librera, en este caso se
encuentra en la lnea

<script src="../script/jquery-1.5.2.min.js" type="text/javascript"></script>


open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
por lo general se sita en la propia pagina, pero tambin es comn verlo en
la Master Page para que todas incluyan la librera, y no se tenga que
declarar en cada una particularmente.

Y que sucede si se tratan de controles de asp.net, bien es igual de simple,


pero conociendo lo que vimos en el punto: 1 Acceder a los controles de
asp.net, se obtendra la misma funcionalidad usando:

[JavaScript]

1. function MostrarASPNET_OnClick() {
2.
3. var info = $('#<%=txtInfoASPNET.ClientID%>').val();
4.
5. $('#<%=txtInfoCopiaASPNET.ClientID%>').val(info);
6.
7. }

Avancemos un poco inicializando los textbox, para hacerlo individualmente


se podra aplicar algo como esto:

[JavaScript]

1. function LimpiarASPNET_OnClick() {
2.
3. $('#<%=txtInfoASPNET.ClientID%>').val('');
4.
5. $('#<%=txtInfoCopiaASPNET.ClientID%>').val('');
6.
7. }

es idntico a lo que ya se viene viendo solo que no se le pasa valor

Y si se quiere limpiar el contenido de todos los textbox, se deber asignar


uno a uno?, no es necesario, hay tcnicas mucho mas simples:

[JavaScript]

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
1. function LimpiarTodos_OnClick() {
2.
3. $(':text').val('');
4.
5. }

aqu se puede ver otro selector distinto proporcionado por jQuery, en este
caso se trata de un selector por tipo text el cual aplicara el valor a todos
los controles que encuentre del tipo textbox.

Ahora bien, lo lindo que tiene esta librera es que no hay una sola forma de
hacer esto, si se revisa la documentacin: :text Selector, menciona que
usar $('[type=text]') o $('*:text') y tambin $('input:text') son
equivalentes, pero por simplicidad en la escritura se aplica :text

Nota: los ejemplos de esta seccin se encuentra en el Ejemplo 3 del


cdigo publicado.

4 Trabajar con controles Label

Asignar un valor a un label difiere un poco de como se hara a un TextBox.

En el ejemplo de la carpeta Ejemplo 4 se encontrara una muestra de


como trabajar con este otro control.

en la pagina se agrego un label html

<label id="lblInfoCopia" />

y uno de asp.net

<asp:Label ID="lblInfoCopiaASPNET" runat="server"></asp:Label>

accederlo de forma individual no representa mayor problema, salvo por el


hecho de cambiar el val() por el html() para tomar o asignar un valor.

Pero el seleccionar todos los labels de la pagina no es tan directo, ya que


se renderiza diferentes en html estos controles, si se analiza el cdigo
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
se renderiza diferentes en html estos controles, si se analiza el cdigo
generado en el browser se notara que el label de html sigue siendo un
label, pero el de asp.net no lo es, ya que es transformado a un tag
<span> cuando se convierte

Es por esto que debe seleccionarse distinto cada control.

[JavaScript]

01. function Mostrar_OnClick() {


02.
03. var info = $('#txtInfo').val();
04.
05. $('#lblInfoCopia').html(info);
06.
07. }
08.
09. function MostrarASPNET_OnClick() {
10.
11. var info = $('#<%=txtInfoASPNET.ClientID%>').val();
12.
13. $('#<%=lblInfoCopiaASPNET.ClientID%>').html(info);
14.
15. }
16.
17. function LimpiarASPNET_OnClick() {
18.
19. $('#<%=txtInfoASPNET.ClientID%>').val('');
20.
21. $('#<%=lblInfoCopiaASPNET.ClientID%>').html('');
22.
23. }
24.
25. function LimpiarTodos_OnClick() {
26.
27. $(':text').val('');
28. $('label').html('');
29. $('span').html('');
30. }

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Conclusin

Hasta aqu hemos tenido una introduccin general a las particularidades


del uso de javascript cuando se tratan controles asp.net.

Tambin hemos visto como tratar dos controles muy usados en las paginas
como son los textbox y labels.

En prximos artculos veremos mas controles ya sean html o asp.net, como


adjuntar evento y recorrer el resultado de una seleccin para trabajar con
cada uno de sus tems

Cdigo Ejemplo

Publicado por Leandro Tuttini en 20:27 14 comentarios:

Etiquetas: ASP.NET, jQuery

mircoles, 3 de noviembre de 2010


[ASP.NET][jQuery] Validacin sin Postback

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Introduccin

Uno de los principales problemas en un desarrollo web es implementar una


confirmacin del usuario, especialmente cuando estas necesitas ser
realizadas en el servidor.

Acciones implementadas en botones que requieren de una conformacin


del usuario puede ser un problema, ya que estas necesitan ir al servidor,
aplicar la validacin, retornar o registrar el script que mostrara al usuario
el mensaje javascript de confirmacin y ante la aceptacin, realizar
nuevamente el postback al servidor

Solucin

El uso de jquery puede aportarnos un alivio a esta problemtica,


concretamente con el uso de la funcionalidad de $.ajax, el cual no
permitir invocar funcionalidad del servidor para realizar validaciones sin
postback de la pagina

El resultado de la validacin podr ser validado y all mismo mostrar el


mensaje de confirmacin, si este es aceptado se continua con la
operacin normalmente.

Ejemplo de cdigo

[C#]

Publicado por Leandro Tuttini en 20:32 8 comentarios:

Etiquetas: ASP.NET, jQuery

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
viernes, 16 de julio de 2010
[ASP.NET] Mantener la Session Activa Indefinidamente

Introduccin

El objetivo que persigue el articulo es demostrar como mediante llamadas


asncronas realizadas por medio de la librera de jquery se puede mantener
la Session activa en el servidor de forma indefinida sin que este expire en
un tiempo determinado.

Mantener la Session Activa

Asp.net expira la Session de un usuario cuando un tiempo prolongado de


inactividad indicara que ya no se esta usando la pagina, pero a veces es
necesario permitir que el usuario tome varias horas sin actividad, aunque
en la configuracin del servidor el timeout este definido en un tiempo
reducido.

La idea del ejemplo es realizar de forma transparente para el usuario, y sin


que se refresque la pagina, una invocacin al servidor, para que este
registre dicha actividad.

Para lograr el objetivo se har uso de dos libreras de jquery:

- la principal realizar las invocaciones a los WebMethod definidos en la


pagina, usando la funcionalidad de $.ajax

- la otra librera permitir especificar desde javascript el intervalo de


tiempo en que debe invocarse al mtodo expuesto en el servidor web,
jQuery Timers

[javascript]

01. <script language="javascript" type="text/javascript">


open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
01. <script language="javascript" type="text/javascript">
02.
03. $().ready(function() {
04.
05. $(document).everyTime(3000, function() {
06.
07. $.ajax({
08. type: "POST",
09. url:
"ValidarSession1.aspx/KeepActiveS
ession",
10. data: {},
11. contentType: "application/json;
charset=utf-8",
12. dataType: "json",
13. async: true,
14. success: VerifySessionState,
15. error: function(XMLHttpRequest,
textStatus, errorThrown) {
16. alert(textStatus + ": " +
XMLHttpRequest.responseText);
17. }
18. });
19.
20. });
21.
22.
23. });
24.
25. var cantValidaciones = 0;
26.
27. function VerifySessionState(result) {
28.
29. if (result.d) {
30. $("#EstadoSession").text("activo");
31. }
32. else
33. $("#EstadoSession").text("expiro");
34.
35. $("#cantValidaciones").text(cantValidaciones
);
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
);
36. cantValidaciones++;
37.
38. }
39.
40. function SessionAbandon() {
41.
42. $.ajax({
43. type: "POST",
44. url:
"ValidarSession1.aspx/SessionAbandon"
,
45. data: {},
46. contentType: "application/json;
charset=utf-8",
47. dataType: "json",
48. async: true,
49. error: function(XMLHttpRequest,
textStatus, errorThrown) {
50. alert(textStatus + ": " +
XMLHttpRequest.responseText);
51. }
52. });
53.
54. }
55. </script>

[C#]

01. public partial class ValidarSession1 :


System.Web.UI.Page
02. {
03. protected void Page_Load(object sender, EventArgs e)
04. {
05. Session["datos"] = true;
06. }
07.
08.
09. [WebMethod()]
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
09. [WebMethod()]
10. public static bool KeepActiveSession()
11. {
12. if (HttpContext.Current.Session["datos"] !=
null)
13. return true;
14. else
15. return false;
16. }
17.
18. [WebMethod()]
19. public static void SessionAbandon()
20. {
21. HttpContext.Current.Session.Remove("datos");
22. }
23.
24. }

En el cdigo puede observarse los WebMethod expuestos en la pgina, y


como son invocados desde javascript de forma asncrona, usando una
llamada ajax, mediante el uso de $.ajax

Consideraciones de los Ejemplos

Dentro de ejemplo de cdigo se encontraran dos pginas aspx, ambas


realizan la misma operacin, solo que aplican distintas tcnicas.

En la pagina ValidarSession1.aspx se verifica explcitamente que


determinada key de la session esta disponible. La idea de este ejemplo es
demostrar que tanto la pagina como los servicios web que se estn
usando comparten la misma Session y se puede acceder a los datos all
guardados

La pagina ValidarSession2.aspx, si bien la forma de comunicarse es la


misma, la validaciones de la session ha cambiado, aqu no se usa una key
determinada en la session, sino que se valida el objeto de forma general.

En el ejemplo para que sea practico se estableci un tiempo de 3000 ms (3


seg), para que valide la Session, pero si la idea es mantener la session
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
seg), para que valide la Session, pero si la idea es mantener la session
activa con especificar un tiempo cercano al definido en el expiracin de la
sesin alcanzara.

Por ejemplo si se determino en el IIS que el sitio tiene un timeout de


session en 20min, especificando un tiempo de 15000 ms (15 min) seria
suficiente para evitar que la session expire.

La solucin fue desarrollada con Visual Studio 2008.

[C#] [VB.NET]

Publicado por Leandro Tuttini en 20:51 35 comentarios:


Etiquetas: ASP.NET, jQuery

Pgina principal Entradas antiguas

Suscribirse a: Entradas (Atom)

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com