Various Type Of Attribute in Asp.net MVC

In This tutorial we will discuss different type of attributes those  are used in Asp.net mvc for display purpose.

As we know that these display attribute store in the “using System.ComponentModel.DataAnnotations;” NameSpace.

Step(1):-  Go to Sql Server management system and execute following script.

create database MVCVariousAttribute use MVCVariousAttribute Create table Student (  Id int primary key identity,  FullName nvarchar(100),  Gender nvarchar(10),  Age int,  AdmissionDate DateTime,  EmailAddress nvarchar(100),  WinningPrize int,  PersonalWebSite nvarchar(100) ) Insert into Student values ('Munesh Sharma', 'Male', 25, '2005-05-05 16:53:36.975', 'Munesh@gmail.com', 45000, 'http://dotnet-munesh.blogspot.in/') Insert into Student values ('Rahul Sharma', NULL, 30, '2006-06-06 17:42:25.865', 'Rahul@gmail.com', 35000, 'http://dotnet-munesh.blogspot.in/')

Step(2):- Go to Visual studio and add a new project  -> Select “Asp.Net MVC4  Web Application” and give the name for this ,In my case it is “MVCApplicationWithVariousAttribute” -> Select a Project template as Empty and View engine is “Razor”, Then Click OK

Step(3):-  Add “EntityFramework dll”  to reference folder in your project if you don’t have then install it through nugget package manager for more go this Go here.

Step(4):- Right click on Model folder and add “Ado.net entity Data Model” and give the name it as “StudentDataModel”, Then click on Add

Step(5): .   When You will click Add button here you will see another window for  “EntityData modal Wizard” from there you select “Generate From DataBase”, And Click Next.

Give the connection name and select your database then click on next

Step(6) .   In this screen select your Database Tables and give Modal Name then click FINISH Button.

When you will click on finish button it will create Student Entity.

Step(7):- Now at this position go to controller folder -> right click on this folder and add a controller with the name “HomeController”, It will create a home controller , write the following code on this page.

Here we will use only Detail action method

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MVCApplicationWithVariousAttribute.Models; namespace MVCApplicationWithVariousAttribute.Controllers {     public class HomeController : Controller     {                 public ActionResult Details(int id)         {             MVCVariousAttributeEntities _context = new MVCVariousAttributeEntities();            Student _studentDetail =  _context.Students.Where(c => c.Id == id).SingleOrDefault();            return View(_studentDetail);         }         //         // GET: /Home/Create         public ActionResult Create()         {             return View();         }         //         // POST: /Home/Create         [HttpPost]         public ActionResult Create(FormCollection collection)         {             try             {                 // TODO: Add insert logic here                 return RedirectToAction("Index");             }             catch             {                 return View();             }         }         //         // GET: /Home/Edit/5         public ActionResult Edit(int id)         {             return View();         }         //         // POST: /Home/Edit/5         [HttpPost]         public ActionResult Edit(int id, FormCollection collection)         {             try             {                 // TODO: Add update logic here                 return RedirectToAction("Index");             }             catch             {                 return View();             }         }         //         // GET: /Home/Delete/5         public ActionResult Delete(int id)         {             return View();         }         //         // POST: /Home/Delete/5         [HttpPost]         public ActionResult Delete(int id, FormCollection collection)         {             try             {                 // TODO: Add delete logic here                 return RedirectToAction("Index");             }             catch             {                 return View();             }         }     } }

Step(8):- Next step is that add a view for detail action method so right click on this method -> add view -> Scaffold template as Detail

It will generate a code for Detail view, Now run your application and redirect to the following URL

http://localhost/MVCApplicationWithVariousAttribute/Home/Details/1

It is With Home controller then Detail action method with ID “1”

When we see this output , we see that it is not pretty good means there is no gap in FullName other things so for that we will use attribute.

Step(9):- When we create a application using entityFramework we add a EntityDataModel then we gives connection and select tables that time it create a class in model (Designer class).

When we go to this class we see that it’s a partial class, And this is a auto generated class .This contain all the properties (In region “#region Primitive Properties) , These properties name matches with the Table column Name.

We can change this header name by changing the properties name in Student class which is auto generated class.

If we change in auto generated student class is not good because due this we can loss all the changes , So we have to customization in different class.

This auto generated class is a partial class so we can create a another student partial class and we can make changes there.

So in modal folder add a class and give the name as “Student.cs” and write the following code in this class

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.ComponentModel.DataAnnotations; using System.ComponentModel; namespace MVCApplicationWithVariousAttribute.Models {     [MetadataType(typeof(StudentMetaData))]     public partial class Student     {     }     public class StudentMetaData     {         //If you want "FullName" to be displayed as "Full Name",         //use DisplayAttribute or DisplayName attribute.                //[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? AdmissionDate { 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? WinningPrize { get; set; }     } }

Run you application with these changes

DataType and Display column attribute

DataType attribute

public class StudentMetaData {     // Display mail to hyperlink     [DataType(DataType.EmailAddress)]     public string EmailAddress { get; set; }     // Display currency symbol. For country specific currency, set      // culture using globalization element in web.config.      // For Great Britain Pound symbol     // <globalization culture="en-gb"/>     [DataType(DataType.Currency)]     public int? WinningPrize{ get; set; }     // Generate a hyperlink     [DataType(DataType.Url)]     public string PersonalWebSite { get; set; }     // Display only Time Part     // [DataType(DataType.Time)]     // Display only Date Part     [DataType(DataType.Date)]     public DateTime? AdmissionDate { get; set; } }

DisplayColumn attribute

It is used when a class has complex type properties and you want to get one properties from these complex object for display. We will take a example

Go to model folder and add a class with the name is Collage.cs and in this class write the following code

public class Collage {     public Student CollageDirector     {         get         {             MVCVariousAttributeEntities db = new MVCVariousAttributeEntities ();             return db.Student.Single(x => x.Id == 1);         }     } }

This CollageDirector will return the Student object if we want to show full name then change the Student.cs partial class for full name

[MetadataType(typeof(StudentMetaData))] [DisplayColumn("FullName")] public partial class Student { }

Now customize the Detail action method in Home controller

public ActionResult Details(int id) {     Collage info = new Collage();     return View(info); }

View will be like following code

@model MVCApplicationWithVariousAttribute.Models.Collage @{     ViewBag.Title = "Details"; } @Html.DisplayTextFor(x => x.CollageDirector)

Now run your application you will see only full name.

Customizing Autogenerated view in entityFramework in Asp.Net MVC

In previous tutorial we learn CURD operation using EntityFramework in Asp.net MVC. When we work with entityFramework it create Views(For creation,insert,delete,update) automatically , So the output of the application is

Changes in Index View

Suppose when we get output where Header name is common for two fields then we need to change their header name for recognize ,Here if we change StudentName as “Name” then StudentName and DepartmentName has same header name as “Name then we need to customization in index view. These header name same as database table column name .

Means o/p is like below

So here i want to change the Header “student Name” instead of “Name”

Step(1):- How header generate

When we create a application using entityFramework we add a EntityDataModal then we gives connection and select tables that time it create a class in modal (Designer class).

When we go to this class we see that it’s a partial class, And this is a auto generated class .This contain all the properties (In region “#region Primitive Properties) , These properties name matches with the Table column Name.

Step(2):- How to change Header name

We can change this header name either change column name in database table or change the properties name in Student class which is auto generated class.

If we change in auto generated student class is not good because due this we can loss all the changes , So we have to customization in different class.

This auto generated class is a partial class so we can create a another student partial class and we can make changes there.

So in modal folder add a class and give the name as “Student.cs” and write the following code in this class

[MetadataType(typeof(StudentMetaData))] public partial class Student { } public class StudentMetaData {     [Display(Name="Student Name")]     public string Name { get; set; } } This display attribute present in “"System.ComponentModel.DataAnnotations" namespace

When we run this application it will generate a Header name As “StudentName” instead of Name.

Changes in Edit View

When we run this application and click on edit link then we see that “Gender” is not in dropdown and Department does not have default text.

Go to the create view and replace following code

@Html.DropDownList("DepartmentId", String.Empty) WITH @Html.DropDownList("DepartmentId", "Select Department")  For Gender @Html.EditorFor(model => model.Gender) WITH @Html.DropDownList("Gender", new List<SelectListItem>     {     new SelectListItem { Text = "Male", Value="Male" },     new SelectListItem { Text = "Female", Value="Female" }     }, "Select Gender")

For making Name as read only make following changes

@Html.EditorFor(model => model.Name) TO @Html.DisplayFor(model => model.Name) @Html.HiddenFor(model => model.Name)

Changes in create View

Here any field is not require in create means if we click on create button it save NULL in database for all fields that is wrong, So for that we need to make require field using  [Required] attribute that present in “using System.ComponentModel.DataAnnotations;” namespace.

So lets make changes in Student class which we create as partial class

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.ComponentModel.DataAnnotations; namespace CUROperationUsingEF.models {     [MetadataType(typeof(StudentMetaData))]     public partial class Student     {     }     public class StudentMetaData     {         [Required]         public string Name { get; set; }         [Required]         public string Gender { get; set; }         [Required]         public string City { get; set; }         [Required]         [Display(Name="Department")]         public int DepartmentId { get; set; }     } }

Replace the following code in Create view also

@Html.DropDownList("DepartmentId", String.Empty) WITH @Html.DropDownList("DepartmentId", "Select Department")  For Gender @Html.EditorFor(model => model.Gender) WITH @Html.DropDownList("Gender", new List<SelectListItem>     {     new SelectListItem { Text = "Male", Value="Male" },     new SelectListItem { Text = "Female", Value="Female" }     }, "Select Gender")

Now Run your application and click on create button and see the result.