Click here to Skip to main content
15,881,866 members
Articles / Web Development / HTML

ASP.NET MVC – What are the Uses of Display, DisplayName, DisplayFormat and ScaffoldColumn Attributes?

Rate me:
Please Sign up or sign in to vote.
2.47/5 (9 votes)
19 May 2014CPOL2 min read 120K   6   4
Uses of Display, DisplayName, DisplayFormat and ScaffoldColumn attributes

In the last blog post on ASP.NET MVC, we have discussed about implementing ListBoxes. You can read that article here. In this article, we will go over different display attributes in ASP.NET MVC.

Let’s understand this with an example. We will be using tblEmployee table for this. The SQL scripts for creating tblEmployee table and inserting data into it are as follows:

Create table tblEmployee
Id int primary key identity,
FullName nvarchar(100),
Gender nvarchar(10),
Age int,
HireDate DateTime,
EmailAddress nvarchar(100),
Salary int,
PersonalWebSite nvarchar(100)

Insert into tblEmployee values
(‘George Thomas’, ‘Male’, 37, 
’2014-02-03 16:50:47.788′, 
40000, ‘’)

Insert into tblEmployee values
(‘Priyanka’, NULL, 29, ’2014-03-05 09:53:36.678′, 

First of all, generate an ADO.NET Entity data model for the table tblEmployee. You can refer here to know the steps to be followed to create an ADO.NET Entity data model.


Then right click on the Controllers folder and add HomeController.



Include the following USING statement to HomeController.

using MVCDemo.Models;

Copy and paste the following code:

public class HomeController : Controller
public ActionResult Details(int id)
SampleDBContext db = new SampleDBContext();
tblEmployee employee = db.tblEmployees.Single(x => x.Id == id);
return View(employee);


Then, right click on the Details action method and add Details view. Make sure that you are creating a strongly typed view against tblEmployee class. Select Details as the Scaffold template.


Set Aerial as our font – family by using a div tag.


Build the solution and run it. We will get a screen like below:


But look at the output, it is not very pretty. There is no space in between Full and Name and is displaying as FullName. Gender is showing as blank. We have to make it much more pretty. The text should be Full Name instead of FullName and if Gender is not specified, instead of showing blank there, a text of Gender not specified should be appeared. How can we achieve this? Here comes the importance of display attributes.

We can control the display of data in a View using display attributes that are found in System.ComponentModel.DataAnnotations namespace. It is not a good idea to add display attributes to the properties of auto-generated tblEmployee class as our changes will be lost if the class is auto-generated again.

So let’s create another partial Employee class and decorate that class with the display attributes. Right click on the Models folder and add Employee.cs class file.


Copy and paste the following code. Notice that I have tried to include the purpose of each attribute through the comments. Please read them carefully.

namespace MVCDemo.Models
    public partial class tblEmployee

    public class EmployeeMetaData
        //If you want "FullName" to be displayed as "Full Name", 
        //use DisplayAttribute or DisplayName attribute.
        //DisplayName attribute is in System.ComponentModel namespace.
        //[DisplayAttribute(Name="Full Name")]
        //[Display(Name = "Full Name")]
        [DisplayName("Full Name")]
        public string FullName { get; set; }

        //To get only the date part in a datetime data type
        //[DisplayFormat(DataFormatString = "{0:d}")]

        //To get time in 24 hour notation
        //[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy HH:mm:ss}")]

        //To get time in 12 hour notation with AM PM
        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy hh:mm:ss tt}")]
        public DateTime? HireDate { get; set; }

        // If gender is NULL, "Gender not specified" text will be displayed.
        [DisplayFormat(NullDisplayText = "Gender not specified")]
        public string Gender { get; set; }

        //If you don’t want to display a column use ScaffoldColumn attribute.
        //This only works when you use @Html.DisplayForModel() helper
        public int? Salary { get; set; }


Don’t forget to include following using statements:

using System.ComponentModel.DataAnnotations;
using System.ComponentModel;

Now build the solution and run it. We can see a page like below:


Here everything is OK except the Salary. Even if we have used [ScaffoldColumn(false)] attribute for the Salary, it is still showing. I think you can guess the reason. In the comments itself, I have specified that ScaffoldColumn attribute will work only when we use @Html.DisplayForModel() helper.

So instead of all the HTML in the View, we will get the same output by just adding one line of code which is shown below.


This HTML helper will go through each property and will render the UI automatically.


Now let’s build the solution by pressing Ctrl+Shift+B and refresh the page. We can see that the Salary is now hidden.



Arun Ramachandran (http://BestTEchnologyBlog.Com)

Image 13 Image 14


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Software Developer
India India
Arun Ramachandran is a Software Engineer having hands on experience in different Microsoft Technologies who is presently working in Experion Technologies, India. He has written over 95 articles on the subject on his blog at Along with 3 years of hands on experience he holds a Master of Computer Applications degree from Cochin University of Science & Technology (CUSAT).

Comments and Discussions

QuestionVenkat Tutorial Pin
Diwas Poudel7-Apr-18 5:00
Diwas Poudel7-Apr-18 5:00 
QuestionSource code ? Pin
Jhon Jairo Hernández Pulgarín23-Mar-18 9:13
Jhon Jairo Hernández Pulgarín23-Mar-18 9:13 
QuestionAmbiguous Title? Pin
Sun_Q25-Mar-15 5:48
Sun_Q25-Mar-15 5:48 
Thanks for the article. But I have found the title is quite misleading as there is no discussion about the differences between Display and DisplayName attributes and their usages.
QuestionWhen model is update my generated code has been remove and new auto generated code is create Pin
Ajay Shedge19-Nov-14 17:59
professionalAjay Shedge19-Nov-14 17:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.