Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:14Length:2.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Creating the Soundboard Project

Let's create our course project! In this course we'll be building a simple message board app. We’ll start in this lesson by creating the project, and we'll also go over the aspects of an MVC application.

2.2 Creating the Soundboard Project

We are going to start to writing a very simple application called SoundBoard. It's a place where users can post and edit messages. Now, these messages are going to be visible to everybody, so whoever comes to the website will see all of the messages. But of course, only a user can edit their own posts. So in addition to the basic stuff that we would do in any web application, such as getting data from the user, validating that data, storing the data within the database, retrieving the data, and viewing it within the browser, we are also going to briefly touch on user authentication as well as a little bit of permissions because we want only a user to edit their own posts. And then later on we will add some Web API features so that not only will we be able to access our website through the browser, but we could also connect with some other clients and get JSON data back. So let's start by creating an ASP.NETweb application, let's just call it SoundBoard, and if you wanted to add source control, feel free to do so, that's usually a good idea, but I'm not going to in this case. And we want to create a website. And the reason why I'm starting with a website is because that gives us everything we need to get started. We have identity, we have entity framework, we have the MVC framework, of course, that's already set up, and we will be able to use Web API as well. Now, this is going to be an application using the MVC pattern, and if you're not familiar with MVC, well don't worry. It stands for model view controller, and it's a programming pattern that basically divides an application into three major parts, the model, the view, and the controller. The model is primarily the data. There are a few other things categorized under model, but it's primarily the data that we are going to be working with, either getting the data from the user or getting the data from the database. And then there's the view, which is primarily responsible for displaying the data to the user. And then we have the controller, which is essentially the glue for our application. It's going to interface with services to work with our data. It will get the data, and then pass that on to the view. Of course, that's an oversimplification of the MVC pattern, but that's the basic gist. Let's get started by looking at a few folders in our solution. We'll start with the Models folder. This is where we typically put things related to the model, or the M in MVC. So, the things inside of the Models folder are typically related to data, or they are representing data in some way, shape, or form. Like for example, there is this IdentityModels file that has an ApplicationUser class. This represents an application user, the user of our application. But we also have this ApplicationDbContext which is more involved with interfacing with a database. I personally put things interacting with a database inside of a Data folder, as opposed to the Models folder, but some people put it in the Models, and that's okay. Now, we don't have to use this Models folder if we don't want to. You can see that it puts everything inside of a Models namespace. We don't have to use that namespace either. This is just here by convention. The next folder is called Views. This is the V in MVC, and the Views folder is kind of important because this is where we have all the files that are used for generating HTML output. ASP.NET MVC uses a view engine called Razor, and it looks for the views inside of this view folder. So as far as the view engine is concerned, we have to use this Views folder. However, we can use any view engine that we want to. There are third-party view engines available that we can plug into our application and use instead of the Razor view engine. But, I personally like the Razor view engine, so that's what we are going to be using. Plus, [LAUGH] that's what comes with ASP.NET. But as you can see, there are a variety of files inside of these sub-folders. We have Account, Home, Manage, Shared, and, well, that's it. Now, Account, Home, and Manage are all related to the controllers, which we will look at right now. We have this folder called Controllers, and this is where we put our controllers. We have AccountController, we have HomeController, and ManageController. Now, if you notice, those have the same name, or at least very similar names, to the folder inside of the Views folder, Account, Home, and Manage. So by convention, our controllers end with the name Controller. So if you take Controller out, then we have Account, we have Home, and we have Manage. So the MVC framework is going to be looking for controllers that end with Controller. It's going to try to find the views related to that controller inside of the Views folder, and with the name of the controller minus the term controller. Now if that's clear as mud, don't worry, because you're going to understand all of this stuff by the end of this course. Well, let's create a controller. Now, a controller is responsible for controlling a very specific part of our application. Like for example, this AccountController is responsible for everything regarding the user's account. So user registration, logging in, logging out. Those types of things are done inside of the AccountController. The HomeController is responsible for things related to the home of our application. So this is displaying the front page of our applications. It's also displaying the abouts, the contact pages, as well as the error page. So anything related to the home of our application is done by the HomeController. We want a controller for working with and managing messages. So let's create a new controller by right clicking on the Controllers folder. We want to add a new item, and we want to choose MVC controller class. And let's call this MessageController. This is going to create a new class that inherits from an abstract class called Controller, and this abstract class gives us a lot of tools that we need in order to actually do the work that we need to do inside of our controller. Now, inside of our controller we have a bunch of methods. We have an Index method, and these methods are called action methods. You can see this this returns a type of IActionResult. Now, this is very important because in ASP.NET MVC application is very different from a typical application that serves files off of the file system. For example, lets go back to the HomeController, and let's run the application. We're going to see the home page, and it's going to look just like a home page. It has HTML, we're going to see images and all of this other stuff. We can right-click, view the source and there's what's being displayed within the browser. Now we are not actually seeing the result of serving a file off of the file system. We are making a request for the root of our application. And the MVC framework knows to route that request to our HomeController and it's going to execute this Index action method. So whenever this method executes, we can see that there's really nothing going on inside of this method except for this statement for returning the view. That is kickstarting the Razor view engine in order to generate the HTML output that is then sent back to the client. So there's no file that's being requested here. The request is being caught by the application, and it's being routed to a controller, and an action method on that controller. So if we go to the About page, just click on About. That is actually sending the request for Home/About. And that request is being routed to this About method. So since we are debugging this application, we can set a break point here. We can go back, we can refresh and we hit this break point. And we can see this view. If we go to the Views folder and then Home and About, we can see the content that is going to be sent to the browser. Of course, we're not seeing the entire HTML here, because the razor view engine uses something called layout pages, which is where we put the layout of our website, and then our content pages, which is what we have here, uses that layout page for the remainder of the HTML. And we will talk about the layout page and all of that stuff later on. But if we go and, well, first we need to continue. And whenever we see the result in the browser, we now know that this is the result of calling a method on our controller. And so in the next lesson we are going to add the ability to create a new message. And we will do so by writing two methods. The first will be, for get requests, so that we can display the form in the browser. The second method will handle post requests so that we can get the data from the form and then do something with that data.

Back to the top