ASP.NET Core 8.0 MVC Ajax，将 null 传递到控制器

Question

我正在尝试将数据提交到控制器方法中，以便将项目添加到存储库中。

我正在使用 AJAX jQuery 从 HTML (razor) 页面执行此操作。

表单将数据序列化，并且可以读取元素。但是，当数据发送到该方法时，传递到该方法的参数为 null。

我在 stackoverflow 和互联网上浏览了许多帖子。

我最初的控制器功能是返回

IActionResult

和

Action

结果。然而，返回

View();

，参数仍然为空。

我试图让论证成为对象本身，即（书本）就是这样的模型。但没有效果。

我显然在这里遗漏了一些东西。

提前致谢。

.cshtml

/ jQuery:

@model Library.Models.Book

@{
    ViewData["Title"] = "BookAddView";
}

<h1>BookAddView</h1>

<h4>Book</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form id="frm_newBook">
            <div class="mb-3 form-group">
                <label asp-for="ISBN" class="control-label"></label>
                <input asp-for="ISBN" class="form-control" id="input_isbn"/>
            </div>
            <div class="mb-3 form-group">
                <label asp-for="Title" class="control-label"></label>
                <input asp-for="Title" class="form-control" id="input_title" />
            </div>
            <div class="mb-3 form-group">
                <label asp-for="Author" class="control-label"></label>
                <input asp-for="Author" class="form-control" id="input_author" />
            </div>
            <div class="form-group form-check mb-3">
                <label class="form-check-label">
                    <input class="form-check-input" asp-for="AvailabilityStatus" id="input_avail" /> @Html.DisplayNameFor(model => model.AvailabilityStatus)
                </label>
            </div>
            <div class="form-group">
                <button id="btn_SubmitBook" class="btn btn-primary">Submit</button>
            </div>
        </form>

    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

<script type="text/javascript">
    $('#btn_SubmitBook').click(
        function () {

            var data = $("#frm_newBook").serialize();

            $.ajax({
                url: '@Url.Action("BookAdd", "Library")',
                type: 'POST',
                dataType: 'json',
                content: "application/json; charset=utf-8",
                data: data
            });
        }
    );
</script>

C# 控制器：

// POST : Book/Create and AddBook
[HttpPost]
public JsonResult BookAdd(string jsonInput)
{
    if (String.IsNullOrEmpty(jsonInput))
    {
        return Json(0);
    };

    Book book = JsonConvert.DeserializeObject<Book>(jsonInput);

    _bookRepository.AddBook(book);
    return Json(1);
}

Answer 1

在代码中进行以下更改：

1. 指定

   contentType: 'application/x-www-form-urlencoded; charset=utf-8'

2. 根据控制器方法中的参数名称设置参数名称

$.ajax({
    url: '@Url.Action("BookAdd", "Library")',
    type: 'POST',
    dataType: 'json',
    contentType: 'application/x-www-form-urlencoded; charset=utf-8',                
    data: { jsonInput: data }
   });