Working in ASP.NET Core where I'm trying to POST a List of Items through Ajax. Ideally, I would lik,javascript,asp.net,ajax,razor,model"/>

时间戳

首页 > 解决方案 > ASP.NET：POST 列表 / Model with Ajax (JSON) from view to controller

Working in ASP.NET Core where I'm trying to POST a List of Items through Ajax. Ideally, I would lik

javascript - ASP.NET：POST 列表 / Model with Ajax (JSON) from view to controller

Working in ASP.NET Core where I'm trying to POST a List of Items through Ajax. Ideally, I would lik

问题描述

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

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

标签： javascriptasp.netajaxrazormodel

解决方案

您可以在发布到控制器的视图中使用 BeginForm：

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

然后您不再需要 JavaScript，要记住的另一件事是在服务器端保留尽可能多的功能。

如果您将表单发布到控制器，您可以像这样访问视图的参数等：

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
}

而且，您实际上不需要指定它正在接收 HttpPost :)

推荐阅读