In this session of ASP.NET Core Tutorial, we are going to discuss about Strongly Typed View. This type of view is bound to a specific Model and presents data of that Model which was requested by the Controller. Also, during Session 19 we discussed Dynamic View in detail and showed you how you can pass data from Controller to View with ViewBag and ViewData. Hence, if you haven’t watched that session, we recommend watching that before starting this session.
What is Strongly Typed View?
Strongly Typed View is type of View that is bound to a a specific Model and presents data of that Model which was requested by the Controller. This type of View is bound to Model with @model directive. Also, Visual Studio provides Compile Time Error and IntelliSense for this type of View.
Create Strongly Typed View
First of all, for this type View, we need to store our required data to an object of the specific Model type. Then, we should pass the object to View with proper View() overload. We discussed about View() overloads in detail in Session 18.
|
1 2 3 4 5 6 7 8 9 |
public IActionResult Detail() { Cost model = costRepository.GetCostByID(1); return View(model); } |
Next step is, binding View to Model, for this purpose we use @model directive. Just bear in mind, “model” word should be started with small character in this part.
|
1 2 3 4 5 |
@model DailyCostWebApplication.Models.Cost |
Finally, we can restore data from Model in our View. Also, having said that in this part “Model” word should be started with capital word.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div> ID: @Model.ID </div> <div> Amount: @Model.Amount </div> <div> Category: @Model.Category </div> <div> Comment: @Model.Comment </div> |
You can see below the all View codes together.
|
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 |
@model DailyCostWebApplication.Models.Cost <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>@ViewBag.PageTitle</title> </head> <body> <h1>@ViewBag.PageTitle</h1> <div> <div> ID: @Model.ID </div> <div> Amount: @Model.Amount </div> <div> Category: @Model.Category </div> <div> Comment: @Model.Comment </div> </div> </body> </html> |
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 and you can have access to list of all sessions HERE.
You can download this Session Slides form HERE