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

Question

我想通过 AJAX 向带有模型前缀的 Controller 发送请求。我需要一个前缀，因为我在一页上有两个具有相似模型属性的表单(“asp-for”正在生成相似的 ID 和名称)。我正在使用 .NET Core 3.1。

请求帖子无需前缀即可正常工作。当我使用如下例所示的前缀时， Controller 中传递的模型为空:

带前缀的 Controller

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

带前缀的 View

在我的 View 中，我还设置了 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; }
    ...
}

更新

如果我从对象的键中删除前缀，那么它就可以工作，尽管更像是一种解决方法(模型绑定(bind)首先查找键 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，绑定(bind)模型有两种方式，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. Controller :

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

3.结果: