Create or Use Hidden Fields in Asp.Net MVC with HTML Helpers Example

  Total Views : 8483
  Comments : 0
 
  Keywords : How to use hidden fields in asp.net mvc, Create hidden fields in asp.net mvc with html helpers example, HTML helpers to create hidden fields in asp.net mvc

Here we will learn how to create or use hidden fields in asp.net mvc with simple example using html helpers. Before going in-depth let's understand definition of hidden fields. The hidden fields are controls which allows us to store data or information in page without displaying it.

 

It's same hidden fields concept which we used in ASP.NET Webforms for storing data on page and it help us to maintain data even in postbacks. The hidden fields data can be read by using client script like JavaScript and JQuery.

 

There are 2 ways we can create Hidden Field in asp.net mvc with html helpers

 

  1. Basic Helper (@Html.Hidden())
  2. Strongly Typed Helper (@Html.HiddenFor())

Let’s create a simple application and learn how to use hidden fields in asp.net mvc.

Create New Asp.Net MVC Application

Let's start with creating new asp.net mvc 4 application for that Open visual studio studio à Go to File à Select New à Select Project

 

create new asp.net mvc project from visual studio 2012

 

After that you will see new dialog will pop up for selecting your Template and Project type. From Templates select Visual C# à inside that select Web and then project type select ASP.NET MVC 4 Web Application and here we are giving name as “HiddenDemo” then finally click on ok button.

 

select template to create new hidden field application in asp.net mvc

 

After naming it just click on OK now new dialog will pop up for selecting template in that Select Basic template and click ok like as shown below

 

select basic template to create new application in asp.net mvc

 

After that visual studio will create project for us based on our configuration that will be like as shown below

 

Hidden fields project structure in asp.net mvc

 

After completion of create project now let's create a Model first.

Add New Model in Application

For adding model just right click on Model folder and select Add then inside that select Class.

 

Add new model in asp.net mvc hidden fields demo

 

After selecting class a new wizard will pop up in that give name as StudentModel and click on add button. 

 

Give name to model in asp.net mvc hidden fields demo

 

After click on Add button a Model with Name StudentModel will create that will contain code like as shown below.

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace HiddenDemo.Models

{

public class StudentModel

{

 

}

}

Now we will add some properties to StudentModel model like as shown below.

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace HiddenDemo.Models

{

public class StudentModel

{

public int StudentID { get; set; }

public string StudentName { get; set; }

}

}

Now let's add A Controller with Name HomeController.

Create New Controller in Asp.Net MVC

To add controller just right click on Controller folder then select Add from list and inside that select controller like as shown below.

 

Add controller in asp.net mvc hidden fields application

 

After selecting controller a new dialog will popup with name Add Controller in that give name as "HomeController" and select template as "Empty MVC Controller" and click Add button.

 

Give name to controller in asp.net mvc hidden fields application

 

After click add button our controller will create and it will contain code like as shown below 

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace HiddenDemo.Controllers

{

public class HomeController : Controller

{

public ActionResult Index()

{

return View();

}

}

}

Now After adding Controller let's add another action method with same name (Index) it can handle our post request and will pass model (StudentModel) as parameter to it and also FormCollection to get values from view after posting request to controller. Following is code snippet of HomeController after adding new method.

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using HiddenDemo.Models;

 

namespace HiddenDemo.Controllers

{

public class HomeController : Controller

{

//

// GET: /Home/

[HttpGet]

public ActionResult Index()

{

return View();

}

[HttpPost]

public ActionResult Index(FormCollection fc, StudentModel objSM)

{

return View(objSM);

}

}

}

Now let’s add view to this controller action method.

Adding View to Application

For adding view just right click inside controller action method (Index) then select option AddView like as shown below

 

add view to controller in asp.net mvc application

 

After selecting AddView option a new wizard will popup with Name (AddView). It will have view name same name as action method inside which we right click to add View. In this example we are going to create Strongly - Typed view for that we selected this option and in Model class we selected StudentModel class

 

Give name to view and mention model calss and scaffold template in asp.net mvc hidden fields application

 

After selecting required option now finally click on Add button. After that a view will be created inside Views folder like as shown below

 

After adding view in asp.net mvc application

 

Now open our view (Index.cshtml) and check that will contain code like as shown below 

 

@model HiddenDemo.Models.StudentModel

@{

ViewBag.Title = "Index";

}

<h2>Index</h2>

After creating View now let’s add hidden fields to view. We will add hidden fields using following html helper formats

 

  1. Basic Helper (@Html.Hidden()) 
  2. Strongly typed helper  (@Html.HiddenFor())

Basic Helper (@Html.Hidden()) 

Generally basic helper will contain 2 parameters (Basic Helper) to create hidden fields.

 

  1. Hidden Field Name 
  2. Value of  Hidden Field

Declaration of hidden fields using basic helper will be like as shown below 

 

@Html.Hidden("", "")

 

@Html.Hidden("HDName", "Saineshwar")

Here name of hidden field will be "HDName" and value of hidden field will be "Saineshwar"

Strongly Typed Helper (@Html.HiddenFor())

Generally strongly typed helper will contain 2 parameters like as show below 

 

  1. Hidden Field Name which is Model Property 
  2. Value of Hidden Field (If we want to set value from view that we can set this way)

Declaration of hidden field using strongly typed helper will be like as shown below

 

@Html.HiddenFor(m => m.StudentID, new { Value = "1" })

Here name of hidden field will be "StudentID ( m => m.StudentID )" and  value of Hidden field will be "1".

 

Now we will add hidden fields in our view using html helpers that will be like as shown below 

 

@model HiddenDemo.Models.StudentModel

@{

ViewBag.Title = "Index";

}

<h2>Index</h2>

@using (Html.BeginForm())

{

@Html.Hidden("HDName", "Saineshwar")

@Html.HiddenFor(m => m.StudentID, new { Value = "1" })

@Html.HiddenFor(m => m.StudentName,  new { Value = "Sai" })

<inputid="Submit1" type="submit" value="submit"/>

}

After adding this hidden fields on view now run the view that will be like as shown below 

 

output of view after adding hidden fields in asp.net mvc application

 

Now let’s get these hidden field values in controller.

Reading Hidden Field Value in Controller

In this controller we have 2 parameters FormCollection for reading Form Value and StudentModel for Reading Strongly typed Model Values.

 

Reading FormCollection values

 

string HDName = fc["HDName"]; // Basic Helper

Reading StudentModel values

 

 int StudentID = objSM.StudentID;  // Strongly typed helper

 string StudentName = objSM.StudentName; // Strongly typed helper 

Following is the code snippet of Index Action Method after adding hidden fields in our controller

 

[HttpPost]

public ActionResult Index(FormCollection fc, StudentModel objSM)

{

string HDName = fc["HDName"]; // Basic Helper

int StudentID = objSM.StudentID;  // Strongly typed helper

string StudentName = objSM.StudentName; // Strongly typed helper

return View(objSM);

}

Now run application and check debug view of Index Action Method that will be like as shown below

Debug view of index action method for hidden field values

Assigning value to Hidden field from Controller

Here we will assign values to hidden fields from controller by assigning value to model. Code snippet of index action method will be like as shown to assign values to hidden fields

 

[HttpGet]

public ActionResult Index()

{

StudentModel SM = new StudentModel();

SM.StudentID = 101; // Strongly typed helper

SM.StudentName = "DotNetSai"; // Strongly typed helper

ViewBag.HDValue = "Sai"// Basic Helper

return View(SM);

}

For assigning value we added Index Action Method (HttpPost). Following is the debug view of index Action Method after assigning value to hidden field from controller.

 

Debug view of index action method to assign values to hidden field values

Assigning value to Hidden Fields from JavaScript

Following is the way to assign value to hidden fields from JavaScript

 

<script lang="ja">

function Assignval() {

var hdname = $("#HDName").val(10);

var Studentid = $("#StudentID").val(20);

var Studentname = $("#StudentName").val('Coolsai');

}

</script>

Reading value of Hidden Fields from JavaScript

Following is the way to read values of hidden fields from JavaScript

 

<script lang="ja">

debugger;

function Readingvalue() {

var hdname = $("#HDName").val();

var Studentid = $("#StudentID").val();

var Studentname = $("#StudentName").val();

}

</script>

Finally we completed read or assign or using hidden fields in aps.net mvc  in various ways.

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User