Building a Parameter Driven 'Details' Page
In a previous example (Extracting One Record), one record was extracted but we could only stipulate that it would the default or first record in the table. It is much more useful to extract the specific record we are interested in. This can be done by passing the primary key of the record we would like the details on. In the followin example the primary key value will be sent to the controller via the routing.
Supporting Video: Building a Details and a Search and Results Page
Ensure there is a DbContext
Note:
Previously (Extracting One Record) we created a DbContext in Controller/HomeController. As such we don't need to repeat that step here, but be aware you will need a DbContext if one has not already been made available to the Controller.
Set up an Action
Add a Task/Action to the controller called FilmDetails.
This is very similar to the previous example but does differ in two ways. Firstly, the Action is sent an integer parameter of id. This was defined in the routing in the Startup.cs.
We have already used the Controller and Action in this pattern to connect Controllers and Views. The third part of the pattern is the id value. Under this pattern id is an optional value that feeds a parameter into the Action.
| URL Called | Contoller Called | Action / Method Called | View Used |
|---|---|---|---|
| localhost:5001/Home/FilmDetails/456 | Controllers/HomeController.cs | FilmDetails(int 456) | Views/Home/FilmDetails |
The second difference to the previous example, is that the Action uses the Find() method to extract a record based on the primary key.
The Find() method is a core method of the DbSet Class and uses the primary key to find an entity and return it. A null value is returned if no entity found or the entity is not in context
Note:
Revisit Data Access Techniques to review how LINQ (Language Integrated Query) Extensions FirstOrDefault() and ToList() are methods of the DbContext, wherea Find() (used here) is a method of DbSet class.
Create a View
Create a view at Views/Home/FilmDetails.cshtml which will receive the model.
At the top of the View we'll add the @model directive @model YourAppName.Models.Film to help with IntelliSense, and then some Razor code to format and output database values.
Make sure you change the @model directive to reflect the Namespace of your application.
This is exactly the same used in a previous example, in that the Model is available to the view and so dot syntax can be used to extract values such as FilmTitle.
To test the file call a page using a URL that includes a valid primary key as the paraemeter ie localhost:5001/Home/FilmDetails/1.
Refine the View
Refine the HTML of the View to take advantage of the CSS provided. We can also make use of the FilmImage value in the database to dynamically load in an image from the wwwroot/images folder.
Amending the AllFilms View to Pass the Id
Amend the Views/Home/AllFilms View to link to the FilmDetails passing the FilmID of the film.
Save and test via the AllFilms to link to the FilmDetails.
Notice the URL appears as localhost:5001/Home/FilmDetails/2.
Wow: This is Clever!
The beauty of this approach is that now any film in the database can be displayed by simply passing the film's primary key as a asp-route-id parameter in the URL. There is no need to craft a page for every film in the database, this one page will do that for you. This is a key benefit of a dynamic database driven web application.
Tag Helpers
The above makes use of the Tag Helpers asp-controller, asp-action and asp-route-id.
Tag Helpers are non-standard HTML attributes that are interpreted by Razor. The Tag Helpers asp-controller, asp-action and asp-route-id build a URL Route to match the pattern CONTROLLER/ACTION/ID.
As such:
... would output HTML of:
Why use Tag Helpers?
Surely you can just hard-code that HTML quicker? The core benefit is, if Controller's name is changed, then the Tag Helpers ensure the links are updated.