如何将 HTML5 表单操作链接到 ASP.NET MVC 4 中的控制器 ActionResult 方法答案

【问题标题】：How to link HTML5 form action to Controller ActionResult method in ASP.NET MVC 4如何将 HTML5 表单操作链接到 ASP.NET MVC 4 中的控制器 ActionResult 方法
【发布时间】：2013-02-17 21:55:46
【问题描述】：

我有一个基本表单，我想通过调用视图关联的Controller 类中的ActionResult 方法来处理表单内的按钮。以下是表单的 HTML5 代码：

<h2>Welcome</h2>

<div>

    <h3>Login</h3>

    <form method="post" action= <!-- what goes here --> >
        Username: <input type="text" name="username" /> <br />
        Password: <input type="text" name="password" /> <br />
        <input type="submit" value="Login">
        <input type="submit" value="Create Account"/>
    </form>

</div>

<!-- more code ... -->

对应的Controller代码如下：

[HttpPost]
public ActionResult MyAction(string input, FormCollection collection)
{
    switch (input)
    {
        case "Login":
            // do some stuff...
            break;
        case "Create Account"
            // do some other stuff...
            break;
    }

    return View();
}

【问题讨论】：

标签： asp.net-mvc html asp.net-mvc-4 razor

【解决方案1】：

您使用 HTML Helper 并拥有

    @using(Html.BeginForm())
    {
        Username: <input type="text" name="username" /> <br />
        Password: <input type="text" name="password" /> <br />
        <input type="submit" value="Login">
        <input type="submit" value="Create Account"/>
    }

或使用 URL 助手

<form method="post" action="@Url.Action("MyAction", "MyController")" >

Html.BeginForm 有几个 (13) 覆盖，您可以在其中指定更多信息，例如，上传文件时的正常使用是：

@using(Html.BeginForm("myaction", "mycontroller", FormMethod.Post, new {enctype = "multipart/form-data"}))
{
    < ... >
}

如果您不指定任何参数，Html.BeginForm() 将创建一个POST 表单，该表单指向您当前的控制器和当前操作。例如，假设您有一个名为 Posts 的控制器和一个名为 Delete 的操作

public ActionResult Delete(int id)
{
   var model = db.GetPostById(id);
   return View(model);
}

[HttpPost]
public ActionResult Delete(int id)
{
    var model = db.GetPostById(id);
    if(model != null) 
        db.DeletePost(id);

    return RedirectToView("Index");
}

你的 html 页面会是这样的：

<h2>Are you sure you want to delete?</h2>
<p>The Post named <strong>@Model.Title</strong> will be deleted.</p>

@using(Html.BeginForm())
{
    <input type="submit" class="btn btn-danger" value="Delete Post"/>
    <text>or</text>
    @Url.ActionLink("go to list", "Index")
}

【讨论】：

我尝试了使用 URL 帮助程序的方法 2，但我认为我发现的语法是 MVC3 特定的，它不起作用。这一款非常适合我的需求。谢谢！
@Dylan ：因为 Html.BeginForm 行中缺少 ) 括号。
您是如何同时拥有public ActionResult Delete(int id) 和[HttpPost] public ActionResult Delete(int id) 的？两者是不是名字冲突？
感谢您提供一个非常完整的答案来解释常见的重载:)
@AlexanderMomchliov 动作结果上方的[HttpPost] 让razor 知道actionresult 是指定的post。所以它会根据调用它的方法知道取哪一个

【解决方案2】：

在这里，我基本上是在链接中包装了一个按钮。优点是您可以以相同的形式发布到不同的操作方法。

<a href="Controller/ActionMethod">
    <input type="button" value="Click Me" />
</a>

添加参数：

<a href="Controller/ActionMethod?userName=ted">
    <input type="button" value="Click Me" />
</a>

从非枚举模型中添加参数：

<a href="Controller/ActionMethod?userName=@Model.UserName">
    <input type="button" value="Click Me" />
</a>

您也可以对枚举模型执行相同操作。您只需要先引用一个实体。快乐编码！

【讨论】：