Superhero Website
November 2019 - January 2020
This was a project to learn both ASP.NET and Angular to create a website that shows Superheroes from Marvel and DC comics, including the teams and events they are part of, and allows typical CRUD methods. This project actually consists of two sub-projects, the first to create the website using only ASP.NET; the second to create an API using ASP.NET and a front-end using Angular.
- How to create a website using either ASP.NET MVC or ASP.NET Web API + Front-End
- How to code in C#, specifically within the ASP.NET frameworks
- How to code in Typescript and how best to use components and services in Angular
ASP.NET Full Website (MVC)
The first version of the website was built entirely using the ASP.NET MVC (Model View Controller) framework. The idea was to create models for Superhero, Team, and Event, and then to have controllers and views for each of them to allow CRUD functions. The data was stored in a database that is created using the Entity Framework code-first method.
ASP.NET API
For the second part of the project, the original ASP.NET code was adapted to become an API, such that the functionality of the data could remain the same but it could now be linked with a more reactive front-end framework (in this case, Angular) to create a better user experience.
The superhero controller was adapted in the following way:
- Results are now returned as a paginated list, allowing a user to extract any amount of data they want from the API
- Added QueryParameters to control various things such as pagination parameters, any filtering parameters and any ordering parameters
Further to this, the controller was adapted to return results instead of rendering the page directly.
Angular Front-End
The hardest part of this project was to port across the designs from ASP.NET to Angular. The main issue was that ASP.NET MVC uses Razor, which is a templating language for full HTML pages with some support for template layouts, but Angular is a shift in paradigm with a heavy focus on modularised blocks of visual information known as components. For this reason, only the superheroes pages were ported across, and it is these that I will show here.
The main Superheroes list page, as shown earlier, was split into three components
- Header: this contains the image and text information for the header of the page
- Results: this contains the list of superhero results to show the user, with a pagination option
- Searching/Filtering: this contains the searching and filtering elements that allow a user to control the data they see. The searching and filtering options were put in their own component so that they could be reused across the website. Breaking this component down further, both a 'search' component and a 'filter' component were created which allows me to specify extactly which properties I want to have an allocated search bar or filter box, with a lot of customisability.
To retrieve the results, a SuperheroAPI Service was created in Angular that has functions to call the ASP.NET API and return the results.
To control the results that the user sees, a set of Parameter classes was created: PaginationParameters, FilteringParameters, and SearchingParameters. These classes have properties for each of the expected parameters and a function to create a URL from the properties which can be used to contact the API.
A URLCreator class was created which takes as input a set of PaginationParameters, FilteringParameters and SearchingParameters and combines all of the parameters into a URL that can be used to contact the API and get the relevant results.
The two ported pages (Superheroes list and Superhero Details) are shown below.
This project was my first exposure to ASP.NET (and C# in general) and Angular, so was used as a way to learn the best practices of each framework. Through porting a few of the website's pages to Angular, I realised the difficulties involved and also learnt how best to use Angular's components. I decided to stop the project here and use the information I had learnt about these technologies in my next project: a Harry Potter Quiz.