Click here to Skip to main content
Click here to Skip to main content

Tagged as

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

, 19 May 2014
Rate this:
Please Sign up or sign in to vote.
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. Th

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.

EntityDataModel

Then right click on the Controllers folder and add HomeController.

MVC2

MVC3

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);
}

}

MVC4

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.

MVC5

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

MVC6

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

MVC8

But look at the output , it is not much 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.

MVC9

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 = "{0Big Grin | :-D }")]
        //[DisplayFormatAttribute(DataFormatString="{0Big Grin | :-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; }
    }
}

MVC10

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.

MVC11

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.

MVC14

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

MVC15

Reference: Arun Ramachandran (http://BestTEchnologyBlog.Com)


License

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

Share

About the Author

Arun Ramachandran India
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 http://BestTEchnologyBlog.com. 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

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web01 | 2.8.140826.1 | Last Updated 19 May 2014
Article Copyright 2014 by Arun Ramachandran India
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid