10.6. Studio: Skills Tracker¶
Wouldn’t it be nice to have a small tracker to show us what programming skills we are working on? Let’s build something that would let us do just that!
As always, read through the whole studio before starting.
At the end of the studio, your final project should be able to take input from a user via a form and post the information in a way that is easy to read.
10.6.1. Create the MVC Project¶
In Visual Studio, create a new ASP.NET project using the Web Application (Model-View-Controller) option. Name your
SkillsTracker. Once created, run the project and go to
localhost:5001 to ensure that there are no
underlying build errors to fix before coding. Now you are ready to start tracking skills.
10.6.2. Creating Controllers¶
In your project, add a controller class called
SkillsController inside the
SkillsController, you will add several methods to accomplish the following:
localhost:5001/skills, add text that states the three possible programming languages someone could be working on. You need to have an
h1with the title “Skills Tracker”, an
h2, and an
olcontaining three programming languages of your choosing.
localhost:5001/skills/form, add a form that lets the user enter a date and choose their learning progress in each of the programming skills listed at
Use the date input type. Note that the value is a
For each of the skills, use
selectelements for selecting a description of progress.
[HttpPost]and request parameters to update the HTML with an
h1stating the submitted date and a list showing the user’s learning progress in the three programming languages they chose.
10.6.3. End Result¶
At the end of the studio, when you navigate to
localhost:5001/skills, you should see the following:
When you navigate to
localhost:5001/skills/form, you should see a blank form that looks something like:
If you fill out the form, your page may render like so:
10.6.4. Bonus Missions¶
- Reformat your
formpage to use a table instead of an ordered list.
- Add a new path to the site to display the information from the completed form.