suhendrayohanaputra.com Open in urlscan Pro
185.229.118.131 Public Scan

Back to summary

Submitted URL:
http://suhendrayohanaputra.com/menggunakan-jquery-datatable-ajax-request-pada-csharp.html
Effective URL:
https://suhendrayohanaputra.com/menggunakan-jquery-datatable-ajax-request-pada-csharp.html
Submission: On June 25 via api (June 25th 2024, 4:20:55 pm UTC) from US — Scanned from SG

Form analysis
4 forms found in the DOM

GET https://suhendrayohanaputra.com/

<form method="get" id="searchform-mobile" action="https://suhendrayohanaputra.com/">
  <button class="search-button" type="submit" value="Cari"><i class="fa fa-search"></i></button>
  <input type="text" id="s-mobile" name="s" title="Cari" value="Cari" onfocus="if (this.value == 'Cari') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Cari';}">
</form>

GET https://suhendrayohanaputra.com/

<form method="get" id="searchform-header" action="https://suhendrayohanaputra.com/">
  <button class="search-button" type="submit" value="Cari"><i class="fa fa-search"></i></button>
  <input class="search-live" type="text" id="s-header" name="s" title="Cari" value="Cari" onfocus="if (this.value == 'Cari') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Cari';}" autocomplete="off">
</form>

POST https://suhendrayohanaputra.com/wp-comments-post.php

<form action="https://suhendrayohanaputra.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate="">
  <p class="comment-notes"><span id="email-notes">Alamat email Anda tidak akan dipublikasikan.</span> <span class="required-field-message">Ruas yang wajib ditandai <span class="required">*</span></span></p>
  <p class="comment-form-comment"><label for="comment">Komentar <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required=""></textarea></p>
  <p class="comment-form-author"><label for="author">Nama <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required=""></p>
  <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required=""></p>
  <p class="comment-form-url"><label for="url">Situs Web</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url"></p>
  <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"> <label for="wp-comment-cookies-consent">Simpan nama, email, dan situs web saya pada peramban ini untuk
      komentar saya berikutnya.</label></p>
  <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Kirim Komentar"> <input type="hidden" name="comment_post_ID" value="3189" id="comment_post_ID">
    <input type="hidden" name="comment_parent" id="comment_parent" value="0">
  </p>
</form>

GET https://suhendrayohanaputra.com/

<form role="search" method="get" class="search-form" action="https://suhendrayohanaputra.com/">
  <label>
    <span class="screen-reader-text">Cari untuk:</span>
    <input type="search" class="search-field" placeholder="Cari …" value="" name="s">
  </label>
  <input type="submit" class="search-submit" value="Cari">
</form>

Text Content

 * Beranda
 * ASP.NET
 * Spring Boot
 * Javascript
   
 * Database
   * SQL Server
   * Oracle
   * MySQL
 * Review
 * Programmer’s Diary
 * Programmer

 * Area Pelanggan
   * Advertisement
   * Privacy Policy
   * Cookie Policy (EU)
   * Aktivasi Windows 10 Pro
   * Konfirmasi Pembayaran
   * Registrasi Dealer
 * Profil
 * FAQ
 * Kontak
 * Layanan





SUHENDRA YOHANA PUTRA KONSULTAN IT – BANDUNG FREELANCE WEB DEVELOPER



 * Beranda
 * ASP.NET
 * Spring Boot
 * Javascript
    * jQuery
   
   
   MENGGUNAKAN JQUERY DATATABLE AJAX REQUEST PADA CSHARP
   
   22/01/2022
   
 * Database
   * SQL Server
   * Oracle
   * MySQL
 * Review
 * Programmer’s Diary
 * Programmer


Breaking News
 * Convert SQL Server Table to C# Class
 * Membuat CRUD Menggunakan Stored Procedure SQL Server
 * Spring Boot – Mengirim CSRF Token dari Postman
 * Instalasi Aplikasi E-Klaim INACBG Terbaru
 * [Solved] Memperbaiki Error The Microsoft.ACE.OLEDB.12.0 provider is not
   registered on the local machine
 * Request Response Logger .NET6
 * Menggunakan JQuery DataTable Ajax Request Pada CSharp
 * Perbedaan .NET Core dan .NET Framework
 * Csharp Memeriksa Ketersediaan Property di Anonymous Type
 * Mengirim Email Menggunakan C#

Home/ASP.NET/Menggunakan JQuery DataTable Ajax Request Pada CSharp



MENGGUNAKAN JQUERY DATATABLE AJAX REQUEST PADA CSHARP

suhendrayputra 22/01/2022 ASP.NET, jQuery Leave a comment 1,165 Views



Data Tables merupakan sebuah plug-in jQuery untuk memanipulasi data dalam tabel
HTML. Data Tables memungkinkan kita melakukan membuat tabel dengan fitur
pencarian, membuat pagination, menampilkan data sebanyak yang kita mau,
mengambil data dari ajax, dsb.

Biasanya Plugin ini sering dipakai Web Developer yang menggunakan baha
pemrograman PHP, karena kemudahaannya dalam Integrasi.



Kali ini kita coba membuat 1 buah tampilan data menggunakan DataTable dengan
rincian sebagai berikut:

 * JQuery DataTable
 * NET6 API dan Razor View
 * SQL Server Stored Procedure
 * Template AdminLTE

Beberapa poin yang perlu diingat, bahwa ada beberapa hal yang kita skip karena
diasumsikan hanya butuh bentuk data yang akan dikonsumsi oleh DataTable.

Selain itu, kita asumsikan setup Standar untuk pembuatan layout sudah dibuat
karena disini hanya memperlihatkan cara Menampilkan data ke dalam DataTable
menggunakan Ajax Request yang mengakses ke API pada NET6.


RAZOR VIEW

Hal pertama yang kita persiapkan adalah sebuah View, tempat dimana kita akan
menampilkan halaman tersebut.



@{
    ViewData["placeHolderFilter"] = "Pencarian berdasarkan Nama/Email/Prodi/NPP";
}

<partial name="~/Views/Shared/_PageHeaderTitle.cshtml" />

<div class="content">
    <div class="container-fluid">

        <partial view-data="ViewData" name="~/Views/Shared/Filter/Filter_1Field.cshtml" />

        <div class="row">
            <div class="col-md-12">
                <div class="card card-default card-sm">

                    <div class="card-body card-body-sm">
                        <table class="table table-bordered table-striped table-responsive-sm" style="width:100%" id="gridAgent">
                            <thead>
                                <tr>
                                    <th>Aksi</th>
                                    <th>NPP</th>
                                    <th>NAMA</th>
                                    <th>EMAIL</th>
                                    <th>KODE UNIT</th>
                                    <th>NAMA UNIT</th>
                                    <th>PRODI</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section JavaScript
{
<script type="text/javascript" src="@Url.Content("/js/modules/auditor.js")"></script>
<script type="text/javascript">console.log("in the js");</script>
}

Copy




JAVASCRIPT - JQUERY DATATABLE

Pada bagian Javascript, jika dilihat pada View yang diatas kita membutuhkan 1
buah File Javascript auditor.js, maka dari itu buat 1 buah 1 Javascript dengan
isi sebagai berikut:

var tableDOM = $("#gridAuditor");

var filters = {
    searchType: 'Auditor',
    search: _getVal('inputSearch')
}

$(document).ready(function () {
    vmAuditor.grid.init();
});

let vmAuditor = {
    grid: {
        redraw: function () {
            filters.search = _getVal('inputSearch');
            filters.searchType = 'Auditor';

            tableDOM.DataTable().ajax.reload();
            tableDOM.DataTable().draw(true);
        },
        init: function () {
            dtTableExportButtons = [
                {
                    "text": 'Auditor Baru',
                    "attr": {
                        "class": "btn btn-primary btn-sm"
                    },
                    "action": function (e, dt, node, config) {
                        vmNet.goToURL("/configuration/person/auditor/add");
                    }
                },
                {
                    extend: 'excelHtml5',
                    title: "Data Auditor",
                    text: 'Export Sebagai Excel',
                    titleAttr: 'Excel',
                    exportOptions: { columns: [1, 2, 3, 4, 5,6] }
                }
            ];


            let grid = tableDOM.DataTable({
                "ordering": true,
                "searching": false,
                "pageLength": 10,
                "lengthChange": false,
                "paging": true,
                "select": "single",
                "destroy": true,
                "scrollX": true,
                "responsive": true,
                "ajax": {
                    "url": "/api/configuration/person/auditor",
                    "type": "POST",
                    "dataType": "json",
                    "contentType": "application/json;charset=utf-8",
                    "dataSrc": function (data) {
                        return data;
                    },
                    'data': function (data) {
                        return JSON.stringify(filters) ;
                    }
                },

                'autoWidth': false,
                "dom": 'Bfrtip',
                "buttons": dtTableExportButtons,
                "order": [],
                "processing": true,
                "columns": [
                    {
                        "searchable": false,
                        "orderable": false,
                        "width": "10%",
                        "data": null,
                        render: function (data, type, row) {
                            let actions = [
                                {
                                    "class": "edit",
                                    "label": "Edit",
                                    "color": "info",
                                    "icon": "pencil",
                                    "url": null,
                                },
                                {
                                    "class": "delete",
                                    "label": "Delete",
                                    "color": "danger",
                                    "icon": "pencil",
                                    "url": null,
                                }
                            ];

                            let btnLink = vmNet.grid.generateActionLink(actions, row, BLANK_STRING);
                            return btnLink;
                        }
                    },
                    {
                        "width": "10%",
                        "data": "NPP"
                    },
                    {
                        "width": "10%",
                        "data": "NAMA_LENGKAP_GELAR"
                    },
                    {
                        "width": "10%",
                        "data": "EMAIL"
                    },
                    {
                        "width": "10%",
                        "data": "KODE_UNIT"
                    },
                    {
                        "width": "10%",
                        "data": "NAMA_UNIT"
                    },
                    {
                        "width": "10%",
                        "data": "PRODI"
                    }
                ] // end fo columns
            });

            return grid;
        }
    }
};

$(document).off(EVENT_CLICK, '#btnFilterSearch');
$(document).on(EVENT_CLICK, '#btnFilterSearch', function (e) {

    vmAuditor.grid.redraw();
})

$(document).off(EVENT_CLICK, '#btnFilterClear');
$(document).on(EVENT_CLICK, '#btnFilterClear', function (e) {
    _setVal('inputSearch', null);
    vmAuditor.grid.redraw();
});

Copy

Terdapat beberapa bagian penting. Pertama kita akan membuat custom filter yang
diatur oleh  1buah teksfield.

var filters = {
    searchType: 'Auditor',
    search: _getVal('inputSearch')
}

Copy


Kedua, bagian Ajax yang disematkan sebagai property DataTable

"ajax": {
	"url": "/api/configuration/person/auditor",
    "type": "POST",
    "dataType": "json",
    "contentType": "application/json;charset=utf-8",
    "dataSrc": function (data) {
		return data;
	},
    'data': function (data) {
		return JSON.stringify(filters) ;
	}
},

Copy

yang terakhir, event setelah menekan tombol Cari atau Reset Filter.

$(document).off(EVENT_CLICK, '#btnFilterSearch');
$(document).on(EVENT_CLICK, '#btnFilterSearch', function (e) {

    vmAuditor.grid.redraw();
})

$(document).off(EVENT_CLICK, '#btnFilterClear');
$(document).on(EVENT_CLICK, '#btnFilterClear', function (e) {
    _setVal('inputSearch', null);
    vmAuditor.grid.redraw();
});

Copy

Jika Anda melihat variable yang aneh, itu adalah variable yang bisa Anda
dapatkan disini JSCore dan disini: KiNET Underscore.js


SERVER SIDE - SERVICE

Karena kita menggunakan API maka perlu membuat 1 buah EndPoint.


CLASS DBACCESS

Class ini berfungsi sebagai pengatur koneksi dan Data Access Wrapper

public class DBAccess
{
    public IConfiguration Configuration { get; }
    public IOptions<AppSettings> _options;
    public string _ConnString { get; set; }
    public DBAccess(IOptions<AppSettings> options)
    {
        _options = options;
        _ConnString = _options.Value.DefaultConnection;
    }
    public async Task<List<T>> ExecuteReaderAsync<T>(string storedProcedureName, SqlParameter[] sqlParameters = null) where T : class, new()
    {
        var newListObject = new List<T>();

        using (var conn = new SqlConnection(_ConnString))
        {
            using (SqlCommand sqlCommand = new SqlCommand(storedProcedureName, conn))
            {
                sqlCommand.CommandType = CommandType.StoredProcedure;
                sqlCommand.Parameters.Clear();
                if (sqlParameters != null)
                {
                    for (int idx = 0; idx < sqlParameters.Length; idx++)
                    {
                        sqlCommand.Parameters.Add(sqlParameters[idx].ParameterName, sqlParameters[0].SqlDbType).Value = sqlParameters[idx].SourceColumn;
                    }
                }

                await conn.OpenAsync();
                using (var dataReader = await sqlCommand.ExecuteReaderAsync(CommandBehavior.Default))
                {
                    if (dataReader.HasRows)
                    {
                        while (await dataReader.ReadAsync())
                        {
                            var newObject = new T();
                            dataReader.MapDataToObject(newObject);
                            newListObject.Add(newObject);
                        }
                    }
                }
            }
        }

        return newListObject;
    }
    public async Task ExecuteQuery(string storedProcedureName, SqlParameter[] sqlParameters = null)
    {
        using (var conn = new SqlConnection(_ConnString))
        {
            using (SqlCommand sqlCommand = new SqlCommand(storedProcedureName, conn))
            {
                sqlCommand.CommandType = CommandType.StoredProcedure;
                sqlCommand.Parameters.Clear();
                if (sqlParameters != null)
                {
                    for (int idx = 0; idx < sqlParameters.Length; idx++)
                    {
                        sqlCommand.Parameters.Add(sqlParameters[idx].ParameterName, sqlParameters[0].SqlDbType).Value = sqlParameters[idx].SourceColumn;
                    }
                }

                await conn.OpenAsync();
                sqlCommand.ExecuteNonQuery();
            }
        }
    }

}
public class DBOutput
{
    public bool status { get; set; }
    public string message { get; set; }
    public dynamic data { get; set; }
    public int lastid { get; set; }
}

public static class MyDataReader
{
    public static void MapDataToObject<T>(this SqlDataReader dataReader, T newObject)
    {
        if (newObject == null) throw new ArgumentNullException(nameof(newObject));

        // Fast Member Usage
        var objectMemberAccessor = TypeAccessor.Create(newObject.GetType());
        var propertiesHashSet =
                objectMemberAccessor
                .GetMembers()
                .Select(mp => mp.Name)
                .ToHashSet(StringComparer.InvariantCultureIgnoreCase);

        for (int i = 0; i < dataReader.FieldCount; i++)
        {
            var name = propertiesHashSet.FirstOrDefault(a => a.Equals(dataReader.GetName(i), StringComparison.InvariantCultureIgnoreCase));
            if (!String.IsNullOrEmpty(name))
            {
                //Attention! if you are getting errors here, then double check that your model and sql have matching types for the field name.
                //Check api.log for error message!
                objectMemberAccessor[newObject, name]
                    = dataReader.IsDBNull(i) ? null : dataReader.GetValue(i);
            }
        }
    }
}

Copy


CLASS MODEL REPOSITORY DAN INTERFACE

Class ini berfungsi sebagai Model atau Data Logic

// Model Entity
public class AuditorAuditee
{
	public int? ID { get; set; }
	public int? ID_JADWAL { get; set; }
	public int? ID_UNIT { get; set; }
	public string NPP { get; set; }
	public string KODE { get; set; }
	public string PRODI { get; set; }
	public string EMAIL { get; set; }
	public string NAMA_UNIT { get; set; }
	public string KODE_UNIT { get; set; }
	public string NAMA_LENGKAP_GELAR { get; set; }
}

// Class Interface
public interface IPerson
{
	public Task<List<AuditorAuditee>> getPersonList(string search, string role = "Admin/Auditee/Auditor");
}

// Repository
public class PersonRepository: IPerson
{
	private string _roleType;

	public IOptions<AppSettings> _options;

	public PersonRepository(IOptions<AppSettings> options)
	{
		_options = options;
	}

	private string useDBObject(string role)
	{
		if (role == "Admin")
		{
			_roleType = "SP_GET_AUDITOR_LIST";
		}
		else if(role == "Auditee")
		{
			_roleType = "SP_GET_AUDITEE_LIST";
		}
		else if (role == "Auditor")
		{
			_roleType = "SP_GET_AUDITOR_LIST";
		}
		return _roleType;
	}
	public async Task<List<AuditorAuditee>> getPersonList(string search, string role = "Admin/Auditee/Auditor") {
		DBOutput output = new DBOutput();
		output.status = true;
		SqlParameter[] parameters = {
			new SqlParameter("@search", System.Data.SqlDbType.VarChar, 50, search)
		};

		DBAccess dbAccess = new DBAccess(_options);
		List<AuditorAuditee> list = await dbAccess.ExecuteReaderAsync<AuditorAuditee>(this.useDBObject(role), parameters);

		return list;
	}
}

Copy


PAGE CONTOLLER DAN API CONTROLLER

Page Controller berfungsi sebagai Controller Halaman, sementara API controller
digunakan untuk mengolah request AJAX atau endpoint.


BASE CONTOLLER

public abstract class BaseController<T> : Controller where T : BaseController<T>
{
    public readonly IAuthInterface _authRepository;
    public readonly IConfiguration _configuration;
    public String _applicationName;
    public UserLoggedIn _userLoggedIn;

    /// <summary>
    /// No Desc
    /// </summary>
    private ILogger<T> _logger;
    /// <summary>
    /// No Desc
    /// </summary>
    protected ILogger<T> Logger => _logger ?? (_logger = HttpContext.RequestServices.GetService<ILogger<T>>());
    /// <summary>
    /// Nama Module
    /// </summary>
    public string baseModuleName;
    /// <summary>
    /// Nama Controller
    /// </summary>
    public string baseCtrlName;
    /// <summary>
    /// IP Address
    /// </summary>
    public string clientIPAddress;

    public void setupPage() {
        _userLoggedIn = CommonHelper.userLoggedIn((ClaimsIdentity)User.Identity);
        ViewBag.ApplicationName = _applicationName;
        ViewBag.UserName = _userLoggedIn.name;
        ViewBag.UserEmail = _userLoggedIn.email;
        ViewBag.UserNPP = _userLoggedIn.npp;
        ViewBag.Title = "Dashboard " + _userLoggedIn.role;
        MenuBuilder menuBuilder = new MenuBuilder();
        ViewBag.Menus = menuBuilder.renderMenuList(_userLoggedIn.role);
    }

    public BaseController(IAuthInterface authRepository, IConfiguration configuration)
    {
        _authRepository = authRepository;
        _configuration = configuration;
        _applicationName = configuration.GetSection("Application").GetSection("Name").Value;
    }

    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        base.OnActionExecuting(filterContext);
    }

Copy


PAGE CONTOLLER

public class PersonController : BaseController<PersonController>
{
	public PersonController(IAuthInterface authRepository, IConfiguration configuration) : base(authRepository, configuration)
	{
	}

	public IActionResult Index()
	{
		if (!User.Claims.Any())
		{
			return RedirectToAction("Login", "Account");
		}

		this.setupPage();

		return View();
	}
	[Route("/configuration/person/auditor")]
	public IActionResult Auditor()
	{
		if (!User.Claims.Any())
		{
			return RedirectToAction("Login", "Account");
		}

		this.setupPage();
		ViewBag.PageDescription = "Manage Auditor";

		return View();
	}
}


Copy


API CONTOLLER

[Route("api/configuration/[controller]")]
[ApiController]
public class PersonController : ControllerBase
{
    private readonly IAuthInterface _authRepository;
    private readonly IPerson _personRepository;

    public PersonController(IPerson personRepository, IAuthInterface authRepository)
    {
        _authRepository = authRepository;
        _personRepository = personRepository;
    }


    [HttpPost]
    [Route("auditor")]
    public async Task<IActionResult> AuditorList([FromBody] DataTableFilter filter)
    {
        List<AuditorAuditee> result = await _personRepository.getPersonList(filter.search, filter.searchType);
        var json = System.Text.Json.JsonSerializer.Serialize(result);
        return Ok(json);
    }
}


Copy

Dengan konfigurasi diatas akan menampilkan hasil sebagai berikut:




REFERENSI

 * https://datatables.net/forums/discussion/55772/how-can-i-get-asp-net-c-to-load-ajax-json-data-returned-from-the-server
 * Stack Overflow - get json post data in c sharp
 * https://www.youtube.com/watch?v=4AbnoOdZaQI
 * https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/partial-tag-helper?view=aspnetcore-6.0
 * https://www.c-sharpcorner.com/article/display-data-in-Asp-Net-using-jquery-datatables-plugin/
 * https://www.aspsnippets.com/Articles/Simple-jQuery-DataTables-Tutorial-with-example-in-ASPNet.aspx

Share
 * Facebook
 * Twitter
 * LinkedIn
 * Pinterest




Tags csharp datatable jquery NETCore restapi sqlserver




ABOUT SUHENDRAYPUTRA


Konsultan IT Bandung, Freelance web developer Kota Bandung. Jasa Pembuatan
Website dan Aplikasi Sistem Informasi. #java #aspnet #wordPress
@konsultanitbdg

Previous Perbedaan .NET Core dan .NET Framework
Next Request Response Logger .NET6


RELATED ARTICLES




CONVERT SQL SERVER TABLE TO C# CLASS

08/04/2023


[SOLVED] MEMPERBAIKI ERROR THE MICROSOFT.ACE.OLEDB.12.0 PROVIDER IS NOT
REGISTERED ON THE LOCAL MACHINE

20/08/2022


REQUEST RESPONSE LOGGER .NET6

15/07/2022




TINGGALKAN BALASAN BATALKAN BALASAN



Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Komentar *

Nama *

Email *

Situs Web

Simpan nama, email, dan situs web saya pada peramban ini untuk komentar saya
berikutnya.



BUY ME A COFFEE




BUY ME A NASI PADANG





PROFIL SINGKAT


Jasa Pembuatan Website dengan harga Mulai dari Rp. 450.000,- / bulan


PENCARIAN ARTIKEL


Cari untuk:

TOP REKOMENDASI HOSTING




UNLIMITED HOSTING BY HOSTER




BANGUN WEBSITE ELEMENTOR





POPULAR TAGS


API apple Article ASPNet Author blackberry csharp Database dependency dotnet
galaxy google HTML imac Invoice Invoice Online iphone JSON kemenkes Konsultan IT
Bandung mobile monitor NET5 NET6 NETCore NETFramework object oracle PHP PL/SQL
Post Programmer Programming restapi review samsung spring boot SQL Server Stored
Procedure Tag Tags video windows WordPress World



Konsultan IT, Freelance Web Developer sejak tahun 2008 dibawah naungan KiNET.



Powered by WordPress | Designed by TieLabs

© Copyright 2024, All Rights Reserved

suhendrayohanaputra.com Open in urlscan Pro 185.229.118.131 Public Scan

Form analysis 4 forms found in the DOM

GET https://suhendrayohanaputra.com/

GET https://suhendrayohanaputra.com/

POST https://suhendrayohanaputra.com/wp-comments-post.php

GET https://suhendrayohanaputra.com/

Text Content

suhendrayohanaputra.com Open in urlscan Pro
185.229.118.131 Public Scan

Form analysis
4 forms found in the DOM