jquery JumajsonMapASP.NET核心模型绑定

klsxnrf1  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(78)

我有一个ASP.NET Core Web应用程序客户端,它使用Ajax JQuery将更改发布到服务器。在一个特定的页面中,我必须将一些数据附加到请求中,以便模型获得填充的附加属性值,因为数据是使用可编辑的表创建的,所以没有常规的输入字段用于此数据。然而,我找不到一种方法来格式化模型Map的json。服务器根本不Map此附加属性的值。
下面是模型(简化):

public class ProductCategoryModel {
    public ProductCategoryDto Category { get; set; } = new();
}

public class ProductCategoryDto
{
    public string Description { get; set; } = default!;
    public List<ProductSubCategoryDto> ListProductSubCategories { get; set; } = new();
}

public class ProductSubCategoryDto
{
    public Guid? Id { get; set; }
    public string Description { get; set; } = default!;
}

下面是原始的请求数据,它工作正常:

[{"name":"Model.Category.Description","value":"CATEGORY"}]

我试着添加一个这样的数组:

[{"name":"Model.Category.Description","value":"CATEGORY"},
{"name":"Model.Category.ListProductSubCategories",
 "value":[
    {"Id":null,"Description":"Nouvelle sous-catégorie"},
    {"Id":null,"Description":"Nouvelle sous-catégorie 2"}
 ]
}]

我试着像这样添加每个数组项:

[{"name":"Model.Category.Description","value":"CATEGORY"},
{"name":"Model.Category.ListProductSubCategories","value":{"Id":null,"Description":"Nouvelle sous-catégorie"}},
{"name":"Model.Category.ListProductSubCategories","value":{"Id":null,"Description":"Nouvelle sous-catégorie 2"}}]

因此,我想填充ListProductSubCategories以获取服务器端模型中的值,但我总是收到一个空列表。我怎么才能做到这一点?
Ajax调用:

function mapAssociatedToSimpleArray(obj) {
    var a3 = Object.keys(obj).map(function (k) { return obj[k]; })
    return a3;
}

var data = $("#form").serializeArray();

var listSubCategories = mapAssociatedToSimpleArray(_dataSource); // <--  _dataSource is an associated array data to be appended to the request
                
data.push({
    name: "Model.Category.ListProductSubCategories", value: listSubCategories
});
        
$.ajax({
    url: "/inv/ProductsCategoriesController/Edit/@Model.Categorie.Id",
    type: 'POST',
    dataType: 'json',
    data: data,
    headers: {'RequestVerificationToken': $(".AntiForge input").val() },
    success: function (data) {        
        // ...
    },
    error: function (xhr, ajaxOptions, thrownError) {
        if (utils.hasJsonStructure(xhr.responseText)) {
            $("#form").handleModelErrors(JSON.parse(xhr.responseText));
        }
        notifications.error();
    }            
});

控制器后操作:

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Edit(Guid id, ProductCategoryModel model)
{
    if (!ModelState.IsValid)
    {
        return ModelState.ReturnErrorsToClient(Response);
    }

    model.Category.Id = id;
    await _productsCategoriesBackend.UpdateProductCategory(model.Category);

    return new JsonResult(model.Category.Id);            
}

在控制器中,参数model.Category.ListProductSubCategories始终为空。
编辑
我应该更清楚地说明,表数据是用输入字段插入的,但是只有在需要编辑行时才显示这些字段。编辑完成后,输入数据被写入表和json数组中,输入字段被删除。因此,当需要提交表单时,表单没有可用的字段。这就是为什么我需要在提交表单时发送一个格式化的asp.net结构的表模型。

00jrzges

00jrzges1#

我找到了一个很好用的食谱。
对于action方法,我在模型参数上添加了一个显式的[FromBody]属性,因此框架使用Json输入格式化程序。
对于aplog调用,我需要添加Content-Type头,并对数据进行字符串化。

type: 'POST',
dataType: 'json',
data: JSON.stringify(data),
headers: {
    "RequestVerificationToken": $(".antiForge input").val() , 
    "Content-Type": "application/json; charset=UTF-8"
},

然后我就可以传递一个匹配模型属性的json对象,而不是试图用数据创建一个表单编码的对象。
我使用jquery.serializeToJSON插件构建了一个表单字段的漂亮对象:

var data = $('#form').serializeToJSON();
data.Category.ListProductSubCategories = _dirtyRows;

然后,我可以向这个对象添加额外的属性,以使用表的脏行数据完成模型。能够传递一个json对象比摆弄一个“x-www-form-urlencoded”对象要方便得多。
下面的文章帮助我找到了很多我的方式通过这一点:
https://learn.microsoft.com/en-us/aspnet/core/mvc/models/model-binding?view=aspnetcore-7.0
https://andrewlock.net/model-binding-json-posts-in-asp-net-core/
POST JSON fails with 415 Unsupported media type, Spring 3 mvc
https://www.jqueryscript.net/form/Serialize-Form-Data-Into-JSON-Object-In-jQuery-serializeToJSON.html

相关问题