CURATE UI WITH BOOTSTRAP AND FONTAWESOME
To improve the UI what we can do as developers is to get client-side libraries such as Bootstrap and Fontawesome to improve the graphical part of the website.
Bootstrap provides a grid of twelve columns. If we take the .col-xl-4 class, its width will be 1/3 of the grid if the user’s screen is xl, that is, extra large.
Should the browser window shrink, the elements will be organized one below the other.
To use Bootstrap you need to download a CSS file and Javascript libraries that give stylistic rules. Normally they are downloaded from a CDN (Content Delivery Network), the advantage is that these servers containing the files are used a lot so it is easy for them to be already stored in the Browser cache. Let’s go and copy the files from the following link: https://getbootstrap.com/docs/5.3/getting-started/introduction/ Copy the files to the Layout View as we want these files to be present on all pages. We insert a navbar, for more information check out my course on Bootstrap 5. The same thing done for Bootstrap we can do for Fontawesome, which are essentially web fonts and icons to be inserted into buttons to better understand their role.
I TAG HELPER
Helper tags are processed by the View Engine Razor and are enriched with other attributes that we do not have in HTML such as ASP-ACTION and ASP-CONTROLLER of the Anchor tag. One of the advantages of using these tags is that the View remains extremely readable.
Let’s look at the Anchor tag. This tag generates a dynamic address based on the parameters provided.
Let’s look at the variant for Razor pages.
Before using Tag Helpers we need to create a View called _ViewImports.cshtml, let’s look at the directory breakdown.
This is another Tag, Environment very important.
See the exclude counterpart.
CREATE THE COURSE CATALOG VIEW
Let us see a summary image of what we are going to accomplish. At present, since we do not yet draw data from a database we will use dummy data.
If we want the View to be responsive we have to use Bootstrap’s grid system.
SECTION SUMMARY
In the MVC pattern, views are responsible for presenting in HTML the data that is provided by the controller. In addition to HTML code, views can contain C# code to support data presentation (for loops to scroll through a list, if blocks to show/hide a portion of markup, and so on).
In ASP.NET Core MVC, views are files that have a .cshtml extension, which indicates precisely that we can put both HTML and C# code in them.
The views must be “dumb.” Under no circumstances should they contain code for accessing the database, sending e-mail, or any other activity that requires communication with the outside world because these are the responsibilities of the model. Furthermore, it will be the controller that, as the coordinator, will have to leverage the model to provide the view with all the data it needs, no more, no less.
Razor is the name of the ASP.NET Core MVC view engine, that is, the component that is responsible for processing the .cshtml file to generate the final page content.
Content view and layout view
The views are located within the project’s /Views directory. They serve two main purposes:
- Content views are created to help individual actions dynamically produce HTML content. Therefore, if we want to follow the naming convention of ASP.NET Core MVC, we should give the view the same name as the action and put it in a subdirectory named after the controller. For example, the view related to the Index action of the CoursesController is best created in /Views/Courses/Index.cshtml;
- Layout views are also files with a .cshtml extension and contain the common web application elements such as the header, navigation menu, footer, and so on. To comply with the naming convention, it is best to create a layout view in /Views/Shared/_Layout.cshtml. We can have more than one layout view, so it is not mandatory to respect this name. Also use of the underscore is recommended (but not required) and is only used to make it clear that the content of this view is reused and shared by other views, as also indicated by the Shared directory in which it is located.
Each content view can choose which layout view to use. Simply put this instruction at the top of the file.
- @{
- Layout = “_Layout”;
- }
To avoid repeating this instruction in all content views, we can move it inside a /Views/_ViewStart.cshtml file, which will be executed before each content view is processed.
Inside the layout view, we instead add an @RenderBody() statement to indicate where the HTML output produced by the content view will be embedded.
Additional sections in the layout view
A layout view can also define additional sections. A typical example is for a section called “Scripts” where the content view will be able to insert JavaScript code, which is good practice to insert just before the closing tag . Here is an example: in the layout view we use @RenderSection(“Scripts”, required: false) to indicate that the contents of the “Scripts” section will be embedded there.
We can define as many sections as we like, with any names.
Helper tags
Helper tags are on the surface very normal tags like a, form or input but they have additional attributes that help us produce the HTML content in the view. For example, with the a helper tag (also called the anchor helper tag) we can use the asp-action, asp-controller, or asp-page attributes to create a link by pointing to the name of the action, controller, or Razor Page, rather than going to value its href attribute. In this way we can better express our intent.
Helper tags reduce the use of C# code in the view and this improves the readability of the HTML code. So we can also involve our fellow designers who, while they may not have C# skills, perhaps are very proficient at HTML layout and therefore can help us out. We will just have to ask it to be careful not to delete attributes that have the asp- prefix.
In the course of the lessons we will meet various tag helpers and discover the advantages they offer. Then, we will build a customized one to make the most of them!
Using client development libraries such as Bootstrap and Fontawesome
Designing a usable and user-pleasing UI is not an easy task-there are professionals who specialize in this area who can help us make a top-quality application. We, as developers, the least we can do is get libraries to guide us in the right direction:
- Bootstrap offers a set of CSS components and rules that enhances the graphical appearance and usability of content. Its layout system allows us to create responsive pages, which rearrange themselves to fit the screen resolution;
- FontAwesome is a webfont that contains many vector icons that we can use in our menus and on our buttons to better communicate their purpose.
To learn how to use these libraries we can consult their respective websites, where documentation and examples are given. To add them to our application, we can follow one or both of these approaches:
- Refer them from a CDN such as cdnjs or unpkg. CDNs help our pages load faster because the user may already have that library cached if they had previously visited another site that used it;
- Getting them with LibMan. LibMan is a command-line tool that you install with dotnet tool install -g Microsoft.Web.LibraryManager.Cli. It allows us to download library files into our project with commands such as LibMan install font-awesome. In this way, all files are downloaded locally and served by the ASP.NET Core application. Therefore, we do not depend on third-party CDNs.
We can take advantage of both approaches by using the helper environment tag: while we are in development we use the libraries we got thanks to LibMan, so no Internet connection will be needed. Once the development is completed, then we will take advantage of CDNs.
Thanks to the include and exclude attributes of the environment helper tag, we can show or hide blocks of HTML code based on the name of the environment.
Leave A Comment