ASP.NET

Jquery

Guido Ticona Hurtadoguidoti@gmail.com

DOM

Estructura árbolElementosTextoAtributosSe pueden referenciar

id, atributo, relación

Arbol DOM

Jquery

Librería JavaScriptSimplifica tareas comunes JSFuncionalidad

Administrar DOM Administrar Eventos AJAX

Como usar Jquery

En un archivo .js Con <script src=“” type="text/javascript >

<script type="text/javascript"></script>$().ready(function() {

script Jquery});

Selectores

(“*”)(“#id”)(“.clase”)(“elemento”)(“.clase,elemento,#id”)

Jquery eventos

.load .ready .unload.click .dblclick .hover.blur .change .focus .select .submit.resize .scroll.keydown .keypress .keyup

DOM

Eliminacion .detach .empty .remove .unwarpAgregar .append .prepend .textModificar .replaceWith

Jquery

.addClass .hasClass .removeClass$(this)$.closest

Ajax con Jquery

.get().post().load().ajax()

Jquery Ajax

$.ajax({type: "POST",url: “/Cliente/Nombres”,data: parametros,success: función,error: función,complete: función,beforeSend: funcióndataType: json | text | html | xml});

$.post $.get( “/Cliente/Nombres”, querystring, funcion, dataType )

$(“selector”).load( “/Cliente/Nombres”, querystring, funcion)

Tablas

jQuery Datatableswww.datatables.netJquery.dataTables.jsJquery.dataTables.themeroller.css$().dataTable();

DataTables

$('#tabla').dataTable({ "bServerSide": true, "bJQueryUI": true, "sPaginationType": "full_numbers", "sAjaxSource": "" });

DataTables(cont…)

$('#tabla').dataTable({ "bFilter": false, "bLengthChange": false, "bInfo": false, "bPaginate": true, "bSort": false, "sPaginationType": "full_numbers"});

DataTables(cont…)

$('#tabla').dataTable({ "oLanguage": { "sZeroRecords": "No hay registros", "sLengthMenu": "Mostrando _MENU_ registros por pagina", "sInfo": "Mostrando _START_ / _END_ de _TOTAL_ registros", "sInfoEmpty": "Mostrando 0 to 0 of 0 registros", "oPaginate": { "sFirst": "Inicio", "sLast": "Ultimo", "sNext": "Prox.", "sPrevious": "Prev." } }, });

DataTables(cont…)

$('#datatabla').dataTable({ "aoColumns": [{ "bSortable": false }, null, { "sTitle": “", "bSortable": true, "fnRender": function (o) { return '<a >aaa</a>' } }], "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull) { $(nRow).attr("id", aData[0]); return nRow; } });

Parametros DataTable

public class jQueryDataTableModel {public string sEcho { get; set; }public string sSearch { get; set; }public int iDisplayLength { get; set; }public int iDisplayStart { get; set; }public int iColumns { get; set; }public int iSortingCols { get; set; }public string sColumns { get; set; } }

Controlador

return Json(new { sEcho = param.sEcho, iTotalRecords = tabla.Count(), iTotalDisplayRecords = tabla.Count(), aaData = datos});