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.
Related Articles
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:
- It has a mobile first framework style all in one file.
- It’s supported by all popular browsers.
- It’s easy to use and learn with a full online documentation.
- 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
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
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.