Form Submit in ASP.NET Core MVC using Tag Helpers

In previous article, we have provided a working sample to submit form in ASP.NET MVC, now in this post, we will be discussing how to submit form data and get in the controller in the ASP.NET Core MVC version.

Step 1: Create a new .NET Core MVC project in your Visual Studio, navigate to File-> New -> Project -> Select "Web" from left-pane and "ASP.NET Core Web-Application" from right-pane, then name your project and click "OK".

In the Next Step, select "Web-Application (Model View Controller)", so Visual Studio can generate basic MVC template.

Step 2: Create a Model, for example, Student.cs , which we will use in ViewModel and to bind values to form and get it in Controller.

So, in your "Models" folder, right-click, Select "Add" -> then select "Class" and use the below Student.cs class as your Model.

using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace FormSubmitInNETCore.Models
{
    public class Student
    {
        public string Name { get; set; }
        [EmailAddress] //data annotation is used
        public string Email { get; set; }
        public string Country { get; set; }

        public List<SelectListItem> Countries { get; } = new List<SelectListItem>
        {
            new SelectListItem { Value = "IN", Text = "India" }, 
            new SelectListItem { Value = "CA", Text = "Canada" },
            new SelectListItem { Value = "US", Text = "USA"  }, 
        };
    }
}

If you will notice in the above code, we are using "EmailAddress" data-annotation, which will help us in form to ask user to enter proper email. ( it will not make email required, but it will ask user to enter Email Address with proper format)

We are also creating List of select item to create Dropdown list in our View.

Step 3: Navigate to "Views" -> "Home" -> "Index.cshtml" and write the below Razor code

@model Student
@{
    ViewData["Title"] = "Home Page";
}
<br />

<form asp-controller="Home" asp-action="Index" method="post">
    <div class="row">
        <div class="col-lg-4">Name</div>
        <div class="col-lg-8">
            <input asp-for="Name" placeholder="Enter your name" autocomplete="off" class="form-control" />
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-lg-4">Email</div>
        <div class="col-lg-8">
            <input asp-for="Email" placeholder="Enter your Email" autocomplete="off" class="form-control" />
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-lg-4">Country</div>
        <div class="col-lg-8">
            <select asp-for="Country" asp-items="Model.Countries" class="form-control"></select>
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-lg-offset-4 col-lg-8">
            <button type="submit" class="btn btn-primary">Save</button>
        </div>
    </div>

</form>

In the above code, we are passing empty "Student" as ViewModel.

As you can see we are using "asp-for" tags.

<input asp-for="<Expression Name>">

The above input helper, generates HTML the id and name HTML attributes for the expression name specified in the asp-for attribute.

We are also generating Dropdown List using select tag helpers

  <select asp-for="Country" asp-items="Model.Countries" class="form-control"></select>

which converts to HTML as shown below:

<select class="form-control" id="Country" name="Country">
  <option value="IN">India</option>
  <option value="CA">Canada</option>
  <option selected="selected" value="US">USA</option>
</select>

I will explain below how "US" is selected by default.

In the "<form>", we are using "asp-controller", which help us to provide name of Controller, where we want to submit form and "asp-action" defines ActionMethod Inside that controller to post form values.

Step 4: We will navigate to "Solution Explorer" -> "Controller"  -> "HomeController.cs" and use the below code

using Microsoft.AspNetCore.Mvc;
using FormSubmitInNETCore.Models;

namespace FormSubmitInNETCore.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            Student student = new Student();
            student.Country = "US"; //Select default value as US in Dropdownn
            return View(student);
        }
        
        [HttpPost]
        public IActionResult Index(Student student)
        {
            //get all values and check
            var name = student.Name;
            var country = student.Country;
            var Email = student.Email;

            //save in database
            //code goes here
            return View(new Student());
        }
    }
}

Inside first Index ActionMethod, which we are calling initially on page load, we are selecting Default value of DropdownList using

              Student student = new Student();
            student.Country = "US"; //Select default value as US in Dropdownn
            return View(student);

and the passing empty "Student" Model to View.

In Second ActionMethod using "Student" in argument, selected values are automatically mapped to it and then we can retrieve it.

[HttpPost]
public IActionResult Index(Student student)
{
   //code here
}

Build the project and run it in browser, you will see output like below

As you can see in the image, we were able to submit form using tag helpers in .NET Core and get it in Controller.

You may also like to read:

Model Validation in ASP.NET Core MVC (With Custom validation example)

File Upload in .NET Core MVC (Single or Multiple)

Import Excel Data in SQL Server database in ASP.NET Core MVC