Web API with .NET Core 3.1 from Scratch. Making a To-Do App — Part 3

This is the third part of a three part tutorial of how to make a Web Api for a simple app, consume it and add a design to it. In this third part, we are going to style an ASP.NET Core web API with Boostrap 4.

Pre-Requisites

• Created a To-Do API from the Part 1 and the App from Part 2.
• Visual Studio 2019 16.4 or later with the ASP.NET and web development workload or Visual Studio Code
• .NET Core 3.1 SDK or later

What is Bootrap?

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS with compatibility to Jquery and Javascript.

The benefits it gives are:

1. It has a mobile first framework style all in one file.
2. It’s supported by all popular browsers.
3. It’s easy to use and learn with a full online documentation.
4. Bootstrap’s responsive CSS adjusts to every Desktops, Tablets, and Mobiles.

Step 1. Add the Librarys with BootstrapCDN

When you only need to include Bootstrap’s compiled CSS or JS, you can use BootstrapCDN.

CSS Only

JS, Popper.js, and jQuery

Step 2. Add the jumbotron and the containers

Add the jumbotron for the header and a container in all the html text to align the content to center that was created so far. This should be placed always on top.

What is a Jumbotron?

As Bootstrap indicates Jumbotron is

A lightweight, flexible component that can optionally extend the entire viewport (user’s visible area of a web page) to showcase key marketing messages on your site.

…and what is a container?

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).

While containers can be nested, most layouts do not require a nested container.

You can use a simple jumbotron and container using this lines

To-do CRUD


 ... 

Step 3. Change the Insert form

• Add a div for the insert form
• Add six column alignment with an offset of three
• Add a div to justify and center the content
• Add a group “my-2" with 6 x 2 column aligment
• Add a label not visible to the input text
• Add a class control for the input text
• Add style to the button “Add”

Add




Add Things to Do

Step 3. Change the Edit form

• Add a div for the edit form
• Add six column alignment with an offset of three
• Add a div to justify and center the content
• Add a group “my-2” with 6 x 2 column aligment
• Add a label not visible to the input text
• Add a class control for the input text
• Add style to the button “Edit” and the link “Close”

Edit







Is Completed?



Edit Name






                        ✖

Step 4. Add Style to the Counter and make a Responsive Table

• Add a lead center property to the counter paragraph.
• Add a class to make the table small and responsive.
• Add a title for the table, to make it more accessible.
• Change the Head and the Body according to the Boostrap standard
• Add the scope of each column in the table.

List of task to-do
Is Complete?
Name
Edit To-Do Task
Delete To-Do Task

Step 5: Add the Boostrap style inside the Javascript

Edit the site.js and add the boostrap style for the edit button and for the delete button from the table using the property classList.add.

let editButton = button.cloneNode(false);
    editButton.innerText = 'Edit';
 editButton.classList.add('text-center','btn', 'btn-warning', 'btn-sm', 'btn-block');
    editButton.setAttribute('onclick', `displayEditForm(${item.id})`);

let deleteButton = button.cloneNode(false);
    deleteButton.innerText = 'Delete';
    deleteButton.classList.add('btn', 'btn-danger', 'btn-sm', 'btn-block');
   deleteButton.setAttribute('onclick', `deleteItem(${item.id})`);

This will add the yellow color to the edit button and the red color to the delete button. The block property was also added to show them occupying the entire length of the column and the small property to make it smaller than the other two buttons.

Step 5: Test de application

Compile the application doing right-click in project > compile and then run the app in the IIS

You can also add javascript validations to the code. There is information here of how to do that.

To publish the application, you can find the ways for that in the official guide.

References

• Introduction
• Element.classList
• Benefits of using Bootstrap

Additional Posts in the Same Series

• Web API with .NET Core 3.1 from Scratch. Making a To-Do App — Part 1
• Web API with .NET Core 3.1 from Scratch. Making a To-Do App — Part 2

Would you like to know more? Do you need our help? Contact Us!
www.quadiontech.com

Web API with .NET Core 3.1 from scratch making a To-Do App — Part 3 was originally published in Quadion Technologies on Medium, where people are continuing the conversation by highlighting and responding to this story.