ASP.NET：开机自检列表 <Object> /使用Ajax（JSON）从视图到控制器进行建模

Question

Working in ASP.NET Core where I'm trying to POST a List of Items through Ajax . Ideally, I would like to pass the entire ReportViewModel but I haven't been able to match the signature correctly (since passing a DateTime or a List isn't that easy).

My question

1. How to POST a List<Object> from the view with Ajax to the controller?
2. OR How to POST a Model from the view with Ajax to the controller?

I currently have the following code:

Models

public class ReportViewModel {
    public int ReportType { get; set; };
    public DateTime DateFrom { get; set; };
    public DateTime DateTo { get; set; };
    public List<Item> ItemList{ get; set; };
}

public class Item {
    // Properties are simple types
}

View (ReportView)

@model Namespace.ViewModels.ReportViewModel
@inject Namespace.Resource Resources
<!-- HTML code -->
<form>
<button class="ui button" type="submit" onclick="return createPDF();">@Resources.Save</button>
</form>

<script>
  function createPDF() {
    alertify.set('notifier', 'position', 'bottom-left');

    $.ajax({
      type: "POST",
      url: "CreatePDF",
      data: JSON.stringify({
        reportType: @Model.ReportType,
        ticksDateFrom: @Model.DateFrom.Ticks,
        ticksDateTo: @Model.DateTo.Ticks
        @* TODO: Add the List<Items> itemList (from @Model.ItemList)*@
      }),
      contentType: 'application/json',
      // Code for success and error
    });

    return false;
  };
</script>

Controller (ReportController)

[HttpPost]
public JsonResult CreatePDF([FromBody] dynamic data) {
    // Lots of code
    return Json(new { isError = false });
}

/* When passing the entire model
* [HttpPost]
* public JsonResult CreatePDF([FromBody] ReportViewModel model) {
*     // Lots of code
*     return Json(new { isError = false });
* }
*/

I tried passing the model as seen below but that leaves me with the parameter in the controller being null or as a new "empty" object, depending if I use [FromBody] or not.

$.ajax({
  type: "POST",
  url: "CreatePDF",
  data: @Html.Raw(Json.Serialize(Model)),
  contentType: 'application/json',
  // Code for success and error
});

Answer 1

You can use the BeginForm in your view that posts to a controller:

@model Namespace.ViewModels.ReportViewModel
@inject Namespace.Resource Resources

@using (Html.BeginForm("CreatePDF", "[PDFControllerName]", FormMethod.Post, new { @id = "pdfCreatorForm" }))
{
    <!-- Send parameters to a controller like this (invisibly) -->
    @Html.HiddenFor(m => m.ReportType)
    @Html.HiddenFor(m => m.DateFrom.Ticks)
    @Html.HiddenFor(m => m.DateTo.Ticks)
    @Html.HiddenFor(m => m.ItemList) <!-- Send the List<Items> -->

    <button type="submit" class="ui button" onclick="alertify.set('notifier', 'position', 'bottom-left')">@Resources.Save</button>
}

And then you don't need the JavaScript any more, another thing to keep in mind is to keep as much functionality on your server side as you can.

If you POST the form to a controller, you can access the view's parameters etc like this:

public JsonResult CreatePDF(ReportViewModel formData)
{
    int reportType = formData.ReportType;
    DateTime ticksDateFrom = formData.DateFrom.Ticks;
    DateTime ticksDateTo = formData.DateTo.Ticks;
    List<Items> itemList = formData.ItemList;

    // Lots of code
}

And, you actually doesn't need to specify that it's taking in a HttpPost :)

Answer 2

I don't know what exactly I changed to make it work but the following compiles correctly. Could be the processData: true and cache: false properties?

Controller

[HttpPost]
public JsonResult CreatePDF([FromBody] ReportViewModel model)
{
    // Lots of code
    return Json(new { isError = false });
}

View (JS only)

$.ajax({
  type: "POST",
  url: "CreatePDF",
  data: JSON.stringify(@Html.Raw(Json.Serialize(Model))),
  contentType: 'application/json; charset=utf-8',
  processData: true,
  cache: false,
  // Code for success and error
});