如何在 C# 中将纯 html 表单链接到控制器答案

【问题标题】：How do I link pure html form to controller in C#如何在 C# 中将纯 html 表单链接到控制器
【发布时间】：2016-07-24 08:03:06
【问题描述】：

关于如何将纯 html 链接到 mvc 4 控制器，我已经搜索了很长时间，但结果是空的。我不确定自己做错了什么，尽管我知道我的代码中会有很多错误，因为我是新手。

我有一个简单的网页，我试图链接到一个控制器，但是当我点击提交时出现错误。我也在使用 Bootstrap（在这个例子中没有真正使用，但链接在那里），但我确信这不是这个错误的来源，它是服务器端的。我得到的错误是

0x800a1391 - JavaScript runtime error: 'Button1_Click' is undefined

HTML 页面实际上是一个 aspx，因为我想通过 java 轻松转换小型网站。

这是示例页面（它已被多次编辑，使用不同的按钮提交）：

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>arrggghh</title>
    <meta name="generator" content="Bootply" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/css/styles.css" rel="stylesheet">

    <!--[if lt IE 9]>
        <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>
<body>
    <div id="wrapper">
        <div class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">Page</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="index.html">Home</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right"></ul>
                </div><!--/.nav-collapse -->
            </div>
        </div>


        <div id="header">

        </div>
        <div class="content-form-blank2">


            <div>

                <table class="margin">
                    <tr>
                        <td><h4>Press button.</h4></td>
                    </tr>
                </table>
            </div>

           <form id="myform" action="Home" method="post">
                <input type="submit" onclick="Button1_Click" />
           </form>


                </div>


          </div>

            <div class="form-navigation-bottom">

            </div>


    <!-- /.container -->
    <!-- script references -->
    <script   src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
</body>
</html>

这是我的示例控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using arrgg.code;

namespace arrgg.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        protected void Button1_Click()
        {           
            new arrggOut();
        }
    }
}

这个错误并不像我理解如何将纯 html 链接到控制器那么重要。在此先感谢...如果有人有时间写一本关于我做错的一切的书。

我将很快开始使用帮助程序并阅读有关 asp.net 和 MVC 的更多信息

【问题讨论】：

标签： c# html asp.net-mvc-4

【解决方案1】：

您需要从表单提交发布到正确的路线，例如/首页/做某事。然后，在您的控制器中，如果已建立路由，您将被映射到 Home 控制器中的 DoSomething 方法。不要把它写成 Button1_Click()。当您单击该按钮时，它应该简单地提交带有适当 URL 作为其操作的表单，除非您需要在提交之前执行某些操作，例如客户端验证。然后，控制器可以处理它并用它做一些有意义的事情，由方法名称描述。

查看：

<form id="myform" action="/Home/DoSomething" method="post">
    <input type="submit" />
</form>

控制器：

namespace arrgg.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult DoSomething()
        {
            // Or whatever you require here...
            return View();
        }
    }
}

【讨论】：

感谢您的回答，虽然我记得 c# 解析控制器名称（例如 'name%'），但我以为我在输入控制器名称然后操作时做错了。我一直在更改它，因为我的电脑出现了不同的错误，需要重置。

【解决方案2】：

Button1_Click 是 JavaScript 事件。从此事件调用控制器操作。
将此文本添加到 html 底部：

<script>
    function Button1_Click() {
        $.post('/Home/Button1_Click', {}, function(res) {
        });
    }
</script>

为了避免 JavaScript 改变 html。而不是：

       <form id="myform" action="Home" method="post">
            <input type="submit" onclick="Button1_Click" />
       </form>

写：

       <form id="myform" action="/Home/Button1_Click" method="post">
            <input type="submit" />
       </form>

并更改控制器操作。它必须是公开的并返回 ActionResult：

    [HttpPost]
    public ActionResult Button1_Click()
    {           
        return RedirectToAction("/Home/Index");
    }

【讨论】：

谢谢，但我只想用 html 和我的控制器来做
添加了如何在没有 javascript 的情况下调用控制器操作的代码
出现奇怪的 404 错误.. 叹息，我的 IDE 偶尔会遇到问题，必须重置，稍后会更新。
嗯。旧的 mvc 不支持路径中的 '~'。更新答案
不应将 Button1_Click 作为控制器方法的名称。它应该对所需的操作有意义。