cannot pass data from javascript to Model Function in Razor Pages

Question

I am trying to pass input elemenet to the OnPost method in my Razor Pages project, but method is never taken.

This is my form

                                <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);" />

This is my function:

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

This is my Model Function:

        }
    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");
    }

If you could help i will be grateful

##UPDATE

After conversation with user at stackoverflow

this is whole

https://pastebin.com/WxCihCWM

At first i thought i can do multiple post request like with static form, but as far as i can see i have to update it at once.

Dimitris Maragkos · Accepted Answer · 2022-09-29 10:19:15Z

1

fetch sends a GET request by default you need to configure it to send POST. You also need to pass the antiforgery token.

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

Try this:


@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>
}

edited Sep 29, 2022 at 10:19

answered Sep 29, 2022 at 9:34

Dimitris Maragkos

11.6k2 gold badges17 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Software Architect Over a year ago

localhost:7110/Account/… Actually it catch value but Model Function never hits.

Dimitris Maragkos Over a year ago

OnPostUpdatePersonalData will only be hit with a POST request.

Software Architect Over a year ago

How i can move around with this? Just want to pass data from JS to model function

Dimitris Maragkos Over a year ago

Did you try the code I wrote above?

Software Architect Over a year ago

Yes, thats why i send you line with 'localhost' so you can see it gets values from input, but model function not responding.. :/

|

Yiyi You · Accepted Answer · 2022-09-29 10:18:12Z

1

You can try to use the following code,when clicking the Work button,js function writeLog() will call the handler OnPostUpdatePersonalData:

view(clicking <input type="button"/> will not submit the form):

<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) {

                }
            });

        }

result:

answered Sep 29, 2022 at 10:18

Yiyi You

18.4k1 gold badge19 silver badges31 bronze badges

1 Comment

Software Architect Over a year ago

Hello! This work. But... This is 5 step form and after putting something into another <form> my 5 step form is broken.. :/ Do i have to rebuild whole form to put all variables from 2 steps into 1 request?

Collectives™ on Stack Overflow

cannot pass data from javascript to Model Function in Razor Pages

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related