使用ajax将值从MVC视图传递到控制器

Question

我正在使用 asp.net core 3.1 开发网络应用程序。 我有一个 ajax 调用将一个 ConsultViewModel 对象发送到我的控制器，但在控制器中它变得空了。我不明白我的错误。我将 ajax“数据：JSON.stringify（{consultView：consultView}）”更改为“数据：JSON.stringify（consultView）”，但错误仍然存​​在。 我该如何解决这个问题？

我的代码如下：

视图模型

public class ConsultViewModel
{
    public int Id { get; set; }
    [Range(1, int.MaxValue, ErrorMessage = "Select a Department")]
    public int DepartmentId { get; set; }
    [Required]
    public string Description { get; set; }
    public string Date { get; set; }
    public IEnumerable<SelectListItem> Department { get; set; }
}

查看

@model MyApp.AppWeb.Models.ConsultViewModel;

    <h1>Edit</h1>
    <form asp-action="Edit">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <input type="hidden" asp-for="Id" />

        <div class="form-group">
            <label asp-for="DepartmentId" class="control-label"></label>
            <select asp-for="DepartmentId" asp-items="Model.Department" class="form-control"></select>
            <span asp-validation-for="DepartmentId" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Dateate" class="control-label"></label>
            <input asp-for="Date" class="form-control" disabled />
            <span asp-validation-for="Date" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Description" class="control-label"></label>
            <textarea asp-for="Description" class="form-control" cols="40" rows="5"></textarea>
            <span asp-validation-for="Description" class="text-danger"></span>
        </div>

        <div id="@Model.Id" class="form-group">
            <input type="button" class="btn btn-primary" value="Save" id="btnEdit"/>
        </div>
    </form>

脚本

@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

<script type="text/javascript">
    $(document).ready(function () {
        $('#btnEdit').click(function () {
            var id = $(this).parent()[0].id;
            var consultView = {
                Id: id,
                DepartmentId: $('#DepartmentId').val(),
                Date: $('#Date').val(),
                Description: $('#Description').val()
            };

            $.ajax({
                type: 'POST',
                url: "@Url.Action("Editar")",
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                data: JSON.stringify({consultView: consultView}), 
                success: function (data) {
                    alert(data.message);
                },
                error: function (ex) {
                    alert('Error.' + ex);
                }
            });
        });
    });
</script>

}

[HttpPost]
    //[ValidateAntiForgeryToken]
    public async Task<IActionResult> Edit(ConsultViewModel consultView)
    {
        if (ModelState.IsValid)
        {
            //More code..

            return Json(new { success = true, message = "Done." });               
        }

        return View(consultaView);
    }

谢谢！

Answer 1

我有一个 ajax 调用将一个 ConsultViewModel 对象发送到我的控制器，但在控制器中它变得空了。

你可以尝试修改代码直接将你的JavaScript对象consultView字符串化，不需要构造一个新的JavaScript对象{consultView: consultView}。

data: JSON.stringify(consultView),

此外，将[FromBody] attribute 应用于如下参数。

public async Task<IActionResult> Edit([FromBody]ConsultViewModel consultView)
{

我发送的测试数据

可以按预期绑定发布的数据