How to save user input from a modal dialog and display it on a datatable without reloading the page

See more:

Ajax

jQuery

MVC6

C#6.0

I have a modal with input fields, i want to be able to capture user inputs in my controller action insert same into the database and display it datatable at the same time without reloading the page.

My modal displays well, but each time i enter input and click on the save button, the values in the controller action are always null, i want to be able to send user input to the controller action, insert and displays same on datatable without reloading the page, any assistance will be appreciated.

What I have tried:

My Modal Code:

<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>
  }

My Action Method:

[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!" });
        }
   }

My Ajax function:

<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>