Jquery Datatable не отображается с помощью MVC

Question

Я пытаюсь отобразить данные из SQL-запроса с использованием данных Jquery. Моя проблема в том, что данные в представлении не отображаются должным образом, как показано на прилагаемом изображении. не могу понять, что я делаю неправильно, я вынул часть кода. Данные извлекаются из базы данных без каких-либо проблем

HTML-код

<table id="tblPatientHealthRecord" class="table table-bordered table-striped" style="width: 100% !important;">
    <thead>
         <tr>
            <th>Record ID</th>

          </tr>
      </thead>
   </table>

C # Код

public class HealthRecordController : Controller
{
    // GET: HealthRecord
    public ActionResult Index(int id)
    {
        ViewBag.patientid = id;


        List<HealthRecordata> HealthRecordList = new List<HealthRecordata>();
  // Oracle connection to table health record
        using (OracleConnection conn = new OracleConnection(WebConfigurationManager.ConnectionStrings["HealthRecord"].ConnectionString))
        {
            conn.Open();
            OracleCommand cmd = new OracleCommand();
            cmd.Connection = conn;
            cmd.CommandText = @"SELECT                                                                   
                                       hr.record                                               
                                        FROM
                                            health_records hr
                                            LEFT JOIN health_record_types hrt ON hr.record_type = hrt.code
                                            LEFT JOIN media_types mt ON hr.media_type = mt.code
                                            Where  hr.patient=:PatientId";
            cmd.CommandType = CommandType.Text;
            cmd.Parameters.Add("PatientId", id);
            OracleDataReader rdr = cmd.ExecuteReader();

            while (rdr.Read())
            {
                var healthrecord = new HealthRecordata();                  
                HealthRecordList.Add(healthrecord);
            }
        }
        return Json(new { data = HealthRecordList }, JsonRequestBehavior.AllowGet);

    }

код Javascript

   @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Styles.Render("~/bundles/datatablecss")
    @Scripts.Render("~/bundles/table")
<script type="text/javascript">
        $(document).ready(function () {
            $('#tblPatientHealthRecord').DataTable({
                ajax: {
                    "url": "/HealthRecord/Index",
                    "type": "GET",
                    "dataType": "json", 
                },               
                columns: [
                    {
                      "data": "Record"                      
                    },

                ]
            });
        });
 </script>

Answer 1

Возможно попробуйте это вместо:

$(document).ready(function () {


            $.get("/HealthRecord/Index", function (data) {
                var jsonData = data;

                $('#tblPatientHealthRecord').DataTable({
                    data: jsonData,
                    columns: [
                        { data: "Record" },

                    ]


                });
            });


        });

https://dotnetfiddle.net/05jCka