CodeProject
In the last blog post on ASP.NET MVC, we have discussed about implementing ListBox
es. 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
{
[DisplayName("Full Name")]
public string FullName { get; set; }
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy hh:mm:ss tt}")]
public DateTime? HireDate { get; set; }
[DisplayFormat(NullDisplayText = "Gender not specified")]
public string Gender { get; set; }
[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" />