从 AJAX post 访问 C# 控制器中的表单数据

Question

我正在使用 AJAX 将表单数据发送到 C# 控制器，但是我不知道如何访问控制器内的数据。我试图将表单数据作为 Person 对象传递到控制器中，但我只是返回 system.Models.Person。我是 C# 新手，因此我们将不胜感激，非常感谢。

Javascript

$('#myForm').submit(function(e){
    e.preventDefault();
    const formData = new FormData(e.target);
    $.ajax({
        url: '/Home/GetFormData',
        type: 'POST',
        data: {formData: formData},
        success: function(resultData){
            console.log(resultData)
        },
        error: function(){
            //do something else
        }
    })
}

型号

public class Person 
{
    public string name { get; set; }
    public string age { get; set; }
}

控制器

public string GetFormData(Person formData)
{
    string name = formData.name.ToString();

    return name;

}

Answer 1

下面的帖子会对你有帮助

在 ASP.NET MVC 中使用 jQuery 发布数据

你的代码应该是

模型类Person.cs

 public class Person
{
    public string name { get; set; }
    public string age { get; set; }
}

用于获取表单数据的 jQuery 函数，我假设您的表单上有提交按钮

 $(document).ready(function () {
    $("#btnSave").click(function () { //Your Submit button
        $.ajax(
            {
                type: "POST", //HTTP POST Method
                url: "Home/GetFormData", // Controller/View 
                data: { //Passing data
                    name: $("#txtname").val(), //Reading text box values using Jquery 
                    age: $("#txtage").val(),
                }

            });

    });
});

你的 HomeController 方法

 [HttpPost]
    public ActionResult GetFormData(Person obj)
    {
        string name = obj.name;
        string age = obj.age;
        //Once you have data here then you can pass anywhere i.e. database or some other method

        return View();
    }

在控制器中形成值

如果需要任何说明，请告诉我。

Answer 2

如果要发送表单值，请使用序列化：

$form = $(this).serialize();

如果您要发送文件进行上传等，请使用 FormData。

在数据声明中，按原样设置（不将其声明为文字 JS 对象）

data: $form

最终代码如下所示：

$('#myForm').submit(function(e){
e.preventDefault();
$form = $(this).serialize();
$.ajax({
    url: '/Home/GetFormData',
    type: 'POST',
    data: $form,
    success: function(resultData){
        console.log(resultData)
    },
    error: function(){
        //do something else
    }
})

Answer 3

如果设置不起作用

数据类型：'json'， contentType: 'application/x-www-form-urlencoded;字符集=UTF-8'