asp.net mvc - How can I send multiple data to the Controller with Vue js in .NET 5

Question

This is my Controller

    [HttpPost]
    public JsonResult Kaydet([FromBody] int Id, string FirstName, string LastName, string Address)
    {
        return Json(new { status = 0 });
    }

This is my View

   fetch('/Student/Kaydet', {
         method: 'post',
         headers: {
                 'Content-Type': 'application/json'
         },
         body: { "Id": 1, "FirstName": 'a', LastName: 'b', Address: 'c' }
    })

Status Code = 200,but Controller is null

question from:https://stackoverflow.com/questions/65933354/how-can-i-send-multiple-data-to-the-controller-with-vue-js-in-net-5

Answer 1

You need to define a model to get the data from the request body. The [FromBody] attribute can only be used once in an action.

Model:

public class ViewModel
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Address { get; set; }
}

View:

fetch('/Home/Kaydet', {
    method: 'post',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ "Id": 1, "FirstName": 'a', "LastName": 'b', "Address": 'c' })
})

Controller:

[HttpPost]
public JsonResult Kaydet([FromBody]ViewModel viewModel)
{
    return Json(new { status = 0 });
}