Ltuttini Blogspot Com Search Label JQuery

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
$(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 */
/* 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
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");

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();
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");
}
}
}
});
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,
//combo.setTemplate($("#SelectTemplate").html());
combo.setTemplate(template);
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()
public static string GetAllEmploye()
{
var list = EmployeRepository.GetAllEmploye()
.Select(x => new
{
id = x.EmployeeID,
name = x.FullName
});
}
[WebMethod]
public static string GetAllShipper()
{
var list = ShipperRepository.GetAllShipper()
.Select(x => new
{
id = x.ShipperID,
name = x.CompanyName
});
}
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",
url: "Default.aspx/GetOrder",
dataType: "json",
async: true,
async: true,
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);
},
}
});
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
{
{
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
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({
$.ajax({
type: "POST",
url: "Default.aspx/ActualizarOrder",
dataType: "json",
async: true,
alert('Actualizacion Correcta');
$('#popuporderedit').dialog("close");
},
}
});
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#]
[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
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.
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() {
$("#<%=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
$('#<%=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
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
[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.
El aadido que se realiza a la suma de la fila del grid solo implica la llamada
a una funciona para recalcular el total.
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());
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;
[id*='lblPrecio']").each(function() {
var coltotal = parseFloat($(this).html());
if (!isNaN(coltotal)) {
total += coltotal;
total += coltotal;
}
});
[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
Etiquetas: ASP.NET, GridView, jQuery
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.
Se puede dejar el campo de Customer sin ingresar un valor, lo cual listara
todas las ordenes registradas
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
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

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
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.
Configuracin
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"
3.
4. <script src="Scripts/jqGrid/grid.locale-es.js"
5. <script src="Scripts/jqGrid/jquery.jqGrid.min.js"
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"));
typeof(Page), "jqueryui",
ResolveUrl(@"~/Scripts/jquery-ui-
ResolveUrl(@"~/Scripts/jquery-ui-
1.8.16.custom.min.js"));
typeof(Page), "json2",
ResolveUrl(@"~/Scripts/json2.js"));
09.
typeof(Page), "gridlocale",
ResolveUrl(@"~/Scripts/jqGrid/grid.locale-
es.js"));
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',
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',
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',
07. { name: 'UnitPrice', index: 'UnitPrice',
width: 100, sortable: false }
08. ],
09. height: "200px",
10. width:"800px"
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.
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

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

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

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.
09.
10. var valor =
$("input[name='Ej1radio']:checked").val()
11.
13. }
14.
15. function btnEj1SeleccionUsandoTabla_OnClick() {
16.
17. var valor = $("#Ej1Table :radio:checked").val()
18.
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;
06. return;
07.
08. $("#Ej2Table :radio[value='" + valor +
"']").attr('checked', true);
09.
10. }
11.
12.
13. function btnEj2SeleccionarPorName_OnClick() {
14.
16.
18. return;
19.
20. $(":radio[name='Ej2radio'][value='" + valor +
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.
04.
06. return;
07.
08. var option = $(":radio[name='Ej2radio'][value='" +
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.
18.
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

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

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
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.
17.
19.
20. $.each($("input[name='Ej1check']:checked"),
function() {
21.
23. list.push(msg);
24.
25. });
25. });
26.
28. '));
29.
30. }
31.
32. function btnEj1SeleccionUsandoTabla_OnClick() {
33.
35.
36. $.each($("#Ej1Table :checkbox:checked"), function()
{
37.
39. list.push(msg);
40.
41. });
42.
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
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.
04.
06. return;
07.
08. $("#Ej2Table :checkbox").attr('checked', false);
09.
10. $.each(valor.split(','), function() {
11.
12. $("#Ej2Table :checkbox[value='" + this +
13.
14. });
15.
16. }
17.
18.
19. function btnEj2SeleccionarPorName_OnClick() {
20.
22.
24. return;
24. return;
25.
26. $(":checkbox[name='Ej2check']").attr('checked',
false);
27.
29.
30. $(":checkbox[name='Ej2check'][value='" + this +
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.
04.
06. return;
07.
false);
09.
11.
12. var option =
$(":checkbox[name='Ej2check'][value='" + this
+ "']");
13.
14. if (option.length > 0)
15. option[0].checked = true;
16. });
17.
18. }
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.
04.
06. return;
07.
false);
09.
10.
11. $.each($("#Ej2Table :checkbox"), function() {
12.
13. var check = this;
14.
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,

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.
04.
06. return;
07.
false);
09.
10. var valuesList = Array();
11.
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
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.

02.
03. var options = $("#rdlEj3 :checkbox:checked");
04.
06.
07. $.each(options, function() {
08.
09. var option = $(this);
10. var valor =
$(this).parent().attr('hiddenValue');
11. var texto = $('label', option.parent());
12.
{1}'.format(texto.html(), valor);
14. list.push(msg);
15.
16. });
17.
19. '));
20. }
En este caso se toma los check dentro de la tabla que asp.net crea para
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

Etiquetas: jQuery
viernes, 29 de abril de 2011
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.
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. }
15. }
16.
18.
19. var optionSelected = $('#Ej2Select
:selected');
20.
{1}'.format(optionSelected.text(),
optionSelected.val());
22.
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.
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. }
18. }
19.
22.
23. var newItem =
j3Valor.val());
24. newItem.insertAfter(itemsSelected[0]);
25.
26. }
27.
28.
30.
32.
{
34.
37. list.push(msg);
38.
39. });
40.
42.
43. }
44.
45. function btnEj3RemoverSeleccion_OnClick() {
46.
{
48.
49. $(this).remove();
50.
51. });
52. }
El agregar una nueva opcin requiere que el html de <opcin> sea creado,
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:

02.
05.
06. var newItem =
$('<option/>').text(ej4Texto.val()).val(ej4Valor.
val());
07. $("#Ej4Select").append(newItem);
08.
09. }
10.
12.
13. var optionSelected = $('#Ej4Select :selected');
14.
{1}'.format(optionSelected.text(),
optionSelected.val());
16.
18.
19. }
20.
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.
04.
05. $('#Ej5Select').val(valor);
06.
06.
07. }
08.
09. function btnEj6SeleccionarPorValor_OnClick() {
10.
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:

02.
05.
06. var newItem =
j7Valor.val());
07. $('#<%=Ej7Select.ClientID%>').append(newItem
);
08.
09. }
10.
12.
14.
15. $.each($('#<%=Ej7Select.ClientID%>
:selected'), function() {
16.
19. list.push(msg);
20.
21. });
22.
24.
25. }
26.
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
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
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

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

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

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]
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
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. }
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
mircoles, 3 de noviembre de 2010

[ASP.NET][jQuery] Validacin sin Postback
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#]
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">

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",
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
);
);
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",
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()]
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
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]

Pgina principal Entradas antiguas
Suscribirse a: Entradas (Atom)

Ltuttini Blogspot Com Search Label JQuery

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Ltuttini Blogspot Com Search Label JQuery

Diunggah oleh

Hak Cipta:

Format Tersedia

More Next Blog Create Blog Sign In

Leandro Tuttini Blog

Mostrando entradas con la etiqueta jQuery. Mostrar todas las

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

Ver todo mi perfil

Microsoft MVP C# 2010 -

Implementando jQuery Autocomplete

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

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

select: function (event, ui) {

} Ya eres miembro? Iniciar sesin

Como puede observarse invoca a un WebMethod implementado en el

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

Implementando Edicin GridView

La edicin en el control GridView tiene algunos detalles interesantes para

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

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

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

Se observara tambin que este evento no esta en el clsico

Esto es necesario porque el gridview sigue conservando los eventos de

protected void gvOrders_PageIndexChanging(object sender,

protected void btnFiltrar_Click(object sender, EventArgs e)

Edicin usando jQuery UI Dialog

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

//limpia todos los textbox del popup

Jquery UI Dialog Carga controles

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

function loadComboBox(comboname, webmethodname) {

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

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

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

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

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

Para cargar la orden se usa una tcnica similar

var params = new Object();

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

Definiendo el webmethod que enva los datos de la orden

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

Actualizar la entidad implica crear un objeto javascript que represente la

var order = new Object();

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

var params = new Object();

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

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

Publicado por Leandro Tuttini en 13:38 67 comentarios:

martes, 29 de mayo de 2012

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

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

Calculo del precio por producto

La primer operacin que debe programarse corresponde al calculo a nivel

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

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

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

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

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

Usando el atributo class

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

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

Por medio del operador de seleccin mediante bsqueda aproximada, se

Calculo del precio Total

Calculo total sin paginado

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