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解析为正确的类型，并按预期填充了属性。

您可以在Call a Web API From a .NET Client (C#)处阅读更多内容，尽管我会说它不仅适用于.NET客户端，而且适用于任何客户端。

您也可以在此处通过一些示例查看此链接：
How to receive JSON as an MVC 5 action method parameter

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

用邮递员测试了自己。我还尝试了您的实现，但确实为空。

希望有帮助。

如何从模式对话框中保存用户输入并在不加载页面的情况下将其显示在数据表上

1 个答案: