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

Question

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

Мой модальный код:

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

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

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

Answer 1

Что происходит, вам нужно смоделировать ваши данные как ожидаемый JSON, который вы публикуете.

В следующем примере я создал тип myType со свойствами, которые вы показываете в своем примере, и json анализируется на правильный тип со свойствами, заполненными, как вы ожидаете.

Подробнее можно прочитать здесь Вызов веб-API из .NET-клиента (C #) , хотя я бы сказал, что он работает не только с .NET-клиентом, но и с любого клиента.

Вы также можете проверить эту ссылку здесь с некоторыми примерами:
Как получить JSON в качестве параметра метода действия MVC 5

[HttpPost]
public JsonResult InsertPatientAppointment(myType myType)
{

    return new JsonResult(new
    {
        myType.patientRegNo,
        myType.appointmentDate
    });
}

public class myType {
    public string patientRegNo { get; set; }
    public string appointmentDate { get; set; }
}

Проверил себя с почтальоном .. работает. Я также попробовал вашу реализацию и действительно был нулевым.

Надеюсь, это поможет.