C# Razor Pages 在 AJAX 中发送复选框值

Question

我有一个模型类：

public class DataModel
{   
    public bool Display { get; set; }
}

我在将 FormData 对象反序列化为 JSON 对象后从复选框中发布值，如下所示：

this.FormToJSON = form => {
    const json = {};

    new FormData(form).forEach((value, key) => {
      // Ignore the Anti-Forgery Token
      if (key !== "__RequestVerificationToken") {
        json[key] = value;
      }
    });

    return json;
}

页面上的处理程序如下所示：

public IActionResult OnPostSave([FromBody] DataModel model)
{
    // Do some stuff
}

Display 属性绑定到复选框类型的输入，因此当它的“true”值试图在页面处理程序中反序列化时，这显然失败了，我的模型参数最终为空。

这个的修复会很简单，而不是：

json[key] = value;

我可以写

json[key] = JSON.parse(value);

唯一的问题是，如果我提交一个值为“true”的文本字段，它会被转换为布尔值，这显然不是我想要的。

有更好的方法吗？我希望能够在 AJAX 中完成所有调用，因为我想在前端处理响应，即如果失败，显示对话框等（不想使用 jquery）

Answer 1

C# Razor Pages 在 AJAX 中发送复选框值

你想用

data: $('#idForm').serialize(),

吗？

@Html.AntiForgeryToken()
<form id="idForm"> 
 <input asp-for="Display"  />
         
 <input type="submit" value="submit" id="sub" />
</form>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {    
        // this is the id of the form
        $("#idForm").submit(function (e) {
           e.preventDefault(); // avoid to execute the actual submit of the form.

           
            $.ajax({
                type: "POST",
                url: "/checkboxvalue?handler=Save",
                data: $('#idForm').serialize(),
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
               
                success: function (data) {
                    alert("success"); // show response 
                },
                failure: function (response) {
                    alert(response);
                }
            });

        });
        });
</script>

并删除

[FromBody]

public IActionResult OnPostSave(DataModel model)
{
    // Do some stuff
}

在页面模型中添加以下内容：

 public bool Display { get; set; }

Answer 2

我得到这个工作！

我现在正在将表单转换成这样的请求

fetch(pageHandlerURL, {
  method: "POST",
  body: new URLSearchParams(new FormData(formElement))
}).then(response => {
  // handle response
});

在我的页面处理程序上，它已稍微更改为这个

public IActionResult OnPostSave([FromForm] DataModel model)
{
    // Do some stuff
}