How does one get the value of a button click in ASP.NET Core MVC?

Question

I am trying to understand how the connection between a controller and a view works. I have set up four buttons with the tag asp-action expecting it to allow me to implement a method with the name check

<table style="width: 100%; margin-bottom: 25px">
    <tr>
        <td>
            <button name="button" style="background-color: transparent; color: yellow" 
                    type="button" value="cph" asp-action="check">København</button>
        </td>
        <td>
            <button style="background-color: transparent; color: yellow" type="button" value="odense" asp-action="check">Odense</button>
        </td>
        <td>
            <button style="background-color: transparent; color: yellow" type="button" value="aarhus" asp-action="check">Århus</button>
        </td>
        <td>
            <button style="background-color: transparent; color: yellow" type="button" value="aalborg" asp-action="check">Aalborg</button>
        </td>
    </tr>
</table>

I tried to print the value of the button

public IActionResult check(string button)
{
    Console.WriteLine(button);
    return View();
}

However, it does never print anything, nor does it break on the method. What I would like to achieve is just the value. I would prefer just passing the value and do nothing eg

public striing check(string button)
{
    return button;
}

EDIT: I tried following this tutorial

Answer 1

When we access data from a view to the controller's action method, we could use the Parameter method to get the form value, by using this method the input field Name and parameter Name should be the same. So, if you want to get button value, it should have the same Name value (but in your sample code, only the first button has a name attribute).

Second, when we using the <button> tag, it will implicitly submit the form, but if we add "type='button'" for the <button> tag, the button will not submit the form, so the action method not executed. To solve this issue, you could remove the type="button" or change it to type="submit" .

So, you could modify your code as below (use the same name value and remove the type="button" ):

<form>    
    <table style="width: 100%; margin-bottom: 25px">
        <tr>
            <td>
                <button name="button" style="background-color: transparent; color: yellow"
                         value="cph" asp-action="check">
                    København
                </button>
            </td>
            <td>
                <button name="button" style="background-color: transparent; color: yellow"  value="odense" asp-action="check">Odense</button>
            </td>
            <td>
                <button name="button" style="background-color: transparent; color: yellow" value="aarhus" asp-action="check">Århus</button>
            </td>
            <td>
                <button name="button" style="background-color: transparent; color: yellow" value="aalborg" asp-action="check">Aalborg</button>
            </td>
        </tr>
    </table>

</form>
<div>
    @TempData["ButtonValue"]
</div>

Code in the controller:

    public IActionResult ButtonClick()
    {
        return View();
    }
    public IActionResult check(string button)
    {
        if(!string.IsNullOrEmpty(button))
        { 
            TempData["ButtonValue"] = string.Format("{0} button clicked.", button);
        }
        else
        {
            TempData["ButtonValue"] = "No button click!";
        }
        return RedirectToAction("ButtonClick");
    }

Then, the result like this: