2. Create A Form With Basic HTML

Goal

Create a basic HTML form that collects name and email and submits it via POST. This step introduces fundamental form handling in an ASP.NET Core MVC web application without using advanced features like model binding or validation.

Learning Objectives

By the end of this exercise, you will:

Understand how to create an HTML form with basic input fields.
Learn how to submit form data using an HTTP POST request.
Implement a controller to handle form display and submission.
Display submitted data in the application console.

Step-by-Step Instructions

Step 1: Create a Controller

Navigate to the Controllers folder and create a new file named NewsletterController.cs.
Add action methods to display the form and handle form submission.

File: Controllers/NewsletterController.cs

using Microsoft.AspNetCore.Mvc;

namespace CloudSoft.Controllers;

public class NewsletterController : Controller
{

    // GET: /Newsletter/Subscribe
    public IActionResult Subscribe()
    {
        return View();
    }

    // POST: /Newsletter/Subscribe
    [HttpPost]
    public IActionResult Subscribe(string name, string email)
    {
        // Add subscription logic here
        // ...

        // Write to the console
        Console.WriteLine($"New subscription - Name: {name} Email: {email}");
        
        // Send a message to the user
        return Content($"Thank you {name} for subscribing to our newsletter!");
    }
}

💡 Information
The ”Get” Subscribe() method renders the page with the form.
The ”Post" Subscribe() method handles the form submission and returns a simple message.

Step 2: Create the Form View

Navigate to the Views/Newsletter/ folder.
Create a new file named Subscribe.cshtml.
Add the following HTML code for the form:

File: Views/Newsletter/Subscribe.cshtml

@{
    ViewData["Title"] = "Sign up for our newsletter";
}

<h2>Signup up for our newsletter</h2>

<form action="/Newsletter/Subscribe" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <button type="submit">Sign Up</button>
</form>

💡 Information
This form submits data to /Newsletter/Signup via HTTP POST.
When the form is submitted, the following data is sent back to the server via POST:
name: The user’s entered name.
email: The user’s entered email address.
It is the name attribute (name=“email”) in the form input field that is sent back to the server. The id attribute is used within the browser page for linking labels to input fields.

Final Tests

Step 1: Run the Application

Start the application:

dotnet run

Then open the browser and navigate to:

http://localhost:<PORT>/Newsletter/Subscribe

Change the port to what you have

✅ Expected Result

You should see your form page

Step 2: Fill Out and Submit the Form

Enter a name and an incorrect email (without @)
Click Sign Up.
Enter a name and a correct email
Click Sign Up