Hi,

I was tried to get detail data using ajax, when passed it will show data on table, But unfortunately I was get error message undefined value on the table. Where is the mistake.

Any help could be appreciate.

The Controller.cs

[HttpGet]
public JsonResult Get_Edit_DataUraianPembayaranByID(string ID_Pembayaran)
{
    List<PembayaranModel> pembayaran = new List<PembayaranModel>();
    using (SqlConnection con = new SqlConnection(this._configuration.GetConnectionString("Apps_KlinikContext")))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            con.Open();
            cmd.Connection = con;
            cmd.CommandType = CommandType.Text;
            cmd.CommandText = "Select * From Tbl_Detail_Pembayaran Where ID_Pembayaran = '" + ID_Pembayaran.Trim() + "'";
            cmd.Parameters.AddWithValue("@ID_Pembayaran", ID_Pembayaran);
            using (SqlDataReader rdr = cmd.ExecuteReader())
            {
                while (rdr.Read())
                {
                    pembayaran.Add(new PembayaranModel
                    {
                        ID_Detail_Pembayaran = Convert.ToInt32(rdr["ID_Detail_Pembayaran"].ToString()),
                        ID_Pembayaran = rdr["ID_Pembayaran"].ToString(),
                        Rincian_Pembayaran = rdr["Rincian_Pembayaran"].ToString(),
                        ID_Obat = rdr["ID_Obat"].ToString(),
                        Nama_Obat = rdr["Nama_Obat"].ToString(),
                        Qty = rdr["Qty"].ToString(),
                        Harga = rdr["Harga"].ToString(),
                        Total_Bayar = rdr["Total_Bayar"].ToString()
                    });
                }
            }
        }
        return Json(pembayaran.ToList());
    }
}

<script type="text/javascript">
    $(document).ready(function () {
        $("#BtnTampilDetailUraian").on("click", function () {
            $("#table1").show();
             $.ajax({
                url: "@Url.Action("Get_Edit_DataUraianPembayaranByID", "Pembayaran")",
                type: "GET",
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                 data: { ID_Pembayaran: $('#ID_Pembayaran').val() },
                success: function (result) {
                     var html = '';
                     var No = 1;
                     $.each(result, function (key,item) {
                         html += '<tr>';
                         html += '<td class="text-center">' + No++ + '</td>';
                         html += '<td class="text-center">' + item.ID_Detail_Pembayaran + '</td>';
                         html += '<td class="text-center">' + item.Rincian_Pembayaran + '</td>';
                         html += '<td class="text-center">' + item.ID_Obat + '</td>';
                         html += '<td class="text-center">' + item.Nama_Obat + '</td>';
                         html += '<td class="text-center">' + item.Qty + '</td>';
                         html += '<td class="text-center">' + item.Harga + '</td>';
                         html += '<td class="text-center">' + item.Total_Bayar + '</td>';
                         html += '<td class="text-center align-middle"><a href="#" onclick="return EditData(' + item.ID_Detail_Pembayaran + ')" ><i class="fa fa-edit btn-sm btn-primary"> Edit</i></a>|<a href="#" onclick="return DeleteData(' + item.ID_Detail_Pembayaran + ')" ><i class="fa fa-trash btn-sm btn-danger"> Delete</i></a></td>';
                         html += '</tr>';
                     });
                     $('.tbody').html(html);
                 },
                 error: function (errormessage) {
                     alert(errormessage.responseText);
                 }
             });
        });
    });
</script>