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

CodeProject

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′, 
‘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 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
{
    [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:d}")]
        //[DisplayFormatAttribute(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
        [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.

Reference

Arun Ramachandran (http://BestTEchnologyBlog.Com)