后处理程序不解析序列化表单

Question

我在互联网上阅读了很多关于处理通过 AJAX 调用传递给 POST 处理程序的表单值的教程。 他们都假设 serialized 表单被 Handler 方法解析，没有任何问题。不幸的是，就我而言，出了点问题，我无法从我的 序列化 表单中获取正确的值。

以下图片展示了 post 处理程序、用于表单和 ajax 调用的 html。

我想提一些额外的事情。 首先，根据教程，我想将表单字段封装在单独的类中，在本例中为 ResponseModel。无论如何，我无法从作为 ajax 参数传递的序列化表单中检索任何值。看起来表单是序列化的，因为我在记录 serializedForm 变量时可以看到正确的值。

当我将 response 参数的参数类型从 ResponseModel 更改为简单字符串时，字符串将传递给处理程序，我可以将该值作为字符串检索，但不能作为一个对象（这就是我所期望的）。只是无法理解为什么它在所有这些教程中都没有任何问题，而且我无法在我自己的项目中实现它。

所以我的问题 - 为什么后处理程序无法将序列化形式解析为预期的对象？

非常感谢

ResponseModel 类：

public class ResponseModel
{
    public string Status { get; set; }
    [Required]
    public string Description { get; set; }
}

输入字段的属性：

    [BindProperty]
    public ResponseModel EditedTicket { get; set; }

后处理程序：

    public async Task<JsonResult> OnPostUpdateTicket(ResponseModel response, int ticketId)
    {
        if (!ModelState.IsValid)
        {
            Debug.WriteLine("Model invalid");
        }

        return new JsonResult(new { success = true, message = "Ticket has been assigned!", errormessage = "Something went wrong, try again later" });
    }

表单 HTML：

            <form id="edit_ticket" method="post">
                <label asp-for="EditedTicket.Description">Description</label>
                <input asp-for="EditedTicket.Description" name="EditedTicket.Description" class="form-control" />
                <input id="update-ticket" type="submit" class="btn btn-success text-white" value="Update" />
            </form>

Ajax 调用：

    //Button submit
    updateTicketBtn.click(function (e) {
        e.preventDefault();
        var serializedForm = $('#edit_ticket').serialize();
        console.log('This is serialized form: ', serializedForm);

        $.ajax({
            type: "POST",
            url: "/QAView/ProjectDetails?handler=UpdateTicket",
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            dateType: 'application/json',
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',   
            data: { 'response': serializedForm, 'ticketId': ticketId }
        }).done(function (response) {
            console.log('Done!');
        })
    });

Answer 1

您可以像这样附加您的额外信息（不包含在<form> 中）：

var serializedForm = $('#edit_ticket').serialize();
serializedForm += "&ticketId=" + ticketId;
//...
//the posted data is changed to something like this:
data: serializedForm

对于模型ResponseModel，因为您通过属性EditedTicket 绑定它，所以在处理程序中不需要它，如下所示：

public async Task<JsonResult> OnPostUpdateTicket(int ticketId){
     //access the property EditedTicket here
     //...
}

如果你想通过参数绑定它，你需要这样的前缀设置：

public async Task<JsonResult> OnPostUpdateTicket([Bind(Prefix=nameof(EditedTicket))] ResponseModel response,
                                                 int ticketId){
    //...
}