Using Hidden fields in ASP.NET CORE

Hidden fields are controls which are used to store data on the page (View) without displaying it to end-users.
Let’s Create Some Hidden Fields and read the values.
For showing demo we are going to create a Product model in Models with 3 Properties in it.

Creating Model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication2.Models
{
    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public double ProductPrice { get; set; }
    }
}

Next, am I going to add a New Controller with name Demo8 and 2 ActionMethod with name Create one for handling GET request and another for handling POST Request ActionMethod.

Creating Demo8 Controller

using Microsoft.AspNetCore.Mvc;
using WebApplication2.Models;

namespace WebApplication2.Controllers
{
    public class Demo8Controller : Controller
    {
        [HttpGet]
        public IActionResult Create()
        {
            Product Product = new Product()
            {
                ProductId = 1,
                ProductName = "Laptop",
                ProductPrice = 5000.00
            };

            return View(Product);
        }

        [HttpPost]
        public IActionResult Create(Product Product)
        {
            return View();
        }
    }
}

Next, we are going to Add Create View to take input of ProductName and ProductPrice and productid will be hidden field in this form.

<input asp-for="ProductId? type="hidden"/>
@model WebApplication2.Models.Product
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Create</title>
</head>
<body>
<h4>Product</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <input asp-for="ProductId"  type="hidden"/>
                <label asp-for="ProductName" class="control-label"></label>
                <input asp-for="ProductName" class="form-control" />
                <span asp-validation-for="ProductName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ProductPrice" class="control-label"></label>
                <input asp-for="ProductPrice" class="form-control" />
                <span asp-validation-for="ProductPrice" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>
<div>
    <a asp-action="Index">Back to List</a>
</div>
</body>
</html>

After creating the view next we are going to run an application to see how to form view looks like.
If you see the form, we have only 2 input fields on form ProductName and ProductPrice and product id are hidden.
The hidden field which is generated.

Now we are going to post forms with values and see do we get hidden field productid value in the model.

Yes, we got hidden field value when we have posted a form that’s useful control to hide data from end-users.

By Saineshwar Bageri

I am Microsoft MVP | C# Corner MVP | Code Project MVP | FULL STACK .NET Developer and working on .Net Web Technology (Asp.net, Asp.net Core,.Net Core, C#, Sqlserver, MVC, Windows, Console Application, javascript, jquery, json, ORM Dapper) and also a freelance developer.