Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

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

0.00/5 (No votes)
19 May 2014 3  
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′, 
‘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.

<img alt="EntityDataModel" class="alignnone wp-image-2344 size-full" src="775220/entitydatamodel.png" />

Then right click on the Controllers folder and add HomeController.

<img alt="MVC2" class="alignnone wp-image-2347" height="350" src="775220/mvc22.png" width="600" />

<img alt="MVC3" class="alignnone wp-image-2348" height="391" src="775220/mvc32.png" width="600" />

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

<img alt="MVC4" class="alignnone wp-image-2349" height="336" src="775220/mvc42.png" width="600" />

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.

<img alt="MVC5" class="alignnone wp-image-2350" height="593" src="775220/mvc52.png" width="600" />

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

<img alt="MVC6" class="alignnone wp-image-2351" height="703" src="775220/mvc62.png" width="600" />

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

<img alt="MVC8" class="alignnone wp-image-2353" height="588" src="775220/mvc82.png" width="600" />

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.

<img alt="MVC9" class="alignnone wp-image-2354" height="380" src="775220/mvc92.png" width="600" />

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 &ldquo;FullName&rdquo; to be displayed as &ldquo;Full Name&rdquo;, 
        //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, &ldquo;Gender not specified&rdquo; text will be displayed.
        [DisplayFormat(NullDisplayText = "Gender not specified")]
        public string Gender { get; set; }

        //If you don&rsquo;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; }
    }
}

<img alt="MVC10" class="alignnone wp-image-2355" height="592" src="775220/mvc102.png" width="600" />

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:

<img alt="MVC11" class="alignnone wp-image-2356" height="573" src="775220/mvc112.png" width="600" />

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.

<img alt="MVC14" class="alignnone wp-image-2358" height="415" src="775220/mvc141.png" width="600" />

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

<img alt="MVC15" class="alignnone wp-image-2359" height="542" src="775220/mvc151.png" width="600" />

Reference

Arun Ramachandran (http://BestTEchnologyBlog.Com)

<img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/blogdotbesttechnologydotcom.wordpress.com/2328/" /> <img alt="" border="0" height="1" src="http://stats.wordpress.com/b.gif?host=besttechnologyblog.com&blog=58485837&post=2328&subd=blogdotbesttechnologydotcom&ref=&feed=1" width="1" />

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here