Getting Started in ASP.NET

Why an Introduction to ASP.NET?

In doing ASP.NET development, I've found that some tutorials out there for getting started on ASP.NET are
a) too complex, and
b) don't go over the basics of how it works

If you're going to use ASP.NET, you need to be able to understand it!

In this tutorial, I'd like to give you a basic understanding of how ASP.NET works and what you're doing before you get started putting your projects on the web.

I'll go over getting started quickly by using templates in Visual Studio Community 2022.

This means that it'll be for Windows. If you're not using Windows, you can still follow along to get a general idea of how to create a REST API endpoint in .NET Core. For more on what a REST (representational state transfer) API (application programming interface) is, see here: https://www.redhat.com/en/topics/api/what-is-a-rest-api

Let's begin!

Setting Up an ASP Service

I'm going to start off by making a simple ASP (active server pages) service using a Controller. I want to make sure you understand how Controllers work before moving fully on to MVC (Model View Controller). MVC is a design pattern that separates the user-interface (view) from the data (model) and the code (controller). Take a look at this blog post for more information on MVC: https://dotnet.microsoft.com/en-us/apps/aspnet/mvc

Create Your Project

In Visual Studio (I'm using Community Edition 2022), either select "Create a new project" from the splash page, or click File => New => Project.

On the next page, take a look at the templates and select ASP.NET Core Web API. Note that this uses .NET Core and not the .NET Framework, as Core is the .NET cross-platform library.

Enter your project name. This can be anything you'd like, but in this tutorial I'll be calling it MeowWorld.

By default, this location will be in your Visual Studio Projects folder, but feel free to change this if you'd like to store the tutorial someplace else.

We want to create a new solution (a solution is like a master project that holds the different projects you'll be working with) and we want to name the solution something.

By default, the solution is named the same as your project. This is perfectly fine, so leave it as is. You're welcome to rename it if you'd like.

You can check "Place solution and project in the same directory" to help keep things organized. This is not important if you know what you're doing, but it can help with keeping things organized.

Once you are happy with all the settings, click Next to move onto the next step.

Now, select your Framework. The default option is .NET 6.0 (Long Term Support). I recommend going with the default options. Click Create.

If you build and run the project right now by clicking the green arrow that says MeowWorld, it will open a browser window (or tab) and take you to a default sample project. We'll be changing that, shortly.

Close your browser or stop your project by pressing the red square button (which says "Stop Debugging" when you mouse-over) so that you can edit it.

Editing Your Controller

In the Solution Explorer on the right, go to MeowWorld Solution => Controllers => WeatherForecastController.cs and open it (this is the sample project which was created by default).

Notice how the methods have an Http... attribute associated with them. Http attributes include HttpGet, HttpPost, HttpPut, and HttpDelete. HttpGet is the typical one used for accessing a web page. Arguments can be passed to each method as query string variables (or route data -- more on routes later).

Right-Click on the Controllers folder, then Add => Controller, select MVC Controller - Empty, click Add, and create a new class called CatController.cs, and click Add again.

Now, time for some coding! Make sure that the file says using Microsoft.AspNetCore.Mvc -- this adds a library to help keep your code neat.

Add the following Meow method to your class, so that it looks like this:

using Microsoft.AspNetCore.Mvc;

namespace MeowWorld.Controllers
{
    public class CatController : Controller
    {
        [HttpGet("feline/bill")]
        public string Meow()
        {
            return "Meow!";
        }
    }
}

Now run the code. In your browser, append /feline/bill/ to localhost:##### to see your work in action.

Next, change HttpGet("/feline/bill") to read HttpGet("cat/bill"), and change the name of the method from pubic string Meow() to public string Bill().

Now let's add another cat! Below the method for Bill, add a method for Steve:

[HttpGet("cat/steve")]
        public string Steve()
        {
            return "Purr.";
        }

Now you can run the code and open your browser to: .../cat/steve/

We can keep adding cats, but creating a method for each one can become tedious, so let's change that! We can use an argument for the cat name that will be passed as a query string. So our code can now look like this:

[HttpGet("cat")]
        public string Cat(string cat)
        {
            switch(cat)
            {
                case "bill":
                    return "Meow!";
                case "steve":
                    return "Purr.";
            }
            return String.Empty;
        }

Now run the code and direct your browser to: .../cat?cat=bill and then .../cat?cat=steve
Now, we have the cats in the same method, but the URL is a bit cluttered. This is where passing variables through routes comes in. All we need is a small change to the code:

[HttpGet("cat/{cat}")]

And now we can go back to using: .../cat/bill and .../cat/steve.

That's it for the first part of this introduction. In making these two paths for the cats and what they say, you've gotten started in making an ASP.NET web service with two API calls! The next part will talk about getting and setting data, and how sessions work, as we expand the cat horde.