简体   繁体   English

如何在 ASP.NET Core MVC 中获取按钮单击的值?

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

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我已经设置了四个带有标签asp-action按钮,期望它允许我实现一个带有名称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编辑:我尝试按照本教程

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.当我们从视图访问数据到控制器的动作方法时,我们可以使用 Parameter 方法来获取表单值,通过使用该方法,输入字段Name和参数Name应该是相同的。 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).因此,如果您想获取按钮值,它应该具有相同的 Name 值(但在您的示例代码中,只有第一个按钮具有 name 属性)。

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.其次,当我们使用<button>标签时,它会隐式提交表单,但是如果我们为<button>标签添加“type='button'”,按钮将不会提交表单,因此action方法不会被执行. To solve this issue, you could remove the type="button" or change it to type="submit" .要解决此问题,您可以删除type="button"或将其更改为type="submit"

So, you could modify your code as below (use the same name value and remove the type="button" ):因此,您可以按如下方式修改代码(使用相同的名称值并删除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:然后,结果是这样的:

在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM