Usando JQuery DataTables en ASP

Usando JQuery DataTables en
ASP.Net Core
¿Qué es la tabla de datos JQuery?
Jquery Datatable son complementos avanzados que transforman tablas HTML
normales y agregan controles de interacción avanzados. Proporciona capacidades
de búsqueda, clasificación, paginación y filtrado.
Así es como se verá un Jquery Datatable Grid sin formato.
Antes de comenzar, asegúrese de haber instalado lo siguiente

 La última versión de Visual Studio: puedes descargarla aquí .
 Alternativamente, también puede utilizar Visual Studio Code.
 servidor SQL
Si la lista de verificación anterior ya está en su máquina, podemos continuar y
comenzar.
También tenemos un artículo sobre el uso de ASP.NET Core Identity. Lo puedes
encontrar aquí .
I. Configurar la aplicación web ASP.NET Core
1. Primero, cree su aplicación web ASP.NET Core. Para hacerlo,
simplemente siga los pasos a continuación.
 Seleccione Archivo > Nuevo > Proyecto .
 Seleccione Aplicación web ASP.NET Core . Asigne al proyecto
el nombre que prefiera y luego haga clic en Aceptar .
 Seleccione una aplicación web ASP.NET Core . y luego
desmarque Configurar para HTTPS .
 Por último, haga clic en Crear .
2. Una vez hecho esto, continúe agregando los paquetes necesarios
usando Nuget Package Manager en Visual Studio.
 Microsoft.EntityFrameworkCore
 Microsoft.EntityFrameworkCore.SqlServer
 Microsoft.EntityFrameworkCore.Tools
II. Modelos de configuración, controladores y
clase de marco de entidad
1. Ahora, en su carpeta Modelos, cree un modelo y asígnele el nombre Usuario .
Abre el archivo. Luego declare las propiedades siguientes.
Propiedades de usuario
public class User
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string MiddleName { get; set; }
public string Contact { get; set; }

}
2. Creemos la clase AppDBContext. Como estamos usando Entity Framework,
esta clase maneja la conexión de la base de datos por nosotros.
public class AppDBContext: DbContext
{
private readonly DbContextOptions _options;
public AppDBContext(DbContextOptions options) : base(options)

{
_options = options;
}
public DbSet<User> users { get; set; }

}
3. A continuación, necesitamos configurar nuestra conexión dentro de
appsettings.json. Abra el archivo y pegue el fragmento a continuación. La
conexión de la base de datos depende de lo que configure en su máquina local.
"ConnectionStrings": {
"default": "Data Source=DESKTOP-4DU98BI\\SQLEXPRESS01;Initial
Catalog=UserDB;Integrated Security=True"
}
4. Configure startup.cs para utilizar la conexión anterior. Agregue el fragmento a
continuación en el método ConfigureServices .
string connectionString = Configuration.GetConnectionString("default");
services.AddDbContext<AppDBContext>(c => c.UseSqlServer(connectionString));
5. Ahora puede ejecutar el comando Migración y Actualizar base de datos para
crear el esquema de base de datos para nuestro modelo.
Migración:
 Consola del administrador de paquetes > Agregar identidad de
migraciónDBUser
 Visual Studio Code Terminal> migración dotnet ef agregar
IdentityDBUser
Actualizar base de datos:
 Consola del administrador de paquetes > Actualización de base de
datos
 Visual Studio Code Terminal > actualización de la base de datos
dotnet ef
6. Compruebe si se creó la tabla e inserte datos ficticios. Estos datos se utilizarán

para completar nuestra tabla HTML.
Bas
e de datos de usuario
7. Esta vez, procedamos con HomeController. Abra el archivo y cree el
índice IActionResult y el método getAllUsers .
 Índice > Esto muestra la vista.

public IActionResult Index()
{
return View();
}
 getAllUsers > Recuperar los datos de la tabla Usuario usando
Entity Framework.
public JsonResult getAllUsers()
{
List<User> users = new List<User>();

users = _appDBContext.users.Select(c => c).ToList();
return Json(new { data = users });

}
8. Hemos preparado nuestros datos, ahora es el momento de crear la tabla
HTML. Vea el fragmento de código a continuación.
<div class="text-center">
<table id="userTable" class="display" style="width:100%">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
9. Para usar Jquery Datatable, necesitamos importar script y CSS a nuestro
proyecto. Para hacerlo solo necesitamos declarar el siguiente script a nuestra
vista.
 CSS
<link rel="stylesheet" type="text/css"
href="//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
 Guion
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf8"
src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
10. Ahora, todo lo que necesitamos hacer es crear un script para representar los
datos usando la llamada Ajax y mostrarlos usando Jquery Datatable. Este método
mejorará nuestra tabla y agregará control avanzado.
 sTitle: nombre de la columna de la tabla
 datos: lista de usuarios del método getAllUsers de HomeController.
$(document).ready(function () {
$('#userTable').DataTable({
"ajax": {
'url': '@Url.Action("populateHtml", "Home")',
"type": "GET",
"datatype": "json"
},
"columns": [
{ "sTitle": "First Name", "data": "firstName"},
{ "sTitle": "Last Name", "data": "lastName" },
{ "sTitle": "Middle Name", "data": "middleName" },
{ "sTitle": "Contact", "data" : "contact" }
]
});
});
Puede descargar el código fuente utilizando este enlace de github. codificador
Resumen
Creamos una tabla de base de datos usando ASP.NET Core Entity Framework.
Cree un modelo y una clase DBContext. Luego realice la migración y actualice la
base de datos para crear la tabla. Y luego inserte datos de muestra. Estos datos
llenarán nuestra tabla HTML y transformarán la tabla usando JQuery Datatable

Usando JQuery DataTables en ASP

Cargado por

Copyright:

Formatos disponibles

Usando JQuery DataTables en ASP

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Usando JQuery DataTables en ASP

Cargado por

Copyright:

Formatos disponibles

Usando JQuery DataTables en

Antes de comenzar, asegúrese de haber instalado lo siguiente

public string Contact { get; set; }

public AppDBContext(DbContextOptions options) : base(options)

public DbSet<User> users { get; set; }

6. Compruebe si se creó la tabla e inserte datos ficticios. Estos datos se utilizarán

 Índice > Esto muestra la vista.

List<User> users = new List<User>();

return Json(new { data = users });

También podría gustarte