Как сохранить пользовательский ввод из модального диалогового окна и отобразить его в таблице данных без перезагрузки страницы

---

У меня есть модал с полями ввода, я хочу иметь возможность захватывать пользовательские входы в моем контроллере действия вставить то же самое в базу данных и отображать его datatable в то же время без перезагрузки страницы.

Мой модальный дисплей хорошо отображается, но каждый раз, когда я ввожу ввод и нажимаю на кнопку Сохранить, значения в действии контроллера всегда равны нулю, я хочу иметь возможность отправлять пользовательский ввод в действие контроллера, вставлять и отображать то же самое на datatable без перезагрузки страницы, любая помощь будет оценена по достоинству.

Что я уже пробовал:

Мой Модальный Код:

<pre>@using (Html.BeginForm("AddVisitEntries", "Consultant", FormMethod.Post, new { @id = "frmPatientRecord", @class = "col-xs-12" }))
  {
                            <div class="modal-body">

                                <div class="form-horizontal">
                                    <div class="form-group">
                                        <label id="patientRegNo" class="control-label col-md-2">RegNo:</label>
                                        <div class="col-md-10">
                                            <input type="text" value="" id="patientRegNo" name="patientRegNo" class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label id="appointmentDate" class="control-label col-md-2">Date:</label>
                                        <div class="col-md-10">
                                            <div class='input-group date' id='datetimepicker'>
                                                <input type='text' class="form-control datetimepicker" id="appointmentDate" name="appointmentDate" />
                                                <span class="input-group-addon datetimepicker-addon">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
  }

Мой Метод Действий:

[Authorize(Roles = "Consulting")]
    public JsonResult InsertPatientAppointment(string patientRegNo, string appointmentDate)
    {

        if (patientRegNo != null)
        {    
          //Insert record   here    
           //retrieves records here and pass it to the below function
          var data = Newtonsoft.Json.JsonConvert.SerializeObject(approveList);
                    return Json(data);                  
           return Json(new { s = "Record inserted successfully!" });              
        }
        else
        {
            return Json(new { f = "Insertion failed, please try again later!" });
        }
   }

Моя функция Ajax:

<pre><script type="text/javascript">
   $(document).ready(function () {
    var table = $("#tblAppointment").DataTable();
    $("#saveButton").click(function () {

        $.ajax({
            url: '/Consultant/InsertPatientAppointment/',
            type: "POST",
            data: JSON.stringify({ appointmentDate: $("#appointmentDate"), 
patientRegNo: $("#patientRegNo").val(), }),
            cache: false,
            dataType: "json",
            success: function (_data) {
                $(".spina").hide();
                if (_data.f !== undefined) {
                    swal({
                        title: "Failed!",
                        text: _data.f,
                        type: "info"
                    });
                    table.clear().draw();
                    return false;
                }
                else {
                    swal({
                        title: "Success!",
                        text: _data.s,
                        type: "success"
                    });
                }

                var arr = $.map(JSON.parse(_data), function (el) { return el 
});
                //console.log(arr);
                if (arr.length === 0) {
                    swal({
                        title: "No Record Found!",
                        text: _data.f,
                        type: "info"
                    });
                    table.clear().draw();
                    return false;
                }
                table.clear();
                table.destroy();
                $('#tblAppointment').dataTable({
                    data: arr,
                    columns: [
                        { "data": "PatientRegNo" },
                        { "data": "AppointmentDate" },                                                       
                    ],
                    dom: 'Bfrtip',
                    buttons: [
                        'copy', 'csv', 'excel',
                        {
                            extend: 'pdfHtml5',
                            orientation: 'Portriat',
                            pageSize: 'A4'
                        }
                    ]
                });
                table = $("#tblAppointment").DataTable();
            }
        });
    });
 });

</script>

---