Не может передавать данные из javascript в функцию модели в Razor Pages

Я пытаюсь передать элемент ввода методу OnPost в моем проекте Razor Pages, но метод никогда не используется.

это моя форма

                                <p style = "text-align: left; font-size: 12px;">Podstawowe dane</p>
                            <p><input type = "text" class = "form-control" placeholder = "Imię" name = "name" /></p>
                            <p> <input type = "text" class = "form-control" placeholder = "Nazwisko" name = "surname" /></p>
                            <p><input type = "text" class = "form-control" placeholder = "Telefon" name = "mobile" /></p>
                            <button type = "submit" class = "" style = "" asp-page-handler = "UpdatePersonalData">Dalej</button>
                            <input id = "btnWork" type = "submit" value = "Work" onclick = "writeLog(name,surname,mobile);" />

Это моя функция:

    <script>
    function writeLog(name, surname, mobile) {
        fetch(`?handler=UpdatePersonalData&name=${name}&surname=${surname}&mobile=${mobile}`);
    }
</script>

Это моя модельная функция:

        }
    public async Task<IActionResult> OnPostUpdatePersonalData(string name, string surname, string mobile)
    {
        var user = await UserManager.GetUserAsync(User);
        _AccountModel.UserId = user.Id;
        _AccountModel.Mail = user.Email;
        await _accountRepository.UpdatePersonalData(_AccountModel, name, surname, mobile);
        return RedirectToPage("/Account/DataForm/CompanyData");
    }

Если поможете буду признателен

##ОБНОВИТЬ

После разговора с пользователем в stackoverflow

это целое

https://pastebin.com/WxCihCWM

Сначала я думал, что могу сделать несколько почтовых запросов, например, со статической формой, но, насколько я вижу, мне нужно обновить его сразу.

javascript asp.net asp.net-core razor-pages

29.09.2022 11:29

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

117

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

https://learn.microsoft.com/en-us/aspnet/core/security/anti-request-forgery?view=aspnetcore-6.0#javascript-1

Попробуй это:


@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Antiforgery
@{
    var requestToken = Antiforgery.GetAndStoreTokens(HttpContext).RequestToken;
}

<p style = "text-align: left; font-size: 12px;">Podstawowe dane</p>
<p><input id = "name" type = "text" class = "form-control" placeholder = "Imię" name = "name" /></p>
<p><input id = "surname" type = "text" class = "form-control" placeholder = "Nazwisko" name = "surname" /></p>
<p><input id = "mobile" type = "text" class = "form-control" placeholder = "Telefon" name = "mobile" /></p>
<input id = "btnWork" type = "submit" value = "Work" onclick = "writeLog()" />

<input id = "RequestVerificationToken" type = "hidden" value = "@requestToken" />

@section Scripts {
    <script>
        function writeLog() {
            const name = document.getElementById('name').value;
            const surname = document.getElementById('surname').value;
            const mobile = document.getElementById('mobile').value;

            const url = `?handler=UpdatePersonalData&name=${name}&surname=${surname}&mobile=${mobile}`;
                        
            fetch(url, {
                method: 'POST',
                headers: {
                    RequestVerificationToken:
                        document.getElementById('RequestVerificationToken').value
                }
            });
        }
    </script>
}

localhost: 7110/Account/… На самом деле он улавливает значение, но функция модели никогда не срабатывает.

— 29.09.2022 11:39

OnPostUpdatePersonalData будет обработан только запросом POST.

— 29.09.2022 11:43

Как я могу передвигаться с этим? Просто хочу передать данные из JS в функцию модели

— 29.09.2022 11:44

Вы пробовали код, который я написал выше?

— 29.09.2022 11:45

Да, именно поэтому я отправляю вам строку с «localhost», чтобы вы могли видеть, что она получает значения из ввода, но функция модели не отвечает.. :/

— 29.09.2022 11:47

Посмотрите здесь: pastebin.com/hFp8V72m ЭТО РАБОТАЕТ, НО Я ПЕРЕДАЮ ЗНАЧЕНИЯ СТАТИЧЕСКИ. Я хочу передать значение пользовательского ввода.

— 29.09.2022 11:49

Давайте продолжим обсуждение в чате.

— 29.09.2022 12:14

29.09.2022 11:34

Вы можете попробовать использовать следующий код, при нажатии кнопки «Работа» функция js writeLog() вызовет обработчик OnPostUpdatePersonalData:

вид (нажатие <input type = "button"/> не отправит форму):

<form method = "post" id = "myForm">
    <p style = "text-align: left; font-size: 12px;">Podstawowe dane</p>
    <p><input type = "text" class = "form-control" placeholder = "Imię" name = "name" /></p>
    <p> <input type = "text" class = "form-control" placeholder = "Nazwisko" name = "surname" /></p>
    <p><input type = "text" class = "form-control" placeholder = "Telefon" name = "mobile" /></p>
    <button type = "submit" class = "" style = "" asp-page-handler = "UpdatePersonalData">Dalej</button>
    <input id = "btnWork" type = "button" value = "Work" onclick = "writeLog()" />
</form>

js:

function writeLog() {
            $.ajax({
                type: "POST",
                url: "?handler=UpdatePersonalData",
                data: $("#myForm").serialize(),
                headers: { "RequestVerificationToken": $('input[name = "__RequestVerificationToken"]').val() },
                success: function(data) {

                }
            });

        }

результат:

Привет! Эта работа. Но... Это 5-шаговая форма, и после того, как я поместил что-то в другую <form>, моя 5-шаговая форма сломалась..:/ Нужно ли мне перестраивать всю форму, чтобы поместить все переменные из 2-х шагов в 1 запрос?

— 29.09.2022 12:27

29.09.2022 12:18