ASP.Net MVC – What are the uses of Display, DisplayName, DisplayFormat and ScaffoldColumn attributes

http://www.codeproject.com/Articles/775220/ASP-Net-MVC-What-are-the-uses-of-Display-DisplayNa?utm_source=tuicool

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 following:

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′, ‘GeorgeThomas@BestTEchnologyBlog.com’ , 40000, ‘www.BestTEchnologyBlog.com’ )

Insert into  tblEmployee  values 
( ‘Priyanka’ ,  NULL , 29,  ’2014-03-05 09:53:36.678′, ‘Priyanka@BestTEchnologyBlog.com’ , 36000, ‘www.BestTEchnologyBlog.com’ )

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 much pretty. There is no space in between Full andName 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 ifGender 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 tblEmployeeclass 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 
{ 
    [ MetadataType ( typeof ( EmployeeMetaData ))] 
     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  }")] 
        //[DisplayFormatAttribute(DataFormatString="{0  }")] 

        //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 
        [ ScaffoldColumn ( false )] 
         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.

@Html.DisplayForModel()

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.