Site icon Tutexchange

How to Create Hidden Fields in ASP.NET Core

Saineshwar
Advertisements

Hidden fields in ASP.NET Core are used to store information on a web page without rendering it visibly to the end user.

These fields are particularly useful when you need to persist data across HTTP requests, such as user identifiers, anti-forgery tokens, or any other information you want to submit with the form but don’t want the user to see or modify directly through the UI.


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.

Hidden Field

<input asp-for="ProductId? type="hidden"/>

Create View 

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

Create Product View

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.

Learn More about Action Results :- https://tutexchange.com/action-results-in-asp-net-mvc-core/

Read More :- https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/layout/form/hidden-fields

Exit mobile version