Instituto Tecnológico Superior del Sur de Guanajuato

Plan de estudio ISIC-2010-224

Programación WEB II
U3- AJAX
L. I. Efrén Vega Chávez 04/05/2020 17:00

Nombre: Arturo García Ibarra Valor: 50%

No. Control: 15120086 Calificación:

Parte I. Instrucciones resuelve lo que se te pide. (valor 30%).

1. Crea un proyecto en ASP pon el nombre ExamU3_NombreAlumno.
2. Crea una tabla en mysql, con la temática que guste y un mínimo de 5 campos o columnas.
3. Inserta un mínimo de 20 registros en la tabla que creo.

4. En una página Asp coloca una tabla y un botón, aplicando Ajax cada vez que se presione el
botón debe de mostrar los datos almacenados.
5. Aplica lo visto en esta unidad para darle diseño a tu página y proyecto

Entregables:
a) Corre la aplicación y toma capturas de pantalla y explica cada una aquí.

Para la realización de este examen se hizo uso del SGBD SQLServer, tiene
demasiada similitud con MySql, además que se utiliza más este SGBD para
proyectos .net.
Hice una base de datos de calificaciones donde tiene el alumno, su calificación y
algunos otros datos.
 Instituto Tecnológico Superior del Sur de Guanajuato
Plan de estudio ISIC-2010-224
Programación WEB II
U3- AJAX
L. I. Efrén Vega Chávez 04/05/2020 17:00

Esta es la vista con el proyecto recién corrido sin cargar los datos aún

Después de presionar el boton se activa la consulta y se muestran los datos

 Instituto Tecnológico Superior del Sur de Guanajuato
Plan de estudio ISIC-2010-224
Programación WEB II
U3- AJAX
L. I. Efrén Vega Chávez 04/05/2020 17:00

Se puede hacer un filtrado de datos por busqueda del Nombre

Tambien se implementó un buscador que filtra registros por Nombre y otro que
sirve para mostrar cierta cantidad de registros (10,25,50,100)

b) Inserta el código y comenta cada sección.

En esta primera función se invoca cuando el boton (con id boton)

se activa el evento clic, y se llama a la función sendDataAjax
function showUsers() {
$("#boton").on("click", function () {
sendDataAjax ();
});
}

Cuando se llama este método se usará el método post para obtener los datos de
la base de datos haciendo uso del método ListarDatos que se encuentra en
Index.aspx como aquí se especifica y en caso de que no haya error se hace
llamada a la función “addRowDT”
function sendDataAjax() {

$.ajax({
method: "POST",
url: "Index.aspx/ListarDatos",
data: {},
contentType: "application/json; charset=utf-8",
 Instituto Tecnológico Superior del Sur de Guanajuato
Plan de estudio ISIC-2010-224
Programación WEB II
U3- AJAX
L. I. Efrén Vega Chávez 04/05/2020 17:00

error: function (xhr, ajaxOptions, thrownError) {

console.log(xhr.status + "\n" + xhr.responseText, "\n" + thrownError);
},
success: function (data) {
console.log(data);
addRowDT();
}
});
}

En esta función se hace el llenado de la tabla mediante su id “tbl_datos” recibiendo

la consulta en data e insertándolos con un for
function addRowDT(data) {
var tabla = $("#tbl_datos").DataTable();
for (var i = 0; i < data.lenght ; i++) {
tabla.fnAddData([
data[i].id,
data[i].nombre,
data[i].calificacion,
data[i].estatus,
data[i].correo

]);
}
}

c) Sube a este enlace y a google drive, el proyecto y este archivo.

Parte II. Será un examen en línea preguntas de opción múltiple o relacionar (valor 20%)