.NET Core MVC - 带有前缀绑定的 AJAX POST 请求

Question

我想通过 AJAX 将请求发布到带有模型前缀的控制器。我需要一个前缀，因为我在一个页面上有两个具有类似模型属性的表单（“asp-for”正在生成类似的 ID 和名称）。我正在使用 .NET Core 3.1。

请求帖子无需前缀即可正常工作。当我使用下面示例中的前缀时，控制器中传递的模型为空：

带前缀的控制器

    [HttpPost]
    public async Task<IActionResult> Save([Bind(Prefix="ShipmentAddress"), FromBody]ShipToAddressViewModel model)
    {
        // model is null
        ...
        return PartialView(ShipmentAdressFormView, model);
    }

带前缀查看

在我的视图中，我也设置了 HTMLFieldPrefix：

@model ShipToAddressViewModel
@{
    ViewContext.ViewData.TemplateInfo.HtmlFieldPrefix = "ShipmentAddress";
}
...
$("body").on('submit','#formShipmentAddress', function (e) {

    // Getting the data (see passed JSON below)
    var formData = new FormData(<HTMLFormElement>document.getElementById('formShipmentAddress'));
    var object = {};
    formData.forEach(function (value, key) {
        object[key] = value;
    });
    var data = object;

    $.ajax({
        type: "POST",
        url: url,
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        success: (data) => {
            success(data);
        }
    });
});

传递带有前缀的 JSON 负载

{"ShipmentAddress.ID":"3","ShipmentAddress.Name":"Eddard Stark","ShipmentAddress.Name2":"c/o Ned",..."}

型号

public class ShipToAddressViewModel
{
    public int ID { get; set; }

    [Display(Name="Name")]
    public string Name { get; set; }

    [Display(Name = "Name 2")]
    public string Name2 { get; set; }
    ...
}

更新

如果我从对象的键中删除前缀，那么它就可以工作，尽管更像是一种变通方法（模型绑定首先查看键 ShipmentAddress.ID 的源。如果找不到，它会寻找没有前缀的ID。）：

    // Getting the data (see passed JSON below)
    var formData = new FormData(<HTMLFormElement>document.getElementById('formShipmentAddress'));
    var object = {};
    formData.forEach(function (value, key) {
        object[key.replace("ShipmentAddress.","")] = value;
    });
    var data = object;

Answer 1

对于Asp.Net Core，绑定模型有两种方式，ModelBinding和JsonInputFormatter。对于使用 json 发送请求，它将使用 JsonInputFormatter。 Bind 不适用于 JsonInputFormatter。

这是一个如下所示的工作演示：

1.查看：

@{
    ViewContext.ViewData.TemplateInfo.HtmlFieldPrefix = "ShipmentAddress";
}

@model ShipToAddressViewModel
<form id="formShipmentAddress">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="ID" class="control-label"></label>
        <input class="form-control" asp-for="ID">
        <span asp-validation-for="ID" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Name" class="control-label"></label>
        <input class="form-control" asp-for="Name">
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Name2" class="control-label"></label>
        <input class="form-control" asp-for="Name2">
        <span asp-validation-for="Name2" class="text-danger"></span>
    </div>
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>
@section Scripts
{
<script>
    $("body").on('submit', '#formShipmentAddress', function (e) {
        e.preventDefault();            
        var id = parseInt($("#ShipmentAddress_ID").val());
        var name = $("#ShipmentAddress_Name").val();
        var name2 = $("#ShipmentAddress_Name2").val();
        var data = {
            ID: id,
            Name: name,
            Name2: name2
        };
        $.ajax({
            type: "POST",
            url: "/Home/Save",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            success: (data) => {
                success(data);
            }
            });
    });
</script>
}

2.控制器：

public async Task<IActionResult> Save([FromBody]ShipToAddressViewModel model)
{
    //do your stuff...
}

3.结果：