Insert and Update record in jQuery DataTable plugin using jQuery AJAX in ASP.Net Core MVC

trisetia302
 
on Jul 17, 2021 02:59 AM
798 Views

Hi Guys,

I am trying to update data after load from database in Index.cshtml but failed. I want after user click this in Index.cshtml data will redirect to form GetAllDataPetugas.cshtml and automatic fill it.

<td> <a asp-action="GetAllDataPetugas" asp-route-id="@Model.Rows[i]["Kode_Petugas"]"><i class="fa fa-edit btn-sm btn-primary"> Detail</i></a> </td>

Kode_Petugas success passing in url address browser http://localhost:34151/Petugas/GetAllDataPetugas/PTG000001 but data not fill the form GetAllDataPetugas.cshtml.

Any help could be appreciate.

This the Index.cshtml

@model System.Data.DataTable
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/AdminDashboard/_Layout.cshtml";
}
<table style="width: 100%;" id="myTable" class="table table-hover table-responsive table-borderless">
    <thead class="bg bg-dark text-center align-middle text-white">
        <tr>
            <th>Kode Petugas</th>
            <th>Nama Petugas</th>
            <th>Jenis Kelamin</th>
            <th>Jabatan</th>
            <th>Telpon/HP</th>
            <th>Alamat</th>
            <th>Jam Tugas</th>
            <th>#</th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.Rows.Count; i++)
        {
            <tr class="text-center">
                <td>@Model.Rows[i]["Kode_Petugas"]</td>
                <td>@Model.Rows[i]["Nama"]</td>
                <td>@Model.Rows[i]["JK"]</td>
                <td>@Model.Rows[i]["Jabatan"]</td>
                <td>@Model.Rows[i]["Telp"]</td>
                <td>@Model.Rows[i]["Alamat"]</td>
                <td>@Model.Rows[i]["Jam_Tugas"]</td>
                <td>
                    <a asp-action="GetAllDataPetugas" asp-route-id="@Model.Rows[i]["Kode_Petugas"]"><i class="fa fa-edit btn-sm btn-primary"> Detail</i></a>
                </td>
            </tr>
        }
    </tbody>
</table>
<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>
<link type="text/css" href="~/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/assets/plugins/datatables/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript">
    $(function () {
        $("#myTable").dataTable(
            {
                bLengthChange: true,
                lengthMenu: [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
                bFilter: true,
                bSort: true,
                bPaginate: true
            });
    });
</script>

This is the PetugasModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

namespace www.si.perpustakaan.Models
{
    public class PetugasModel
    {
        [Key]
        [Display(Name = "Kode Petugas")]
        [Required(ErrorMessage = "Kode Petugas is required.")]
        public string Kode_Petugas { get; set; }
        [Display(Name = "Nama")]
        [Required(ErrorMessage = "Nama is required.")]
        public string Nama { get; set; }
        [Display(Name = "Jenis Kelamin")]
        [Required(ErrorMessage = "Jenis Kelamin is required.")]
        public string JK { get; set; }
        [Display(Name = "Jabatan")]
        [Required(ErrorMessage = "Jabatan is required.")]
        public string Jabatan { get; set; }
        [Display(Name = "Telp")]
        [Required(ErrorMessage = "Telp is required.")]
        public string Telp { get; set; }
        [Display(Name = "Alamat")]
        [Required(ErrorMessage = "Alamat is required.")]
        public string Alamat { get; set; }
        [Display(Name = "Jam Tugas")]
        [Required(ErrorMessage = "Jam Tugas is required.")]
        public string Jam_Tugas { get; set; }
    }
}

This is the PetugasController.cs

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

using Microsoft.Extensions.Configuration;
using System.Data;
using System.Data.SqlClient;
using www.si.perpustakaan.Models;

namespace www.si.perpustakaan.Controllers
{
    public class PetugasController : Controller
    {
        private IConfiguration Configuration;
        public PetugasController(IConfiguration _configuration)
        {
            Configuration = _configuration;
        }
        // GET: PetugasController
        public ActionResult Index()
        {
            DataTable _DataTablePetugas = new DataTable();
            using (SqlConnection con = new SqlConnection(Configuration.GetConnectionString("MyConn")))
            {
                using (SqlCommand cmd = new SqlCommand())
                {
                    con.Open();
                    cmd.Connection = con;
                    cmd.CommandType = CommandType.Text;
                    cmd.CommandText = "Select * From Petugas";
                    using (SqlDataAdapter adap = new SqlDataAdapter(cmd))
                    {
                        adap.Fill(_DataTablePetugas);
                    }
                    con.Close();
                }
            }
            return View(_DataTablePetugas);
        }
        // GET: PetugasController/GetAllDataPetugas
        public ActionResult GetAllDataPetugas(string Kode_Petugas)
        {
            PetugasModel petugasModel = new PetugasModel();
            try
            {
                if (ModelState.IsValid)
                {
                    if(Kode_Petugas !="")
                    {
                        petugasModel = GetAllDataByID(Kode_Petugas);
                    }
                }
                return View();
            }
            catch
            {
                return View();
            }
        }
        [NonAction]
        public PetugasModel GetAllDataByID(string Kode_Petugas)
        {
            PetugasModel petugasModel = new PetugasModel();
            using (SqlConnection con = new SqlConnection(Configuration.GetConnectionString("MyConn")))
            {
                using (SqlCommand cmd = new SqlCommand())
                {
                    DataTable dataTablePetugas = new DataTable();
                    con.Open();
                    cmd.Connection = con;
                    cmd.CommandType = CommandType.Text;
                    cmd.CommandText = "Select * From Petugas Where Kode_Petugas = @Kode_Petugas";
                    SqlParameter parameter = new SqlParameter("@Kode_Petugas", Kode_Petugas);
                    cmd.Parameters.Add(parameter);
                    using (SqlDataAdapter _SqlDataAdapter = new SqlDataAdapter(cmd))
                    {
                        _SqlDataAdapter.Fill(dataTablePetugas);
                        if (dataTablePetugas.Rows.Count == 1)
                        {
                            petugasModel.Kode_Petugas = dataTablePetugas.Rows[0]["Kode_Petugas"].ToString();
                            petugasModel.Nama = dataTablePetugas.Rows[0]["Nama"].ToString();
                            petugasModel.JK = dataTablePetugas.Rows[0]["JK"].ToString();
                            petugasModel.Jabatan = dataTablePetugas.Rows[0]["Jabatan"].ToString();
                            petugasModel.Telp = dataTablePetugas.Rows[0]["Telp"].ToString();
                            petugasModel.Alamat = dataTablePetugas.Rows[0]["Alamat"].ToString();
                            petugasModel.Jam_Tugas = dataTablePetugas.Rows[0]["Jam_Tugas"].ToString();
                        }
                        return petugasModel;
                    }
                }
            }
        }
    }
}

This is the GetAllDataPetugas.cshtml

@model www.si.perpustakaan.Models.PetugasModel

@{
    ViewData["Title"] = "Add Data Petugas";
    Layout = "~/Views/Shared/AdminDashboard/_Layout.cshtml";
}
<div class="tab-content">
    <div class="tab-pane tabs-animation fade show active" id="tab-content-0" role="tabpanel">
        <div class="row">
            <div class="col-md-12">
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h3 class="card-header bg bg-info">Edit Data Petugas</h3>
                        <hr />
                        <form asp-action="GetAllDataPetugas">
                            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="position-relative form-group">
                                        <label asp-for="Kode_Petugas" class="control-label"></label>
                                        <input asp-for="Kode_Petugas" class="form-control" placeholder="Enter Kode Petugas" />
                                        <span asp-validation-for="Kode_Petugas" class="text-danger"></span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="position-relative form-group">
                                        <label asp-for="Nama" class="control-label"></label>
                                        <input asp-for="Nama" class="form-control" placeholder="Enter Nama Petugas" />
                                        <span asp-validation-for="Nama" class="text-danger"></span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="position-relative form-group">
                                        <label asp-for="JK" class="control-label"></label>
                                        <br />
                                        <input type="radio" value="Laki-Laki" asp-for="JK" /> Laki-Laki
                                        <br />
                                        <input type="radio" value="Perempuan" asp-for="JK" /> Perempuan
                                        <br />
                                        <span asp-validation-for="JK" class="text-danger"></span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="position-relative form-group">
                                        <label asp-for="Jabatan" class="control-label"></label>
                                        <input asp-for="Jabatan" class="form-control" placeholder="Enter Jabatan Petugas" />
                                        <span asp-validation-for="Jabatan" class="text-danger"></span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="position-relative form-group">
                                        <label asp-for="Telp" class="control-label"></label>
                                        <input asp-for="Telp" class="form-control" placeholder="Enter Nomer Telpon/HP Petugas" />
                                        <span asp-validation-for="Telp" class="text-danger"></span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="position-relative form-group">
                                        <label asp-for="Alamat" class="control-label"></label>
                                        <textarea asp-for="Alamat" cols="4" class="form-control" placeholder="Enter ALamat Petugas"></textarea>
                                        <span asp-validation-for="Alamat" class="text-danger"></span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="position-relative form-group">
                                        <label asp-for="Jam_Tugas" class="control-label"></label>
                                        <input asp-for="Jam_Tugas" class="form-control" placeholder="Enter Jam Bertugas Petugas" />
                                        <span asp-validation-for="Jam_Tugas" class="text-danger"></span>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div align="center">
                                        <button type="submit" value="Edit" class="mt-1 btn btn-info">Edit Data Petugas</button>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <a asp-action="Index">Back to List</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download