Hiddeninput and readonly attributes in asp.net mvc

In this tutorial we will discuss about HiddenInput and ReadOnly Attribute in asp.net MVC.

Hidden Input Attribute

Basically HiddenInput Attribute is used when we want to render a application property using InputType = Hidden. This is mostly used when we want that user is not able to see or edit the property, for this we need to post this property to the server when we submit this form.

This HiddenInput  Attribute is present in System.Web.Mvc namespace. 

Before proceeding this tutorial first go through to this tutorial  Link we learn Various Type of attribute in asp.net mvc .

Step(1):-  In previous tutorial we create a partial class of student.edmx we will take that student.cs class and we will make changes in that class means there we added a ID property which is decorated with HiddenInput attribute.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.ComponentModel.DataAnnotations; using System.ComponentModel; namespace MVCApplicationWithVariousAttribute.Models {     [MetadataType(typeof(StudentMetaData))]     public partial class Student     {     } public class StudentMetaData {  // Id property is hidden and cannot be changed     [HiddenInput(DisplayValue=false)]     public int Id { get; set; }     // Display mail to hyperlink     [DataType(DataType.EmailAddress)]     public string EmailAddress { get; set; }     // Display currency symbol. For country specific currency, set      // culture using globalization element in web.config.      // For Great Britain Pound symbol     // <globalization culture="en-gb"/>     [DataType(DataType.Currency)]     public int? WinningPrize{ get; set; }     // Generate a hyperlink     [DataType(DataType.Url)]     public string PersonalWebSite { get; set; }     // Display only Time Part     // [DataType(DataType.Time)]     // Display only Date Part     [DataType(DataType.Date)]     public DateTime? AdmissionDate { get; set; } } }

Here if we decorate this ID property with “HiddenInput” only like following that time it will not hide this property for that we have to add   [HiddenInput(DisplayValue=false)]

//This will not hide property [HiddenInput]      public int Id { get; set; }   [HiddenInput(DisplayValue=false)]     public int Id { get; set; }

Now run your application and render to this following link you will see that you will not see the ID property in this page 

http://localhost/MVCApplicationWithVariousAttribute/Home/Details/1

Step(2):- Now if we able to edit these property so for that go to the home controller and there we have “EDIT Action method” there we are passing ID of student and write the following code for the edit properties

public ActionResult Edit(int id)         {             MVCVariousAttributeEntities _context = new MVCVariousAttributeEntities();             Student _studentDetail = _context.Students.Where(c => c.Id ==        id).SingleOrDefault();             return View(_studentDetail);            // return View();         }

This is the controller ,now we need the View for that right click on this action method and create a view with the name is EDIT.

and click on Add ,it will create a view . this edit view code will be like following

@model MVCApplicationWithVariousAttribute.Models.Student @{     ViewBag.Title = "Edit"; } <h2>Edit</h2> <div style="font-family" Arial> @using (@Html.BeginForm()) {     @Html.EditorForModel()     <br />     <br />     <input type = "submit" value = "SaveRecord" /> } </div>

Now run your application and navigate to the following link

http://localhost/MVCApplicationWithVariousAttribute/Home/Edit/1

Here if see the student full detail from here if go to page source we see that we have input element name is ID and Type is Hidden and the value is 1 so when we click on Save record button then this ID is save to server means this information will save in respective ID , so we can use this id to update the records.

ReadOnly Attribute :-

Readonly attribute is present in System.ComponentModel namespace. This property make sure that it make property Read only. Still we can make change in property but once we will post this form Model Binder will care of ReadOnly Attribute, means when we will post this form to server this will send this property as null and will not make any changes in this property. We can make property of a classbt removing SET accessor.

For example suppose we want make readonly EmailId so add a readOnly attribute to this property in student.cs class.

[MetadataType(typeof(StudentMetaData))]     public partial class Student     {     }     public class StudentMetaData     {         #region dataType attribute         [HiddenInput(DisplayValue = false)]         public int Id { get; set; }         [ReadOnly(true)]         [DataType(DataType.EmailAddress)]         public string EmailAddress { get; set; }         [DataType(DataType.Currency)]         public int? WinningPrize { get; set; }         // Generate a hyperlink         [DataType(DataType.Url)]         [UIHint("OpenInNewWindow")]         public string PersonalWebSite { get; set; }         [DataType(DataType.Date)]         public DateTime? AdmissionDate { get; set; } } }

Now Go to the home controller and write the following code to the  POST Edit Action method .

[HttpPost]         public ActionResult Edit(Student student)         {             try             {                 if (ModelState.IsValid)                 {                     MVCVariousAttributeEntities _context = new MVCVariousAttributeEntities();                     Student studentFromDB = _context.Students.Single(x => x.Id == student.Id);                     // Populate all the properties except EmailAddrees                     studentFromDB.FullName = student.FullName;                     studentFromDB.Gender = student.Gender;                     studentFromDB.Age = student.Age;                     studentFromDB.PersonalWebSite = student.PersonalWebSite;                     _context.ObjectStateManager.ChangeObjectState(studentFromDB, System.Data.EntityState.Modified);                     _context.SaveChanges();                     return RedirectToAction("Details", new { id = student.Id });                 }                 return View(student);             }             catch             {                 return View();             }         }

 Now run your application and navigate to the following link

http://localhost/MVCApplicationWithVariousAttribute/Home/Edit/1

Modify every property here and click on Save Record you will see that all property changed except Email Id.