4 ~ .NET Core To Do List

This week will be cross platform friendly!

.NET Core (sometimes DotNet Core), is the next version of the .NET Framework from Microsoft. However, it also represents a huge shift in their approach and goals. To start off with, .NET Core is open source! It is set up to be truly cross platform (feel free to email me if you want to talk about how that differs from previous versions), and they have also created a cross-platform editor to go along, Visual Studio Code.

In future weeks, we will be exploring various aspects DotNet Core in addition to our other activities. The new framework feels like a breath of fresh air. Using it makes me feel like I’ve gone back to the old days of learning to code, the possibilities feel endless, and the language and tools are right there with a helping hand.

This project is a simple To Do list, with room for improvement. The primary goal is to show a working system that uses the .NET Core framework, EntityFrameworkCore (a tool to make database interaction easier), SQLite (light weight database engine), and MVC (the .NET framework to efficiently make web sites).

Let’s get rolling with some hands on!

0.) Install DotNet Core SDK

You can find .NET Core SDK for multiple operating systems at: https://www.microsoft.com/net/core

 

1.) Install Visual Studio Code

Go here, and grab the appropriate version for your operating system: https://code.visualstudio.com/

 

2.) Fork and Clone

Fork the code from: https://github.com/DeveloperGym/DevGym_Project4_NetCoreWeb

 

3.) Build!

Open Visual Studio Code, File -> “Open Folder”, then select the folder you cloned from Github, you should see a “src” folder, LICENSE file, and README.MD file at the least. After a few moments, VS Code will show a pop up prompt:

Clicking “Restore” will download the support packages/libraries that are needed by the project. If this is the first time you have opened VS Code, you may also see a couple of other prompts asking to add items to the editor. Accepting these things will make for a better experience using the software.

The first time is also the slowest, as it downloads the packages to a local cache.

Once it is done, you can hit “F5”, or click Debug -> Start Debugging. This will compile the code, launch the application, and then launch your web browser to: http://localhost:5000

 

4.) Explore the Code

Folders:

  • Controllers – This is the code behind the curtain that manages the two main sections, the home/landing page, and the List section
  • DB – The code that interacts with the SQLite database
  • Models – This is where the classes are that make it easy to move structured data around
  • Views – These are the prototype HTML* files that you see in the web browser (* = They are much more than html)
  • wwwroot – This has things like images, favicon.ico, javascript files, CSS, etc.

Program.cs

In the past, you had command line programs, and they always started at a method/function called “Main”. Various other options have existed for desktop and web programs. With .NET Core, they have returned to that idea, for all things. Program.cs has the Main method, which sets up and launches the Kestrel web server. If you wanted to change the port that the website runs on, you’d simply add a line to tell it which port to use. Note: Keep in mind that on a single computer, only 1 application at a time can use a port. So you cannot have two programs running simultaneously on port 80. You’d have to stop one before starting another.

Startup.cs

While Program.cs gets the ball rolling, Startup.cs defines what the ball looks like. This class defines which settings file(s) to pull in, which services to initiate (MVC and Database in this case), and calls the starting processes for the services defined in the previous step.

This also defines the default routing between URL input and back end controllers and methods. Default .NET MVC works like:

controller/method/optional_id

Controllers are found in the Controllers folder, with an appropriately named Method on that class, and then optionally a method parameter called “id”. This can be of any type, though usually is an int or string.

Controllers/ListController.cs

This file/class defines the heart of the To Do list interaction. This is where the Viewing, Editing, and toggling of items happens.

DB/ListDbContext.cs

This defines the lowest level of interaction we will have with the database, utilizing the EntityFramework to convert to different types of database actions with no extra code on our part.

DB/ListDbManager.cs

In here, we step up a level, and actually start doing things against the database. These methods allow us to pull info out of the database, and save changes back.

Views/Shared/_Layout.cshtml

This is the central view, which sets up all of the HTML that is used on every single page in the site. All other content is fitted inside of this page.

Views/Shared/PartialListOfLists.cshtml

I created this share view, as I noticed that the home page, and the default List view were showing nearly identical pieces of information. This way, I can write the interface once, and share it anywhere on the site.

Views/List/*

This is where the various pages are that display what the back end controller has put together. These pages are read on the fly, which means that while you are tweaking the look and feel of things, you can start a debug session, which compiles your *.cs files, but you can keep updating/saving the .cshtml files and reloading the browser page without recompiling. (this saves huge amounts of time while developing)

 

Final Notes

Since you forked the project, don’t be afraid to commit regularly, and push your work up to the Github server. This can be done with Github Desktop, or through a button on the left side in Visual Studio Code. It doesn’t cost anything, and can save you later if you accidentally delete a file, or a section of code and then hit “save”.

If you happen to make an improvement you’d like to share with the Developer Gym community, you can always put together a Pull Request! This is how open source communities grow, everyone working together. Also, when you commit and push up to Github, go to your profile page, and it gives you a graph, showing how often you save work up to the server. This is a great visual for keeping track of when you have been writing code.

Questions, comments, concerns? Email Me! Comment below! Raise an issue on Github!

 

References:

Leave a Reply

Your email address will not be published. Required fields are marked *