During this session of ASP.NET Core Tutorial (ASP.NET 5.0), we introduce DisplayNameFor, DisplayFor and ActionLink Html Hepler, then we will discuss about Data Annotation. Also, we will create another View with the above mentioned Html Helpers and change properties’ label and data format in the view with Data Annotation.
What is Data Annotation in ASP.NET?
Data Annotation is a tool that we can apply our rules on the models. With this tool we can add validation to our models and forms. Also, we can change property label and Data Format then ASP.NET will take care of enforcing them and displaying appropriate messages to our users.
DisplayFor & DisplayNameFor
These two Html Heplers are responsible for showing labels and values of Model Properties inside the View. DisplayNameFor is showing property’s label and DisplayFor is presenting property’s value inside the view.
Both helpers are bound to the properties of the View Model with Lambda Expression. Also we can change the property’s label and the format of value data with Data Annotation that we will discuss later in this session.
We continue to develop our project that we have been working throughout this tutorial. Thus, we return a View with name of “View” as a result of CreateStronglyTypedView Action Method with Post Method and pass the submitted data to the view.
|
1 2 3 4 5 6 7 8 9 |
[HttpPost] public IActionResult CreateStronglyTypedView(CreateCostViewModel Model) { return View("View",Model); } |
Then, we create another strongly typed view with name of “View” in Views/Cost folder and bind it to CreateCostViewModel with model directive. Afterward, we can present the submitted data with DisplayNameFor and DisplayFor Html Helper.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@model CreateCostViewModel @{ ViewBag.Title = "Cost View Model"; } @Html.DisplayNameFor(m => m.Amount) @Html.DisplayFor(m => m.Amount)<br /> @Html.DisplayNameFor(m => m.Category) @Html.DisplayFor(m => m.Category)<br /> @Html.DisplayNameFor(m => m.Date) @Html.DisplayFor(m => m.Date)<br /> @Html.DisplayNameFor(m => m.Comment) @Html.DisplayFor(m => m.Comment)<br /> @Html.DisplayNameFor(m => m.PaymentMethod) @Html.DisplayFor(m => m.PaymentMethod)<br /> |
ActionLink
This Html Helper, helps us to create <a></a> tag that link us to respective controller and action method. ActionLink has several versions of Overloaded that we can select the proper one based on our needs. But in this session we use the version which includes link label, action method name and controller name.
|
1 2 3 4 5 |
@Html.ActionLink("Back To Create Cost", "CreateStronglyTypedView", "Cost") |
Bear in mind, if target of the link and the location of the link are in the same controller, we can omit controller name part and use another overloaded version.
You can find the full code of our view in below piece of code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
@model CreateCostViewModel @{ ViewBag.Title = "Cost View Model"; } <div class="row"> <div class="col-lg-4 offset-lg-4 col-md-6 offset-md-3 col-12"> <div class="card"> <div class="card-header"> Submitted Cost Data </div> <div class="card-body"> @Html.DisplayNameFor(m => m.Amount) @Html.DisplayFor(m => m.Amount)<br /> @Html.DisplayNameFor(m => m.Category) @Html.DisplayFor(m => m.Category)<br /> @Html.DisplayNameFor(m => m.Date) @Html.DisplayFor(m => m.Date)<br /> @Html.DisplayNameFor(m => m.Comment) @Html.DisplayFor(m => m.Comment)<br /> @Html.DisplayNameFor(m => m.PaymentMethod) @Html.DisplayFor(m => m.PaymentMethod)<br /> @Html.ActionLink("Back To Create Cost", "CreateStronglyTypedView", "Cost") </div> </div> </div> </div> |
Data Annotation
This tool is located in “System.ComponentModel.DataAnnotations” namespace and enable us to validate models and forms. Also, we can use Data Annotation to apply our required rules on the model and change properties’ label and data format then ASP.NET will take care of enforcing them and displaying appropriate messages to user.
We can decorate our property with [Display(Name=””)] to change property’s label.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
public class CreateCostViewModel { [Display(Name ="Cost Amount")] public decimal Amount { get; set; } public DateTime Date { get; set; } public string Comment { get; set; } [Display(Name ="Selected Category")] public string Category { get; set; } public List<SelectListItem> Categories { get; set; } public List<string> SelectedCategories { get; set; } [Display(Name ="Payment Method")] public int PaymentMethod { set; get; } public List<PaymentMethod> PaymentMethods { get; set; } public bool MakeFormClear { get; set; } } |
As you can see in above code, we changed Amount, Category and PaymentMethod properties’ label with “Display” Data Annotation. Also, we can change Date Format with [DisplayFormat(DataFormatString =””)] data annotation.
|
1 2 3 4 5 6 |
[DisplayFormat(DataFormatString ="{0:d}")] public DateTime Date { get; set; } |
You can find more data type format in THIS LINK, also list of Date Format is available in THIS LINK.
Moreover, we can show proper message to user for null properties. For instance, if we choose “Select a Category” which has value of null as Category, then, in the view we have null value in front of Category field. But if we decorate Category field with [DisplayFormat(NullDisplayText =”Category Not Selected”)] we will have this message if user choose “Select a Category” as Category option.
You find below for full code of CreateCostViewModel.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
public class CreateCostViewModel { [Display(Name ="Cost Amount")] public decimal Amount { get; set; } [DisplayFormat(DataFormatString ="{0:d}")] public DateTime Date { get; set; } public string Comment { get; set; } [Display(Name ="Selected Category")] [DisplayFormat(NullDisplayText ="Category Not Selected")] public string Category { get; set; } public List<SelectListItem> Categories { get; set; } public List<string> SelectedCategories { get; set; } [Display(Name ="Payment Method")] public int PaymentMethod { set; get; } public List<PaymentMethod> PaymentMethods { get; set; } public bool MakeFormClear { get; set; } } |
If you need more details, watch this session video. Also, for being updated about our coming sessions, follow us on Instagram, Facebook, Telegram or YouTube. Also you can have access to list of all sessions HERE.
You can download this Session Slides form HERE