Razor Pages action from input button

Question

I'm trying to understand how Razor pages work, as well as .Net Core, by creating a small web application and I'm stuck on how to handle the button action within a form. I'm used to the MVC type of process (from when I first tried web apps 5 years ago) where the button would have a onClick action that could be accessed from the code behind but it seems like that's not the same with a Razor page (unless I'm just not seeing it). I have a basic form like this

<form method="post">
<fieldset>
<input type="text" value="" placeholder="user name"/>
<input type="password" value="" placeholder="password"/>
<input type="button" value="Submit" id="submitButton"/>
</fieldset>

So what I'm trying to achieve is when the button is pressed an action in the .cs file is called that will perform a couple different operations (like calling an API, getting a result and then depending on result route to a different page) but even if I add an "onClick" to the button I can't figure out how to hook it up to the code behind. I've seen various answers, most using models and a database but since that's not the same as what I'm doing those examples haven't helped.

Answer 1

I will try to make a simple example for you. Create a razor page and use the name "Test". The Test.cshtml file should have the following contents:

@page
@model WebApplication1.Pages.TestModel
<form method="post">
    <fieldset>
        <input asp-for="username" placeholder="user name" />
        <span asp-validation-for="username" class="text-danger"></span>

        <br />

        <input asp-for="password" type="password" placeholder="password" />
        <span asp-validation-for="password" class="text-danger"></span>

        <br />

        <input type="submit" value="Submit" id="submitButton" />
    </fieldset>
</form>

The Test.cshtml.cs should have the following contents

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WebApplication1.Pages
{
    public class TestModel : PageModel
    {
        [BindProperty]
        public string username { get; set; }

        [BindProperty]
        public string password { get; set; }

        public void OnGet()
        {
            // you can initialize the values. for example I set the username
            username = "test";
        }

        public IActionResult OnPost()
        {
            // do something with username and password

            if (string.IsNullOrEmpty(password))
            {
                ModelState.AddModelError("password", "Password is a required field.");
                return Page();
            }

            // or you can redirect to another page
            return RedirectToPage("./Index");
        }
    }
}

Tell me if you need extra explanation for this example. I hope it helps.