Asp.Net MVC ajax 向控制器发送空对象？

Question

我正在使用 Asp.Net MVC 开发一个调查应用程序。

我有一个名为 Index.cshtml 的页面，其中有一个问题表和一个“添加新”按钮。单击按钮后，会使用 jQuery 打开一个弹出窗口。我正在从控制器调用一个视图来填充名为 AddOrEdit.cshtml（子页面）的 jQuery 对话框。我正在添加新的问题和选项。问题是一个文本字段，它的选项被添加到可编辑的表格中。单击提交按钮后，将触发提交表单事件（保存或更新）。 Asp.Net MVC ajax 向控制器发送空对象。我的问题对象有选项列表。所以一对多的关系。

Index.cshtml 和 submit(ajax) 函数

@{
ViewBag.Title = "Soru Listesi";
}

<h2>Soru Oluşturma</h2>
<a class="btn btn-success" style="margin-bottom: 10px" 
onclick="PopupForm('@Url.Action("AddOrEdit","Question")')"><i class="fa fa-plus"></i> Yeni Soru 
Oluştur</a>
 <table id="questionTable" class="table table-striped table-bordered accent-blue" style="width: 
  100%">
<thead>
    <tr>
        <th>Soru No</th>
        <th>Soru Adı</th>
        <th>Oluşturma Tarihi</th>
        <th>Güncelleme Tarihi</th>
        <th>Güncelle/Sil</th>
    </tr>
</thead>
</table>
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />



@section Scripts{
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

<script>


    var Popup, dataTable;
    $(document).ready(function() {

        dataTable = $("#questionTable").DataTable({
            "ajax": {
                "url": "/Question/GetData",
                "type": "GET",
                "datatype": "json"
            },
            "columnDefs": [
                { targets: 2 }
            ],
            "scrollX": true,
            "scrollY": "auto",
            "columns": [
                { "data": "QuestionId" },
                { "data": "QuestionName" },
                {
                    "data": "CreatedDate",
                    "render": function(data) { return getDateString(data); }
                },
                {
                    "data": "UpdatedDate",
                    "render": function(data) { return getDateString(data); }
                },
                {
                    "data": "QuestionId",
                    "render": function(data) {
                        return "<a class='btn btn-primary btn-sm' onclick=PopupForm('@Url.Action("AddOrEdit", "Question")/" +
                            data +
                            "')><i class='fa fa-pencil'></i> Güncelle</a><a class='btn btn-danger btn-sm' style='margin-left:5px' onclick=Delete(" +
                            data +
                            ")><i class='fa fa-trash'></i> Sil</a>";
                    },
                    "orderable": false,
                    "searchable": false,
                    "width": "150px"
                }
            ],
            "language": {
                "emptyTable":
                    "Soru bulunamadı, lütfen <b>Yeni Soru Oluştur</b> butonuna tıklayarak yeni soru oluşturunuz. "
            }
        });
    });


    function getDateString(date) {
        var dateObj = new Date(parseInt(date.substr(6)));
        let year = dateObj.getFullYear();
        let month = (1 + dateObj.getMonth()).toString().padStart(2, '0');
        let day = dateObj.getDate().toString().padStart(2, '0');
        return day + '/' + month + '/' + year;
    };


    function PopupForm(url) {
        var formDiv = $('<div/>');
        $.get(url)
            .done(function(response) {
                formDiv.html(response);
                Popup = formDiv.dialog({
                    autoOpen: true,
                    resizable: true,
                    title: 'Soru Detay',
                    modal: true,
                    height: 'auto',
                    width: '700',
                    close: function() {
                        Popup.dialog('destroy').remove();
                    }

                });
            });
    }

    function SubmitForm(form) {
        event.preventDefault();

        if (form.checkValidity() === false) {
            event.stopPropagation();
        }
        form.classList.add('was-validated');
        if ($(form).valid()) {
            var question = {};
            question.questionId = 1111;
            var options = new Array();
            $("#questionForm TBODY TR").each(function() {
                var row = $(this);
                var option = {};
                option.OptionId = row.find("TD").eq(0).html();
                option.OptionName = row.find("TD").eq(1).html();
                options.push(option);
            });
            question.options = options;
            question.responses = new Array();
            $.ajax({
                type: "POST",
                url: form.action,
                data: JSON.stringify(question),
                success: function(data) {
                    if (data.success) {
                        debugger;
                        Popup.dialog('close');
                        //dataTable.ajax.reload();
                        $.notify(data.message,
                            {
                                globalPosition: "top center",
                                className: "success",
                                showAnimation: "slideDown",
                                gap: 1000
                            });
                    }
                },
                error: function(req, err) {
                    debugger;
                    alert('req : ' + req + ' err : ' + err);
                },
                complete: function(data) {
                    alert('complete : ' + data.status);
                }
            });
        }
    }


    function ResetForm(form) {
        Popup.dialog('close');
        return false;
    }

    function Delete(id) {
        if (confirm('Bu soruyu silmek istediğinizden emin misiniz?')) {
            $.ajax({
                type: "POST",
                url: '@Url.Action("Delete", "Question")/' + id,
                success: function(data) {
                    if (data.success) {
                        dataTable.ajax.reload();
                        $.notify(data.message,
                            {
                                className: "success",
                                globalPosition: "top center",
                                title: "BAŞARILI"
                            })
                    }
                }

            });
        }
    }

</script>
}

QuestionController AddOrEdit 操作

    [HttpPost]
    public ActionResult AddOrEdit(Questions question)
    {

        using (MerinosSurveyEntities db = new MerinosSurveyEntities())
        {
            List<Options> options = (List<Options>) question.Options;
            List<Options> existingOptions =  new List<Options>(db.Options.Where(x => x.Status && x.IsActive && x.QuestionId == question.QuestionId));
            foreach (Options existingOption in existingOptions)
            {
                Options optionUpdated = options.FirstOrDefault(x => x.OptionId == existingOption.OptionId);
                if (optionUpdated != null)
                {
                    //Update
                    existingOption.UpdatedDate = DateTime.Now;
                    existingOption.OptionName = optionUpdated.OptionName;
                    existingOption.IsActive = true;
                    existingOption.Status = true;
                    db.Options.Attach(existingOption);
                    db.Entry(existingOption).State = EntityState.Modified;
                    db.SaveChanges();
                    options.RemoveAll(x => x.OptionId == existingOption.OptionId);
                }
                else
                {
                    //Delete
                    existingOption.Status = false;
                    existingOption.UpdatedDate = DateTime.Now;
                    db.Options.Attach(existingOption);
                    db.Entry(existingOption).State = EntityState.Modified;
                    db.SaveChanges();
                }
            }
            foreach (Options optionNew in existingOptions)
            {
                optionNew.IsActive = true;
                optionNew.Status = true;
                optionNew.CreatedDate = DateTime.Now;
                optionNew.UpdatedDate = DateTime.Now;
                db.Options.Add(optionNew);
                db.SaveChanges();
                return Json(new { success = true, message = "Soru ve seçenekleri başarılı şekilde oluşturuldu/güncellendi." }, JsonRequestBehavior.AllowGet);

            }                

          //  db.Questions.Attach(question);
            return Json(new { success = true, message = "Soru başarılı bir şekilde güncellendi." }, JsonRequestBehavior.AllowGet);
        }

    }

问题对象

 //------------------------------------------------------------------------------
 // <auto-generated>
 //------------------------------------------------------------------------------

 namespace MerinosSurvey.Models
 {
 using System;
 using System.Collections.Generic;

 public partial class Questions
 {
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public Questions()
    {
        this.Responses = new HashSet<Responses>();
        this.Options = new HashSet<Options>();
    }

    public int QuestionId { get; set; }
    public string QuestionName { get; set; }
    public int QuestionTypeId { get; set; }
    public System.DateTime CreatedDate { get; set; }
    public int CreatedUserId { get; set; }
    public bool IsActive { get; set; }
    public bool Status { get; set; }
    public System.DateTime UpdatedDate { get; set; }

    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<Responses> Responses { get; set; }
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<Options> Options { get; set; }
  }
 }

选项类

 //------------------------------------------------------------------------------
 // <auto-generated>
 //------------------------------------------------------------------------------

namespace MerinosSurvey.Models
{
using System;
using System.Collections.Generic;

public partial class Options
{
    public int OptionId { get; set; }
    public string OptionName { get; set; }
    public int QuestionId { get; set; }
    public System.DateTime CreatedDate { get; set; }
    public System.DateTime UpdatedDate { get; set; }
    public bool IsActive { get; set; }
    public bool Status { get; set; }

    public virtual Questions Questions { get; set; }
}
}

Answer 1

我终于解决了这个问题。因为我忘记在发送 ajax 请求的部分添加“contentType”，所以“ajax”正在向控制器发送空对象。但是我尝试过的Pascal case和camel case都没有改变。我在 Case 中看到了 Ajax 独立工作。

我正在添加我正在编辑的部分。在这种情况下，它可以正常工作。

function SubmitForm(form) {
        event.preventDefault();

        if (form.checkValidity() === false) {
            event.stopPropagation();
        }
        form.classList.add('was-validated');
        if ($(form).valid()) {
            var question = {};
            question.questionId = 1111;
            question.questionName = "Name";
            var options = new Array();
            $("#questionForm TBODY TR").each(function() {
                var row = $(this);
                var option = {};
                option.optionId = row.find("TD").eq(0).html();
                option.optionName = row.find("TD").eq(1).html();
                option.questionId = 0;
                option.isActive = true;
                option.status = true;
                options.push(option);
            });

            question.options = options;
            question.responses = new Array();
            $.ajax({
                type: "POST",
                url: form.action,
                data: JSON.stringify(question),
                contentType: "application/json",//this is the line I forgot to add.
                success: function(data) {
                    if (data.success) {
                        debugger;
                        Popup.dialog('close');
                        //dataTable.ajax.reload();
                        $.notify(data.message,
                            {
                                globalPosition: "top center",
                                className: "success",
                                showAnimation: "slideDown",
                                gap: 1000
                            });
                    }
                },
                error: function(req, err) {
                    debugger;
                    alert('req : ' + req + ' err : ' + err);
                },
                complete: function(data) {
                    alert('complete : ' + data.status);
                }
            });
        }
    }