Razor form example in ASP.NET Core MVC

Complete Razor form example in ASP.NET Core MVC demonstrating all major form elements:

How to Create Form Element in Razor Form

Type Element Used

Textbox <input asp-for="Name" />

Radio Button <input type="radio" asp-for="Gender" />

Checkbox <input type="checkbox" asp-for="IsSubscribed" />

ListBox <select multiple asp-for="SelectedSkills" />

DropdownList <select asp-for="SelectedCountry" /> 

Create Registration Form using Razor Form Elements:

Create Model: UserFormModel.cs

public class UserFormModel

{

    public string Name { get; set; }

    public string Gender { get; set; }

    public bool IsSubscribed { get; set; }

    public List<string> SelectedSkills { get; set; }

    public string SelectedCountry { get; set; }

    public List<string> Countries { get; set; }

    public List<string> Skills { get; set; }

}

Create Controller: FormController.cs

using Microsoft.AspNetCore.Mvc;

public class FormController : Controller

{

    public IActionResult Index()

    {

        var model = new UserFormModel

        {

            Countries = new List<string> { "India", "USA", "UK", "Canada" },

            Skills = new List<string> { "C#", "Java", "Python", "JavaScript" }

        };

        return View(model);

    }

   [HttpPost]

public IActionResult Index(UserFormModel model)

{

    if (ModelState.IsValid)

    {

        // Accessing form data from the model

        string name = model.Name;

        string gender = model.Gender;

        bool isSubscribed = model.IsSubscribed;

        List<string> selectedSkills = model.SelectedSkills;

        string selectedCountry = model.SelectedCountry;

        // Example: Logging the values (use actual logging in real apps)

        Console.WriteLine("Name: " + name);

        Console.WriteLine("Gender: " + gender);

        Console.WriteLine("Subscribed: " + isSubscribed);

        Console.WriteLine("Skills: " + string.Join(", ", selectedSkills ?? new List<string>()));

        Console.WriteLine("Country: " + selectedCountry);

        ViewBag.Message = "Form submitted successfully!";

    }

Create  Index.cshtml

@model UserFormModel

@{

    ViewData["Title"] = "User Form";

}

<h2>User Registration Form</h2>

<form asp-action="Index" method="post">

    <div>

        <label>Name:</label>

        <input asp-for="Name" />

    </div>

    <div>

        <label>Gender:</label>

        <input type="radio" asp-for="Gender" name="Gender" value="Male" /> Male

        <input type="radio" asp-for="Gender" name="Gender" value="Female" /> Female

    </div>

    <div>

        <label>Subscribe to Newsletter:</label>

        <input type="checkbox" asp-for="IsSubscribed" />

    </div>

    <div>

        <label>Skills (ListBox):</label>

        <select asp-for="SelectedSkills" asp-items="@(new MultiSelectList(Model.Skills))" multiple="multiple"></select>

    </div>

    <div>

        <label>Country (Dropdown):</label>

        <select asp-for="SelectedCountry" asp-items="@(new SelectList(Model.Countries))"></select>

    </div>

    <div>

        <button type="submit">Submit</button>

    </div>

    @if (ViewBag.Message != null)

    {

        <div style="color: green">@ViewBag.Message</div>

    }

</form>