Post Form Value on Submit Click from Entity Framework Identity Scaffolded Razor Page

Question

In my .cshtml file I have a form which works fine for my MVC pages:

            <form action="@Url.Action("SaveUserEntryAsync", "ConfirmEmail")" method="post">
                <label class="modal-body1 col-form-label" id="confirmEmailPageComingSoonModalFormLabel">Modal Error!3</label>
                <br />
                <textarea class="form-control" name="newsfeedUserEntry" id="newsfeedUserEntry" type="text"></textarea>
                <div class="modal-footer">
                    <button type="submit" id="ComingSoonModalFooterSubmitButton" class="btn btn-success" data-dismiss="confirmEmailPageComingSoonModal">@_loc[Model.Submit]</button>
                </div>
            </form>

In my scaffolded cshtml.cs file I have a public async Task<IActionResult> SaveUserEntryAsync(string newsfeedUserEntry) method.

<form action="@Url.Action("SaveUserEntryAsync", "ConfirmEmail")" method="post"> does not work with the Razor page and I cannot find the correct syntax so that my button works on the page. Any help would be appreciated?

Answer 1

For Razor Pages, it uses razor pages and page handler. @Url.Action() targets to MVC controller and action. You could use @Url.Page(string pageName, string pageHandler). Asume you have a ConfirmEmail.cshtml and ConfirmEmail.cshtml.cs:

<form  method="post" action="@Url.Page("ConfirmEmail", "SaveUserEntry")" >
    @Html.AntiForgeryToken()   
    <label class="modal-body1 col-form-label" id="confirmEmailPageComingSoonModalFormLabel">Modal Error!3</label>
    <br />
    <textarea class="form-control" name="newsfeedUserEntry" id="newsfeedUserEntry" type="text"></textarea>
    <div class="modal-footer">
        <button type="submit" id="ComingSoonModalFooterSubmitButton" class="btn btn-success" data-dismiss="confirmEmailPageComingSoonModal">aaa</button>
    </div>
</form>

Or you could use asp-page and asp-page-handler like below:

<form asp-page="ConfirmEmail" asp-page-handler="SaveUserEntry" method="post">
    <label class="modal-body1 col-form-label" id="confirmEmailPageComingSoonModalFormLabel">Modal Error!3</label>
    <br />
    <textarea class="form-control" name="newsfeedUserEntry" id="newsfeedUserEntry" type="text"></textarea>
    <div class="modal-footer">
        <button type="submit" id="ComingSoonModalFooterSubmitButton" class="btn btn-success" data-dismiss="confirmEmailPageComingSoonModal">aaa</button>
    </div>
</form>

Note: No need to add Async suffix in request url.

For the handler, it shoud be OnPostXXX(XXX should be the handler name):

public class ConfirmEmailModel : PageModel
{
    public void OnGet()
    {
    }
    
    public async Task<IActionResult> OnPostSaveUserEntryAsync(string newsfeedUserEntry)
    {
        return Page();
    }
}

Reference:

https://learn.microsoft.com/en-us/aspnet/core/razor-pages/?view=aspnetcore-5.0&tabs=visual-studio#multiple-handlers-per-page