Attributes In ASP.NET MVC

Introduction

This article will explain the concept of attributes in ASP.NET MVC. There are many attributes available in ASP.NET MVC that can be applied to ASP.NET MVC model or its properties. We will discuss the following attributes, with examples. 

  • Display
  • DisplayName
  • DisplayFormat
  • ScaffoldColumn
  • DataTypeAttribute, 
  • DisplayColumnAttribute
  • UIHint
  • HiddenInput
  • ReadOnly

Step 1

Open SQL Server 2014 or a version of your choice and create a table with some data.

Step 2

Choose a "web application" project and give an appropriate name to your project.
 
Attributes In ASP.NET MVC

Step 3

Select "empty" template, check on the MVC checkbox, and click OK.
 
Attributes In ASP.NET MVC

Step 4

Right-click the Models folder and add a database model. Add Entity Framework now. For that, right-click on Models folder, select Add, then select New Item.
 
Attributes In ASP.NET MVC

You will get a window; from there, select Data from the left panel and choose ADO.NET Entity Data Model, give it the name EmployeeModel (this name is not mandatory, you can give any name) and click "Add".

Attributes In ASP.NET MVC

After you click on "Add a window", the wizard will open. Choose EF Designer from the database and click "Next".

Attributes In ASP.NET MVC

After clicking on "Next", a window will appear. Choose New Connection. Another window will appear. Add your server name - if it is local, then enter a dot (.). Choose your database and click "OK".

Attributes In ASP.NET MVC

The connection will be added. If you wish, save the connection name as you want. You can change the name of your connection below. It will save the connection in the web config. Now, click "Next"

Attributes In ASP.NET MVC

After clicking on NEXT, another window will appear. Choose the database table name as shown in the below screenshot and click "Finish".

Attributes In ASP.NET MVC

Entity Framework gets added and the respective class gets generated under the Models folder.

Attributes In ASP.NET MVC

Employee Class

  1. using System.ComponentModel;  
  2. using System.ComponentModel.DataAnnotations;  
  3. using System.Web.Mvc;  
  4.    
  5. namespace MvcAttributes_Demo.Models  
  6. {  
  7.     using System;  
  8.     using System.Collections.Generic;  
  9.       
  10.     [MetadataType(typeof(EmployeeMetaData))]  
  11.     public partial class Employee  
  12.     {  
  13.         [HiddenInput(DisplayValue = false)]  
  14.         public int Id { getset; }  
  15.    
  16.         [Required(ErrorMessage = "Please enter name")]  
  17.         [DisplayName("Employee Name")]  
  18.         public string Name { getset; }  
  19.    
  20.         [DisplayFormat(NullDisplayText = "Not gender specified")]  
  21.         public string Gender { getset; }  
  22.    
  23.         [Display(Name = "Phone Number")]  
  24.         public string PhoneNumber { getset; }  
  25.    
  26.         [ReadOnly(true)]  
  27.         [Display(Name = "Email Address")]  
  28.         [DataType(DataType.EmailAddress)]  
  29.         public string EmailAddress { getset; }  
  30.    
  31.    
  32.         public string Position { getset; }  
  33.    
  34.         [Display(Name = "Hire Date")]  
  35.         [DataType(DataType.Date)]  
  36.         public Nullable<System.DateTime> HireDate { getset; }  
  37.    
  38.         [ScaffoldColumn(true)]  
  39.         [DataType(DataType.Currency)]  
  40.         public Nullable<int> Salary { getset; }  
  41.    
  42.         [Display(Name = "Website")]  
  43.         [UIHint("OpenInNewWindow")]  
  44.         [DataType(DataType.Url)]  
  45.         public string EmployeeWebSite { getset; }  
  46.     }  
  47.    
  48.     public class EmployeeMetaData  
  49.     {  
  50.         [DataType(DataType.Url)]  
  51.         public string EmployeeWebSite { getset; }  
  52.     }  
  53. }  

If you want the page to open in a new window,

  • Right click on Views folder, and add Shared folder if it does not exists. 
  • Then again, Right click on the Shared folder, and add the DisplayTemplates folder. 
  • Next, Right-click the DisplayTemplates folder, and add a View. Set OpenInNewWindow as the name.

 Write following code in OpenInNewWindow view

  1. <a href="@ViewData.Model" target="_blank">@ViewData.Model</a>   

Step 5

Right-click on Controllers folder and add a new controller.
 
Attributes In ASP.NET MVC

A window will appear. Choose MVC5 Controller-Empty and click "Add".

Attributes In ASP.NET MVC

After clicking on "Add", another window will appear with DefaultController. Change the name to HomeController and click "Add". The HomeController will be added under the Controllers folder. Don’t change the Controller suffix for all controllers, change only the highlight, and instead of Default, just change Home.

Attributes In ASP.NET MVC

The complete code for Home Controller

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Net;  
  5. using System.Web;  
  6. using System.Web.Mvc;  
  7. using MvcAttributes_Demo.Models;  
  8.    
  9. namespace MvcAttributes_Demo.Controllers  
  10. {  
  11.     public class HomeController : Controller  
  12.     {  
  13.         private readonly EmployeeContext _dbContext=new EmployeeContext();  
  14.    
  15.         public ActionResult Index()  
  16.         {  
  17.             var employee = _dbContext.Employees.ToList();  
  18.             return View(employee);  
  19.         }  
  20.    
  21.         [HttpGet]  
  22.         public ActionResult Details(int? id)  
  23.         {  
  24.             if (id==null)  
  25.             {  
  26.                 return new HttpStatusCodeResult(HttpStatusCode.BadRequest);  
  27.             }  
  28.    
  29.             var employee = _dbContext.Employees.Single(e=>e.Id==id);  
  30.             if (employee == null)  
  31.             {  
  32.                 return HttpNotFound();  
  33.             }  
  34.    
  35.             return View(employee);  
  36.         }               
  37.     }  
  38. }  

Step 6

Right-click on Index method in HomeController. The "Add View" window will appear with default index name checked (use a Layout page). Click on "Add".
 
Attributes In ASP.NET MVC

Code for Index View

  1. @model IEnumerable<MvcAttributes_Demo.Models.Employee>  
  2.    
  3. @{  
  4.     ViewBag.Title = "Index";  
  5. }  
  6.    
  7. <h2>List of Employee</h2>  
  8. <table class="table">  
  9.     <tr>  
  10.         <th>  
  11.             @Html.DisplayNameFor(model => model.Name)  
  12.         </th>  
  13.         <th>  
  14.             @Html.DisplayNameFor(model => model.Gender)  
  15.         </th>  
  16.         <th>  
  17.             @Html.DisplayNameFor(model => model.PhoneNumber)  
  18.         </th>  
  19.         <th>  
  20.             @Html.DisplayNameFor(model => model.EmailAddress)  
  21.         </th>  
  22.         <th>  
  23.             @Html.DisplayNameFor(model => model.Position)  
  24.         </th>  
  25.         <th>  
  26.             @Html.DisplayNameFor(model => model.HireDate)  
  27.         </th>  
  28.         <th>  
  29.             @Html.DisplayNameFor(model => model.Salary)  
  30.         </th>  
  31.         <th>  
  32.             @Html.DisplayNameFor(model => model.EmployeeWebSite)  
  33.         </th>  
  34.         <th>  
  35.             Action(s)  
  36.         </th>  
  37.     </tr>  
  38.    
  39. @foreach (var item in Model) {  
  40.     <tr>  
  41.         <td>  
  42.             @Html.DisplayFor(modelItem => item.Name)  
  43.         </td>  
  44.         <td>  
  45.             @Html.DisplayFor(modelItem => item.Gender)  
  46.         </td>  
  47.         <td>  
  48.             @Html.DisplayFor(modelItem => item.PhoneNumber)  
  49.         </td>  
  50.         <td>  
  51.             @Html.DisplayFor(modelItem => item.EmailAddress)  
  52.         </td>  
  53.         <td>  
  54.             @Html.DisplayFor(modelItem => item.Position)  
  55.         </td>  
  56.         <td>  
  57.             @Html.DisplayFor(modelItem => item.HireDate)  
  58.         </td>  
  59.         <td>  
  60.             @Html.DisplayFor(modelItem => item.Salary)  
  61.         </td>  
  62.         <td>  
  63.             @Html.DisplayFor(modelItem => item.EmployeeWebSite)  
  64.         </td>  
  65.         <td>  
  66.             @Html.ActionLink("Details""Details"new { id=item.Id })  
  67.         </td>  
  68.     </tr>  
  69. }  
  70.    
  71. </table>  
Attributes In ASP.NET MVC

 

Code for Details View

  1. @model MvcAttributes_Demo.Models.Employee  
  2. @{  
  3.     ViewBag.Title = "Details";  
  4. }  
  5.    
  6. <h2>Employee Details</h2>  
  7. <dl class="dl-horizontal">  
  8.     <dt>  
  9.         @Html.DisplayNameFor(m => m.Name)  
  10.     </dt>  
  11.     <dd>  
  12.         @Html.DisplayFor(m => m.Name)  
  13.     </dd>  
  14.     <dt>  
  15.         @Html.DisplayNameFor(m => m.Gender)  
  16.     </dt>  
  17.     <dd>  
  18.         @Html.DisplayFor(m => m.Gender)  
  19.     </dd>  
  20.     <dt>  
  21.         @Html.DisplayNameFor(m => m.PhoneNumber)  
  22.     </dt>  
  23.     <dd>  
  24.         @Html.DisplayFor(m => m.PhoneNumber)  
  25.     </dd>  
  26.     <dt>  
  27.         @Html.DisplayNameFor(m => m.EmailAddress)  
  28.     </dt>  
  29.     <dd>  
  30.         @Html.DisplayFor(m => m.EmailAddress)  
  31.     </dd>  
  32.     <dt>  
  33.         @Html.DisplayNameFor(m => m.Position)  
  34.     </dt>  
  35.     <dd>  
  36.         @Html.DisplayFor(m => m.Position)  
  37.     </dd>  
  38.     <dt>@Html.DisplayNameFor(m => m.HireDate)</dt>  
  39.     <dd>  
  40.         @Html.DisplayFor(m => m.HireDate)  
  41.     </dd>  
  42.     <dt>  
  43.         @Html.DisplayNameFor(m => m.Salary)  
  44.     </dt>  
  45.     <dd>  
  46.         @Html.DisplayFor(m => m.Salary)  
  47.     </dd>  
  48.     <dt>  
  49.         @Html.DisplayNameFor(m => m.EmployeeWebSite)  
  50.     </dt>  
  51.     <dd>  
  52.         @Html.DisplayFor(m => m.EmployeeWebSite)  
  53.     </dd>  
  54. </dl>  

Step 7

Build and run the project by pressing Ctrl+F5.
 
Attributes In ASP.NET MVC
 
Attributes In ASP.NET MVC
That's it. I hope now you understand how attributes work in MVC.