Не приходят данные из js fetch в asp net, почему?

Question

[password22]

Добрый вечер! Я пытаюсь разобраться в отправке POST из js в asp net, но в интернете ничего готово не нашел. Писал сам. Теперь не могу понять в чем проблема...

Я отправляю данные FormData из Js, принимаю их IFormCollection, но значения пустые

html

<div class="container">

    <h1>Регистрация на сайте</h1>

    <form action="#" method="post" id="form_UserRegistration">

        <label for="input_UserName">Имя</label>
        <input type="text" name="UserName" id="input_UserName" />

        <label for="input_UserEmail">Email</label>
        <input type="text" name="UserEmail" id="input_UserEmail" />

        <label for="input_UserAge">Возраст</label>
        <input type="number" name="UserAge" id="input_UserAge" />

        <button type="submit">Зарегистрироваться</button>

    </form>

</div>

JS

const form = document.getElementById('form_UserRegistration');

    form.addEventListener('submit', async function (e) {
        e.preventDefault();

        let response = await fetch('http://localhost:24068/home/index', {
            method: 'POST',
            body: new FormData(form),
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        });


        console.log(response.status);
        var formData = new FormData(form);
        for (var [key, value] of formData.entries()) {
            console.log(key, value);
        };

        return response.json;
    });

C#

[HttpPost]
        public async Task<JsonResult> Index(IFormCollection form)
        {
            return Json(new { name = form["UserName"], email = form["UserEmail"], age = form["UserAge"] });
        }

Я отслеживал на протяжении всего кода места, где теряются данные. В js все нормально, но вот когда приходит ответ, то там все значения пусты. В бд все поля записываются как null

Буду рад любой помощи, заранее спасибо

Answer 1

[password22]

Все работает, вот так:

HTML

<div class="container">

    <h1>Регистрация на сайте</h1>

    <form action="#" method="post" id="form_UserRegistration">

        <label for="input_UserName">Имя</label>
        <input type="text" name="UserName" id="input_UserName" />

        <label for="input_UserEmail">Email</label>
        <input type="text" name="UserEmail" id="input_UserEmail" />

        <label for="input_UserAge">Возраст</label>
        <input type="number" name="UserAge" id="input_UserAge" />

        <button type="submit">Зарегистрироваться</button>

    </form>

</div>

JS

<script>

    const form = document.getElementById('form_UserRegistration');

    fetch('http://localhost:24068/home/index', {
        method: 'POST',
        body: JSON.stringify(Object.fromEntries(new FormData(form)))
    }).then(function (response) {
        // Стоит проверить код ответа.
        if (!response.ok) {
            // Сервер вернул код ответа за границами диапазона [200, 299]
            return Promise.reject(new Error(
                'Response failed: ' + response.status + ' (' + response.statusText + ')'
            ));
        }

        // Далее будем использовать только JSON из тела ответа.
        return response.json();
    }).then(function (data) {
        console.log(data);
    }).catch(function (error) {
        console.log(error);
    });

</script>

C# asp.net mvc

[HttpPost]
        public async Task<IActionResult> Index(IFormCollection form)
        {
            var createSql = @"INSERT INTO UsersTable (UserName, UserEmail, Age) VALUES (@UserName, @UserEmail, @Age)";

            var usersSql = @"SELECT * FROM UsersTable";

            using (var connection = new SqlConnection(CONNECTION_STRING))
            {
                var usersCreate = await connection.QueryAsync<UserModel>(createSql, new { @UserName = form["UserName"], @UserEmail = form["UserEmail"], @Age = form["UserAge"] });
                var usersTable = await connection.QueryAsync<UserModel>(usersSql);
                return View(usersTable);
            }
        }

Answer 2

[SANTA2112]

body:

JSON.stringify(Object.fromEntries(new FormData(form)))

Comments

[password22]

так же пусто
{"name":[],"email":[],"age":[]}