Jquery Array 将其传递给后端 C# MVC

Question

我有一个 JQuery 数组，它需要传递到后端。但是没有通过。这里我已经粘贴了编码部分。

学费DTO

 public class TuitionDTO
{
    public int TuitionId { get; set; }
    public string TuitionTitle { get; set; }

    public List<ClassCoverageDTO> ClassCoverage { get; set; }
}

ClassCoverageDTO

  public class ClassCoverageDTO
{
    public int ClassCoverageId { get; set; }
    public int TuitionId { get; set; }
    public int DistrictId { get; set; }
    public int CityId { get; set; }
    public string Place { get; set; }
    public DateTime? AddedDate { get; set; }
    public string AddedBy { get; set; }
    public DateTime? ModifiedDate { get; set; }
    public string ModifiedBy { get; set; }
    public bool? IsActive { get; set; }

    //Display Purpose Only
    public string DistrictName { get; set; }
    public string CityName { get; set; }
}

将项目添加到 JQuery 数组

    function AddClassCoverage(_districtId, _cityId, _place, _districtName, _cityName) {
$('<tr id=' + rowId + '><td id=' + _districtId + '>' + _districtName + '</td><td id=' + _cityId + '>' + _cityName + '</td><td id=' + _place + '>' + _place + '<td id="my">X</td></tr>').appendTo("#responsive-table-example tbody");

            var coverage = {
                DistrictId: _districtId,
                CityId: _cityId,
                Place: _place,
                DistrictName: _districtName,
                CityName: _cityName
        };
        CoverageItemsArr.push(coverage);
 rowId++;

}

HTML 部分

    <div class="col-sm-12">
                            <div class="form-group">
                                <label>Add Class Coverage<span id="ast">*</span></label>
                                <table id="responsive-table-example" class="table table-bordered table-striped table-condensed">
                                    <thead>
                                        <tr>
                                            <th>District</th>
                                            <th>City/Town</th>
                                            <th>Place</th>
                                            <th>Action</th>
                                        </tr>
                                        <tr>
                                            <th>
                                                <select class="form-control" name="district" id="iddistrict"></select>
                                            </th>
                                            <th>
                                                <select class="form-control" name="city" id="idcity"></select>
                                            </th>
                                            <th> <input class="form-control input-sm" type="text" placeholder="" name="place" id="idplace"></th>
                                            <th><button type="button" class="btn btn-primary btn-sm" onclick="addClassCoverage()">Add</button></th>
                                        </tr>
                                    </thead>
                                    <tbody id="coveragetable"></tbody>
                                </table>
                            </div>
                        </div>

追加到 FormData 并传递给后端

//Append to FormData and Send to Backend via AJAX CALL

        formData.append("ClassCoverage", CoverageItemsArr)

        $.ajax({
            url: $("#addTuitionDetails").val(),
            cache: false,
            type: "POST",
            data: formData,
            mimeType: 'multipart/form-data',
            processData: false,
            contentType: false,
            cache: false,
            success: function (status) {
              alert("Success");
            }
        });
        return true;

Answer 1

你有一个控制器来处理 ajax 请求吗？

   [HttpPost]
  public ActionResult AjaxRequest(string yourvalue)
    {
        string returendvalue = "";
        return Json(returendvalue, JsonRequestBehavior.AllowGet);
    }

'

这里是一个控制器功能的例子，

现在在 ajax 请求中

     $.ajax({
        url:'@Url.RouteUrl(new { action="AjaxRequest",Controller="Your Controller"})',
        cache: false,
        type: "POST",
        data: formData,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        mimeType: 'multipart/form-data',
        processData: false,
        contentType: false,
        cache: false,
        success: function (status) {
          alert("Success");
        }
    });

Answer 2

假设TuitionDTO 是您的控制器操作的参数，我会试试这个（只是看看值是否正确绑定）： 换行 formData.append("ClassCoverage", CoverageItemsArr) 带有硬编码值：

var formData =
{
    TuitionId: 1,
    TuitionTitle: "Tuition title",
    ClassCoverage: [
        {
                DistrictId: 1,
                CityId: 1,
                Place: "Some place",
                DistrictName: "Some district",
                CityName: "Some city",
                ClassCoverageId: 1,
                TuitionId: 1,
                AddedBy: "someone",
                ModifiedBy: "someone else"
        },
        {
                DistrictId: 2,
                CityId: 2,
                Place: "Some other place",
                DistrictName: "Some other district",
                CityName: "Some other city",
                ClassCoverageId: 2,
                TuitionId: 2,
                AddedBy: "someone",
                ModifiedBy: "someone else"
        }
    ]
}

试试这个。如果它有效，那么只需像这样替换实际值和 ClassCoverage

var formData =
{
    TuitionId: $("#whatever_holds_it").val(),
    TuitionTitle: $("#whatever_holds_title").val(),
    ClassCoverage: CoverageItemsArr
}

如果它还不起作用，请尝试设置覆盖对象的所有属性，看看会发生什么。 否则，我们需要您的控制器操作（只有它的签名，而不是正文）。 确保您的操作上方有 `[HttpPost]' 属性。