.NET Core MVC-具有前缀绑定的AJAX POST请求 [英] .NET Core MVC - AJAX POST Request with prefix binding

问题描述

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

I would like to post a request via AJAX to a Controller with a model prefix. I need a prefix as I have two forms on one page with similiar model properties ("asp-for" is generating similiar IDs and Names). I'm using .NET Core 3.1.

请求帖子没有前缀也可以正常工作.当我使用下面的示例中的前缀时，在Controller中传递的模型为null:

Request post works fine without a prefix. When I'm using a prefix like in the example below, passed model is null in Controller:

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

带有前缀的视图

在我的视图中，我还设置了HTMLFieldPrefix:

View with prefix

In my View I set the HTMLFieldPrefix as well:

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

UPDATE

If I remove the prefix from keys of my objects, then it works, though more like a work around (Model binding starts by looking through the sources for the key ShipmentAddress.ID. If that isn't found, it looks for ID without a prefix.):

    // 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;

推荐答案

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

For Asp.Net Core, there are two ways to bind the model, ModelBinding and JsonInputFormatter. For sending request with json, it will use JsonInputFormatter. Bind will not work with JsonInputFormatter.

这是一个工作示例，如下所示:

Here is a working demo like below:

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:

2.Controller:

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

3.结果:

这篇关于.NET Core MVC-具有前缀绑定的AJAX POST请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！