Before we start

You're here (hopefully) because you want to cut to the chase and learn how to build a real application using ASP.NET Core MVC.

In order to do that, you're going to need a few things.

Yep, this is the boring but necessary bit.

Fear not, you'll be writing and running code in no time.

Visual Studio

You don't have to use Visual Studio to write ASP.NET Core MVC web apps and in recent years a few alternatives have emerged.

For example, you can write and run .NET Core apps using Visual Studio Code and there's a slightly different version of Visual Studio for the Mac (called... wait for it... "Visual Studio for Mac"!).

But when you're just getting started, Visual Studio (for Windows) remains a common and popular choice and is what we'll be using for the rest of the course.

The good news is there's a free version for you to download and use (with certain caveats, which you may wish to take a look at, but don't need to worry about if you're just learning).

Download

Go to the Visual Studio community homepage and click the Download Visual Studio button and the installer for a fully functional version of Studio will download itself to your computer.

Choose the right options

When you run the installer, it will take a moment to download the actual Visual Studio Installer.

Once that loads, you'll get a handy screen that gives you lots of choices.

For this course, you mainly need the ASP.NET and web development components, but it's nice to know you have choices if you ever decide to get into 3D Games or Mobile Development :-)

It's also worth selecting .NET desktop development, specifically because it will bring in the SQL Server Express 2016 LocalDB which you can use as a development database server in the future.

So make sure you've at least ticked the checkbox next to ASP.NET and web development, click the Install button and you're all set.

1573054598299

Just in case it's changed in the meantime, this course has been written using .NET Core 3.0 (and the associated development tools).

If anything doesn't work as you'd expect (and especially if you suspect it's due to an updated version of .NET Core) hit reply to any of the emails from me and let me know.

Sit back and relax while the VS Installer does its thing.

A Side Project

Over the course of the next few lessons, we're going to build a Trello clone.

If you're not familiar with Trello, it's basically an online kanban board, useful for managing your work.

You can create one or more kanban boards.

Each board can have any number of columns and cards.

A card represents a task/feature you need to work on.

When you add a card it typically starts off in the left column (often called "Todo") and then moves across the board as you work on it.

Here's a sneak peek of where we'll end up.

img

I should probably say at this point, I'm no UI expert. Thankfully you don't need to be to learn how ASP.NET MVC works.

What are the features?

hint: the clue's in the screenshot ;-)

One of the challenges when building software is that moment, right at the beginning, where you start with a blank piece of paper and no code. It feels like all the work is ahead of you and you're not entirely sure where to start.

This is especially true when you're also trying to learn a new programming language/framework at the same time.

So, before we start (and I promise, the code follows shortly) it's worth breaking this down into what features we want to build.

The smaller the better. What we're aiming for, are features you can build in an hour or so. That way, you get to learn ASP.NET Core whilst seeing your efforts come to fruition in hours, not days or weeks.

There's no better motivator than seeing the application spring to life in front of your eyes.

So, with a little bit of domain knowledge (and studying other examples like Trello for clues) we can start to think about what our users will want/need to do.

The easiest way to do this is to sit down and brainstorm all the possible "tasks" our users are going to want to undertake with an online kanban board application.

  • See list of boards
  • Add board
  • View board
  • Add column (to a board)
  • Add card (to a board)
  • Change card title
  • Move card to another column

And of course there are plenty more.

When you come to your own pet projects I highly recommend going through a brainstorming process, where you create a list (just like this one) of the key "things your users want/need to do".

It really helps get your imagination going and gives you a list which you can then prioritise, so you know what to build first.

What's in a name?

There are only two hard things in Computer Science: cache invalidation and naming things Phil Karlton

If you've ever found yourself arguing (often with yourself) about what to call that method/class/view then you know how easy it is to get hung up on what something's called.

So more on a whim than for any good reason I've started referring to this Trello clone as Donatello.

Depending on your age/interests, your mind has either jumped to the Italian Renaissance sculptor, or the Teenage Mutant Ninja Turtles.

img

photo credit: W10002 Wondercon 2016 - Donatello via photopin (license)

Either way it doesn't really matter, but that's the name we'll be using in all the code samples etc.

It all starts with a blank screen (project)

We can't build much without a project so let's get that going first.

You'll typically create at least one project per application. It provides a means of grouping together all of the code for your application, as well as indicating what third party libraries your project might need (often referenced via the ASP.NET package manager - NuGet).

Visual Studio enables you to have multiple projects for your application which are themselves grouped together within a solution.

When you start Visual Studio you'll find yourself staring at this screen...

1573054769300

(You can also get back to it at any time from within VS, by going File -> New -> Project)

You'll find yourself staring at a big ol' list of possibilites.

We want to Create a new project...

Then find the ASP.NET Core Web Application template...

1573054883696

With that selected, hit Next and you'll be prompted for some more details.

Pick a name etc. then click OK.

In case you don't feel you had enough decisions to make in that last window, now you get a whole load more!

1573054993491

You might want to explore some of these options at a later date. For example, if you're interested in building Single Page Applications (SPAs) on top of ASP.NET Core, you could use one of the starter templates e.g. Angular.

In our case, we want to start with a minimal project which we can add to as we please. So select Empty from the list.

Also make sure you've got .NET Core and ASP.NET Core 3.0 selected at the top.

At this point we don't want to worry about Authentication and definitely don't want to complicate things by introducing Docker, so you can just hit the Create button.

Hello World

It's always a good idea to check that things are working properly, even when your app is as simple as this one.

Hit CTRL + F5 and you might run into this warning...

1573056834947

If so, (this is in Firefox), hit Advanced then Accept the Risk and Continue.

This happens because ASP.NET core uses a self-signed certificate locally, so you can test your site using https. However, because it's self-signed, Chrome, Firefox etc. will warn you that the certificate is self-signed.

With that out of the way, you should see this extremely exciting web site spring into life in your browser.

1573056969472

That's the last Hello World you'll see whilst building this project!

You're all set

Now you're all set to get started with the fun bit, building features.

We'll be starting with the list of boards.