How to link the pure form html to the controller in C #

advertisements

I have searched for quite some time on how to link pure html to mvc 4 controllers and came up empty. I am unsure of what I'm doing wrong, though I know there will be many errors in my code since I'm new to this.

I have a simple web page that I'm trying to link to a controller but I'm getting an error when ever I hit submit. I'm also using Bootstrap (not really used in this example but the links are there), but I'm sure that's not the source of this error and that it's server side. The error I'm getting is

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

The HTML page is actually an aspx because I wanted to do easy conversions of small websites over from java.

Here is the example page (It's been edited many times with different variations of buttons to submit):

<%@ 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>

And this is my example controller:

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();
        }
    }
}

The error isn't as important as me understanding how to link pure html to the controller. Thanks in advance... if anyone has the required time to write a book about everything I'm doing wrong.

I will soon start using helpers and reading up more about asp.net and MVC


You need to post from your form submission to the correct route e.g. /Home/DoSomething. Then, in your controller, provided the route has been established, you will be mapped through to the DoSomething method in your Home controller. Do not write it as Button1_Click(). When you click that button, it should simply submit the form with the appropriate URL as its action, unless you need to do something prior to submission e.g. client side validation. Then, the controller can handle it and do something meaningful with it, described by the method name.

View:

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

Controller:

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

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

Further info: http://www.asp.net/mvc/overview/older-versions-1/controllers-and-routing/creating-an-action-cs