asp .net jquery
Post on 18-Jan-2017
118 Views
Preview:
TRANSCRIPT
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});
top related