FREELessons: 10Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Project Layout and Overview

The fastest way to create a new project is with a scaffolding generator. So in this lesson, we’ll use Yeoman and the ASP.NET Core generators to create a new ASP.NET Core project. Then I’ll take you through a tour of the project.

Related Links

2.3 Project Layout and Overview

In the previous lesson, we created an app from scratch using the builtin .NET command line tools. And while our application worked, it really wasn't very useful. And there's nothing stopping you from taking that approach from creating an application from scratch. But doing so, you're going to be in a world of hurt because it doesn't matter if you're going to use the MVC framework or some other third party framework. You're going to have to write a lot of code in order to set up what your framework needs, in order to run correctly. So thankfully, that's where tools like Yeoman come into play. Because people can create generators to allow us to get up and running with our framework of choice. So that's where that ASP.NET generators comes into play. At the command line, if we type yo aspnet, we're going to be greeted with what is essentially a wizard. We get to choose what type of application that we want to create and then a few other options. And then we're going to have a working app. So we could start with a Empty Web Application which would give us MVC and a few other things but not really anything else. So if we wanted to start with that, we could choose the Empty Web Application option. I don't really know what the console application would give us as opposed to running .NET new. I've never tried the console app, so let's move on. We have the Web Application option. So if we wanted a completely working application with the addition of user authentication and authorization, then we could choose the Web Application option. But if we wanted a web app that didn't have user Membership and Authorization then the Web Application Basic would be a good option to choose from. And that's what we are going to do, so let's choose that. We get to choose our UI framework, which I will choose Bootstrap and then simply name our applications. So I'm going to call this secondapp. And you can see that it's going to generate our application. It's pulling in Bootstrap in jquery, so that we have the stuff that we need for the client side. But it's also going to give us everything that we need on the server side as well. So let's cd into secondapp. Let's fire up our Code Editor and then we will take a look at this project. So in the previous lesson, we had a file called Program.cs and we have the same thing here. So if we open up that file. Let's go ahead and restore all of the packages here. We're going to see something similar, in that it's building a web host and it's using Kestrel and it's building. But you can see that there are other options going into this. First of all is, is this ConfigurationBuilder. So this is building a config that is then going to be used by the host. And then you can see, there's this UseStartup method and then the type argument is Startup. So there's a class called Startup inside of the Startup.cs which is going to contain all of the code for starting up our application. And then the build method and then run. So, it's somewhat similar to what we wrote in the previous lesson but it's a lot more advanced as well. So let's look at the startup. And we're not going to spend a whole lot of time here but you can see that there's a lot going into setting up an MVC application. Inside of the constructor, there's this ConfigurationBuilder and you can see that it's pulling in a file called appsettings.json. So if we open up that file, these settings are being used by the application. And we could also come in here and add in our own settings if we wanted to. We would have to write the code that would read those properties but we could do that. But then there's a few other methods for configuring our services. And you can see that it is adding the MVC framework services. And then there's a configure method that's configuring the different pieces of our applications, such as the loggerFactory. If our environment is development, then it is setting up the developerExceptionPage and it's using BrowserLink. Which is a cool little feature in Visual Studio and in Visual Studio code, so that changes that we make to CSS, minor things like that, will automatically be updated in the browser. So that we wouldn't have to refresh the page. It's also setting up our application to use StaticFiles which is not enabled by default. So if you wanted to serve images, CSS files, JavaScript files, things like that, it would not work unless if the StaticFiles were set up. So that's what the UseStaticFiles are for. And then finally, is the routing table for our MVC application. Now this is important because an MVC application doesn't serve StaticFiles. Now it does as far as resources are concerned, like CSS and images and so on. But as far as the content of the things that users are actually going to be requesting, those aren't the result of just reading a file and returning that file. These are the result of executing a method on a class. So, in order for our application to know how to handle a request, we have to tell it how to route a request to a method on a class. And that's what this routing table is for. In this case, our routing table just has one route. It's called default and each route has to have a unique name. And then a route has to have a template. This is the URL template. And when our application receives a request, the routing engine is going to take the URL of that request and it's going to try to find a match between all of our routing templates. And if it finds a match, then it will route that request to the appropriate method on the appropriate class. But if it doesn't find the match, then it's a 404. Now we're not going to talk much about routing in this lesson. So let's move on and a look at our Controllers folder. Inside of this folder, we have a file called HomeController. And this is a class. It inherits from Controller and just about every Controller that you write is going to inherit from Controller. Just because it gives you a variety of tools that you will need to work with the request basically. Even if you write your own base Controller, it will probably inherit from Controller. Now you're going to see several methods here, there's Index, About, Contact, and Error. These are all methods that would handle a request. And you can tell by their return type. These return an IActionResult. So we would call these action methods. So if we make a request for the About method, then this About method is going to execute. If we make a request for Contact, this Contact method is going to execute. If we make a request for Index, that will, of course, execute as well. So let's see this in action. Let's say dotnet run, and then we will just hop on over to our browser and look at that. Which I already have up, look at that. So if we go to localhost:5000, then we're going to see the index page. Now, the way that our routing table is setup, if you make a request for essentially the homepage of our application, then that's going to default to the Index method on the HomeController. So what we see here, is actually the result of calling this Index method. So if we make a request for About, then we are going to see the About page. And what we see here is the result of calling the About method. And you can see that there's this message here. It says, Your application description page. If we look at that here in the browser, we see, Your application description page. If you go to Contact, this says Contact Us. If we look at the code, then the message is Contact Us. So we could actually change this. We could say, Hello World. But in doing this, we will need to restart our applications. So let's go to the command line, let's Ctrl+C out. And then dotnet run again. Now here's actually something that we could use called a watcher, that would watch for any significant changes to our application. And if it needed to recompile, then it would recompile automatically. And we will look at that later on. But now, if we go back to the browser and refresh the page, we're going to see Hello World here where Contact Us was. So you can begin to see the relationship between the requests that we make and how that gets routed to a method on a Controller. But whenever we talk about routing in detail, then that will make a lot more sense to you. Next up is the Views folder and this is where all of our Views live. And you will find some subdirectories underneath Views. In our case, we have Home and then we have Shared. Now, this Home folder is where all of the Views for our HomeController live. So if we look at the HomeController, we see Index, About, and Contact. And these all return View. So inside of the Home folder, we see Index, About, and Contact. These are the Views for those action methods. And only the HomeController has access to these Views. So if we write another Controller called a Product Controller, that Controller cannot access these Views, at least by default. So the Views that we would use for a Product Controller would then be inside of a subfolder called Product. And then we would put all of those Views inside of there. Now, this Shared folder is rather special. For any of the Views that we want to share between multiple Controllers, we would put those Views inside of Shared. So here you can see the Error View. And the HomeController has an Error action method. So the Error View inside of Shared, is the View that would be used for this Error action Controller. Unless, if we had an Error View inside of Home, in which case, it would default to there. So the Views for Controller are going to default to the corresponding folder. And if they don't exist there, then the View engine is going to try to find those Views inside of Shared. And if it doesn't find it there, then you're going to get an Error. Now, there is this _layout.cshtml file. This is the layout of our application. So all of our Views are using this layout page for the markup that's used between all of our pages. So this is essentially our template. And then our Views are rendered here within this RenderBody call. But we will talk about that more whenever we look at Views in more depth. Now the last thing that I want to look at is this wwwroot folder. This is the public folder of our application, so this is where we would put all of our static resources, such as CSS, images, JavaScript, and things like that. So if you want something to be directly accessible by the client, then you would put that inside of wwwroot. If not, if you had some JSON or XML files or any other data files that you wanted to be accessible to your application but not be able to be directly requested. Then you would put that outside of the wwwroot folder. So that means everything else, the Controllers, the Views, and of course, all of our JSON files are private to the application. They cannot be directly requested by the browser. And so, that's just a brief overview of ASP.NET Core MVC applications. Now in the next lesson, we are going to look at routing. You're going to learn the basics of how routing works in the framework and we're going to write a couple of Controllers as well.

Back to the top