The Anatomy of an MVC Project

When Visual Studio set up our project for 0:00 us, it created a number of files organized into a set of folders. 0:02 When you're first learning MVC, it's helpful to familiarize yourself 0:07 with the overall structure and organization of your project. 0:10 Before we do that, let's talk a little bit about the MVC design pattern. 0:14 Well before we do that, let's talk in general about design patterns. 0:19 Over the decades that developers have been creating software, 0:23 they noticed a set of problems that kept coming up time and time again, 0:26 some of these problems were so common that developers realized it would be helpful to 0:30 describe their solutions in very general terms and then share them with others. 0:34 That way developers everywhere, regardless of what specific 0:40 technology they were using, could learn and benefit from these efforts. 0:43 These solutions often represented as written descriptions, or 0:48 templates, are referred to as design patterns. 0:52 So, what is in MVC? 0:56 MVC is a design pattern. 0:59 In fact, MVC is a very common design pattern 1:01 used by developers to create all sorts of applications including websites and 1:04 mobile applications like iPhone or Android apps. 1:09 Let's take a closer look. 1:13 MVC is an acronym that stands for Model-View-Controller. 1:15 For now, think of the model as the data in your website, 1:19 the view is the visual part, and the controller as the coordinator. 1:22 When users browse to a specific page in our website, 1:26 the controller is responsible for coordinating what specific actions 1:29 need to be performed in order to return a response to that user request. 1:33 At this point, 1:38 don't worry if you don't fully understand how the MVC pattern works. 1:39 For this workshop, it's good enough to know that there's something 1:43 called a model, a view, and a controller. 1:46 In future courses, we'll explore the MVC design pattern in greater detail. 1:49 Let's take a look at the project that Visual Studio created for us. 1:55 Within Visual Studio, 1:59 we can use the Solution Explorer panel to see our project's folders and files. 2:00 If you're not able to see this panel, 2:05 you can display it by selecting the View, Solution menu item. 2:06 We can make more room for 2:12 the Solution Explorer by clicking the pin here on the Properties panel, 2:13 and while we're at it, let's go ahead and collapse the output panel, there. 2:17 Now we have more room to see the folders and files in our project. 2:22 Let's start by looking at the heart of our website. 2:27 The Controllers folder contains all the files for our controllers. 2:29 If we double-click it to expand it, 2:33 we see that we have just one controller, our Home Controller. 2:37 The Models folder contains all the files for our models. 2:41 Hmm, that's interesting. 2:46 There aren't any files here. 2:47 Remember though, models are used to represent data within our website. 2:49 But our website doesn't work with any data, at least for now. 2:53 So, the Models folder is empty. 2:57 The Views folder contains all the files for 3:00 our views, organized into folders, one folder for each of our controllers. 3:02 Remember, we just have the Home Controller now, so 3:08 that means we have just the one Home sub folder. 3:11 Looking inside the Home sub folder, 3:15 we can see there are three files, About.cshtml, 3:18 Contact.cshtml, and Index.cshtml. 3:23 We'll take a closer look at these files in a bit. 3:27 The Shared folder contains views that are shared across our controllers. 3:31 The _ Layout.cshtml file, often referred to as the layout or master page, 3:36 is used to specify the overall look and feel for every page on our website. 3:41 Later in this workshop, we'll be making changes to this file. 3:47 Most websites have CSS and JavaScript files, and ours is no exception. 3:51 The Content folder contains all of our website's CSS files, 3:55 while the Scripts folder contains all of our website's JavaScript files. 4:00 For now, we're going to ignore everything else that we see here, but 4:04 don't worry, we'll be taking a closer look in future courses, so 4:08 in time, you'll be familiar with every part of a MVC project. 4:12 Not every aspect of our project's folder structure is required by ASP.NET MVC. 4:16 That being said, the majority of projects will look very similar to, 4:22 if not exactly like, our project's folder structure. 4:26 Following the standard project structure makes it easier for 4:29 other developers to quickly find what they're looking for. 4:32 Now that we're more familiar with the parts of our project, 4:36 let's work on adding a new page to our website. 4:39