Start a free Courses trial
to watch this video
In this workshop, we'll start with an overview of ASP.NET MVC and then use Visual Studio Community to create a website project. We'll also do a quick review of the MVC design pattern and the structure of the project that Visual Studio created for us. Then we'll add a new page to our website and see how to update our menu and content. Lastly, we'll wrap up the workshop by talking about your next steps with learning C# and ASP.NET.
Step: Introduction
Here are some Treehouse courses and workshops that you might find helpful to complete before viewing this workshop.
- Introduction to Visual Studio (Workshop)
- C# Basics (Course)
- Introduction to HTML and CSS (Course)
- Bootstrap 4 Basics (Course)
ASP.NET on Mac OS X and Linux
Prior to the release of ASP.NET Core on June 2016, the only way to develop and run ASP.NET websites on a Mac or Linux computer was to install and use an open source version of the .NET Framework known as Mono. With the release of ASP.NET Core, you can now develop and run ASP.NET websites using .NET Core.
For more information about ASP.NET Core, see these resources:
For more information about Mono, see these resources:
- About Mono
- Installing Mono on Mac OS X
- Installing Mono on Linux
- Running ASP.NET Applications Using Mono
Step: Creating a Project
If you want to learn more about how to use GitHub with Visual Studio, be sure to check out this workshop.
Deploying Your Website
If you want to learn how to deploy your ASP.NET MVC website to the cloud, check out these resources.
To deploy your website to a hosting provider, check out your hosting provider's support pages for instructions specific to that provider.
Code Editors
Code editors are a great lightweight option for writing code in a variety of languages, including HTML, CSS, and JavaScript. Here are links to some popular options.
*Important Note About Visual Studio Code: Even though the name contains the words "Visual Studio", Visual Studio Code is not the same application as Visual Studio Community. Visual Studio Code is a code editor that can be used to write HTML, CSS, and JavaScript (and more). It cannot be used to develop ASP.NET 4.x applications.
Step: Running Your Website
For more information about debugging, profiling, and build configurations in Visual Studio check out these articles.
- Debugging in Visual Studio
- Visual Studio 2015 - Analyze Performance While Debugging in Visual Studio 2015
- Understanding Build Configurations
Keyboard Shortcuts
- F5 - Start debugging (i.e. build and run your website/project)
Step: The Anatomy of an MVC Project
For more information about the MVC design pattern, see this Microsoft Developer Network (MSDN) article.
If you'd like to learn more about HTML, CSS, or JavaScript, be sure to check out these Treehouse courses.
Step: Overview of URL Routing
For more information about how the internet works or HTTP, be sure to check out these Treehouse courses.
If you'd like to learn more about ASP.NET MVC Routing, check out this tutorial on the official ASP.NET website.
Step: Adding a Page
If you'd like to learn more about C# be sure to check out these Treehouse courses.
More information can also be found on Microsoft's Developer Network (MSDN).
For more information on Razor, see the following tutorial on the official ASP.NET website.
Keyboard Shortcuts
- F5 - Start debugging (i.e. build and run your website/project)
- Ctrl + S - Save Current File
Step: Adding a Menu Item
For more information about Chrome's Developer Tools see:
Keyboard Shortcuts
- F5 - Start debugging (i.e. build and run your website/project)
- Ctrl + Shift + F - Find in Files
- Ctrl + S - Save Current File
Step: Updating Content
We're just scratching the surface of what you can do with ASP.NET MVC views. Check out the official ASP.NET site for more information about views.
If you get stuck or want to help others, be sure to check out the Treehouse Community.
Twitter Bootstrap
Here are some great resources for learning more about Twitter Bootstrap.
Keyboard Shortcuts
Visual Studio
- F5 - Start debugging (i.e. build and run your website/project)
- Ctrl + Shift + F - Find in Files
- Ctrl + S - Save Current File
Google Chrome
- Ctrl + R - Refresh the current page
General
- Ctrl + A - Select all
- Ctrl + C - Copy to the clipboard
- Ctrl + V - Paste from the clipboard
Step: Wrap Up
You can download the files for my completed Visual Studio project here:
http://treehouse-code-samples.s3.amazonaws.com/workshops/creating-your-first-aspnet-mvc-website.zip
You can view my completed website online here:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[MUSIC] 0:00 Hi, My name is James and welcome to this free workshop. 0:04 I'm excited to show you how to get your first ASP.net MVC website up and running. 0:08 To sign up for a free trial with treehouse and 0:14 get access to our full library of content, click the Free Trial button on this page. 0:16 At the end of this workshop we'll talk about your next steps with learning C # 0:22 and ASP.NET at Treehouse. 0:26 ASP.NET MVC is a popular open source web framework developed by Microsoft. 0:28 ASP.net code runs on a server so we refer to it as a server side framework. 0:34 This is in contrast to JavaScript code that runs in your browser. 0:41 The MVC acronym tells us the ASP.net MVC framework 0:45 uses the model view controller design pattern. 0:49 The MVC design pattern is an important part of the ASP.net MVC framework. 0:52 So much so that it's common to refer to ASP.net MVC as just MVC, 0:58 which is what I'll be doing throughout the rest of this workshop. 1:03 When learning it's often helpful to quickly try something out 1:07 before you set about learning it in detail. 1:11 In the videos that follow we'll be kicking the tires on Visual Studio 1:13 as we walk through the steps to create an MVC website. 1:18 Visual Studio is a powerful development tool 1:21 that is used by developers all over the world to create and 1:24 maintain a wide variety of software including websites and web applications. 1:28 Even with all that power, Visual Studio makes it easy to create an MVC website. 1:33 In fact, I think you'll be surprised at just how easy it is. 1:37 Visual Studio currently only runs on Windows computers. 1:42 If you want to do ASP.net development on a Mac or Linux computer, check out 1:46 the teacher’s notes for resources on how to get started on those platforms. 1:50 As we build our website, we're going to intentionally keep things simple. 1:55 To start with our website will include Home, About, and Contact pages. 1:59 Later we'll walk through the steps to add a new page. 2:04 So even though our website will start off simple, that won't prevent us from using 2:07 it as a jumping off point for building something more complex. 2:12 We'll also be using Twitter's excellent CSS framework called Bootstrap. 2:16 Bootstrap provides us with a set of pre-built CSS styles for 2:20 styling elements like menus and buttons. 2:23 This will make it easy for us to create a great looking website. 2:27 If you're like me you'll really enjoy using Bootstrap. 2:30 Let's review what we'll be covering in this workshop. 2:34 We'll start by walking through the steps to create an MVC website 2:36 using Visual Studio. 2:40 Once we have our website created, we'll learn how to run our website so 2:42 that we can preview it in a browser. 2:45 Then we'll review the anatomy of our project 2:48 which will help us with our last item, how to add a page to our website. 2:50 We're going to cover concepts, that will likely be new to you. 2:55 Sometimes, I'm going to purposely not explain a concept in great detail. 2:58 Instead, we'll introduce the concept, give you a high level explanation and 3:02 ask that you be okay with not knowing all of the details, at least for now. 3:07 But don't worry, we'll get you there. 3:11 In later material we'll cover everything that you need to know to be a successful 3:14 ASP.net developer. 3:19 Before we get started let's review what you'll need 3:20 to get the most from this workshop. 3:23 First, you'll need to have Visual Studio community installed on a Windows PC. 3:26 If you haven't installed Visual Studio yet, check the teacher's notes for 3:31 a link that covers that process. 3:34 Secondly while it's not absolutely required, 3:37 having a basic understanding of C# and HTML will be helpful. 3:40 Again check the teachers notes for 3:45 links to Treehouse courses that cover both of these topics. 3:46 Are you ready to create your first MVC website? 3:50 Let's get started. 3:54 [MUSIC] 3:55 For first time users, Visual Studio can be a little overwhelming. 4:00 There's a lot happening to the user interface, especially when compared to 4:05 workspaces here a Treehouse, or other text editors like Sublime Text or Adam. 4:08 For now, we're going to just focus on the parts that we need and 4:13 ignore everything else. 4:17 Let's open Visual Studio and create our project. 4:19 To start the process, 4:24 click on the File>New>Project menu item in the top menu. 4:25 This opens up the new project dialog. 4:31 Using the tree view on the left hand side, 4:34 we can filter the available project templates by our language and platform. 4:36 We're interested in doing web development using C#, so let's select our language 4:41 Visual C# which was all ready selected, then our platform Web. 4:46 Now we're seeing just the project templates that are specific 4:51 to the Web platform. 4:54 The first and only item in the list that is be ASP.Net 4:56 web application project template is the one that we're looking for. 5:00 Go ahead and click it to select it. 5:03 Notice the panel on the right-hand side of the dialog for, Application Insights. 5:06 Application Insights is a powerful application profiling tool, but in 5:11 the spirit of keeping things simple make sure that this checkbox is not checked. 5:15 Let's take a closer look at this combo box near the top of the dialog. 5:21 If we open this combo box we'll see a list of the .NET 5:26 Framework versions that we currently have installed. 5:29 The .NET Framework is updated over time with new features and 5:31 bug fixes, so it's not unusual to have more than one version installed. 5:35 Wanna select the latest version in the list, which for me is 4.6.1, don't worry 5:40 if your version is newer than mine as .NET is constantly updating for the better. 5:47 Next, let's go to the bottom of the dialog and 5:52 change our project name to something other than WebApplication1, 5:55 how about about MyFirstWebsite. 6:00 Lets go ahead and leave the default values for the Location and 6:05 Solution name fields and make sure that the Create directory for solution check 6:08 box is checked and the Add to source control check box is not checked. 6:14 While we're not using a version control system for this workshop, 6:19 rest assured Visual Studio plays nicely with popular tools like get or GitHub. 6:22 For information about this, see the teacher's notes. 6:28 Click the OK button to continue to the next step. 6:31 Now, we're presented with the second step in the process, 6:35 the new ASP.NET project dialog. 6:39 Within the dialog, we can view and 6:42 select the specific ASP.NET project template that we want, for 6:44 now, let's focus in on the ASP.NET 4.6.1 Template section. 6:49 And in particular, the third item in the list, the MVC project template. 6:54 Future releases of ASP.NET might diverge significantly from the version I'm using 7:00 here, so make sure that you're using one of the 4.X templates. 7:05 On the right-hand side of the dialog we can specify the authentication options for 7:08 our project. 7:14 By default Visual Studio will include support for individual user accounts, 7:15 that allows users to register and login to our website. 7:20 Again let's keep things simple and remove that option. 7:24 To do that, click the Change Authentication button and 7:28 then select the No Authentication option, then click OK. 7:32 This will make it so 7:36 that anybody could visit our website if we were to publish it on a public server. 7:37 Lastly, make sure that the Host in the cloud checkbox listed underneath 7:42 the Microsoft Azure section is not selected. 7:46 While that deployment option would be helpful 7:49 if we were planning on deploying our application to the cloud, 7:52 that's not something we're going to cover in this workshop. 7:55 If you're interested in deploying your web to the cloud or 7:58 a hosting provider, again check the teacher's notes for a list of resources. 8:00 Now that we have all of our options set, go ahead and click the OK button. 8:05 Visual Studio will start to create our project displaying 8:10 the status in the dialog at the center of the screen. 8:14 Once the dialog is closed and we now have our project. 8:18 [NOISE] Seems like a lot of steps doesn't it? 8:22 The first time that you create a new project seem a little daunting, but 8:26 with a little practice, it will start to feel familiar in no time. 8:30 Let's take a short break, when we return we'll use Visual Studio to run our 8:34 website, so that we can preview it in a browser, see you in a bit. 8:38 [MUSIC] 8:42 Welcome back, we've got our project created now but 8:47 having a website that you haven't seen running in a browser and 8:50 that's as bad as useful as a book that you've never opened. 8:53 Luckily, Visual Studio makes it really easy, ready, let's do it. 8:57 To run a website, we'll click on the play button here at the top of the screen. 9:03 If you prefer to keep your hands on the keyboard like I do, 9:08 you can also press the F5 function key. 9:10 But before we do that, 9:14 let's click the little down triangle here on the right-hand side of the play button, 9:15 this displays a list of the installed browsers. 9:20 Using this list, we can select the browser that we want to use to run our website. 9:23 Let's select Google Chrome and then click the play button. 9:28 Visual Studio will build our website and 9:34 load it into the browser that we've selected. 9:36 Here's our website. 9:39 The first page that we see is our default page which for a website is the Home page. 9:40 Using the menu here in the header, we can click on About to 9:45 see the About page or Contact to see the contact page. 9:50 If we click on Application name that takes us back to the Home page. 9:55 Let's switch back to Visual Studio. 10:01 Notice how our environment has changed? 10:03 The output panel has been replaced with the Autos and 10:06 Call Stack panels, both of which are used for debugging. 10:09 Over here on the right the Properties panel has been hidden, 10:13 and we now have a Diagnostic Tools panel being displayed. 10:16 We're not gonna use the diagnostic tools during this workshop, so we can safely 10:20 collapse that panel by clicking the pin here in the right-hand corner, there. 10:24 To stop our application, click the Stop button. 10:30 Our website has stopped running and 10:33 our environment returns back to what it was before, wasn't that fun? 10:35 I always enjoy seeing my websites running in a browser for the first time. 10:40 Whenever you start a new website projects, it's helpful to get something up and 10:45 running as quickly as possible before you start making any other changes. 10:49 The process of making a small change or set of small changes 10:54 then running your website or application to review and test those changes, 10:58 forms the basis of what developers like to call intuitive or incremental development. 11:02 Doing development in this way, 11:09 it's easier to determine the source of a problem when something goes wrong. 11:11 Throughout your career as a developer, you'll literally do thousands and 11:15 thousands of iterations. 11:19 For our next iteration, 11:21 let's take a closer look at the folder structure of our project. 11:23 [MUSIC] 11:26 When Visual Studio set up our project for us, 11:31 it created a number of files organized into a set of folders. 11:34 When you're first learning MVC it's helpful to for militarize yourself with 11:37 the overall structure and organization of your project. 11:41 Before we do that, let's talk a little bit about the MVC design pattern. 11:45 Well before we do that, let's talk in general about design patterns. 11:50 Over the decades the developers have been creating software, 11:54 they noticed a set of problems that kept coming up time and time again. 11:57 Some of these problems were so 12:01 common, that developers realized it would be helpful to describe their solutions 12:02 in very general terms and then share them with others. 12:07 That way developers everywhere, regardless of what specific technology they were 12:11 using, could learn and benefit from these efforts. 12:15 These solutions often represented as written descriptions or 12:19 templates are referred to as design patterns. 12:23 So what is in MVC? 12:27 MVC is a design pattern, in fact in MVC is a very common design pattern. 12:29 Used by developers to create all sorts of applications including, websites and 12:35 mobile applications like iPhone or Android apps. 12:40 Let's take a closer look. 12:44 MVC is an acronym that stands for Model View Controller. 12:46 For now think of a model as the data in your website, 12:50 the view as the visual part, and the controller as the coordinator. 12:53 When users browse to a specific page in our website, 12:57 the controller is responsible for coordinating what specific actions 13:00 need to be performed in order to return a response to that user request. 13:04 At this point, 13:09 don't worry if you don't fully understand how the MVC pattern works. 13:10 For this workshop, it's good enough to know that there's something called 13:14 a model, a view and a controller. 13:17 In future courses we'll explore the MVC design pattern in greater detail. 13:20 Let's take a look at the project that Visual Studio created for us. 13:26 >> Within Visual Studio we can use the Solution Explorer panel 13:30 to see our projects folders and files. 13:33 If you're not able to see this panel, 13:35 you can display it by selecting the View>Solution menu item. 13:37 We can make more room for 13:43 the Solution Explorer by clicking the pin here on the Properties panel and 13:44 while we're at it, let's go ahead and collapse the output panel. 13:49 There, now, we have more room to see the folders and files in our project. 13:53 Let's start by looking at the heart of our website. 13:57 The Controllers folder contains all the files for our controllers. 14:00 If we double-click it to expand it, we see that we have just one controller, 14:05 our home controller. 14:10 The Models folder contains all the files for our models. 14:12 Hm, that's interesting, there aren't any files here, remember though, 14:16 models are used to represent data within our website. 14:21 But our website doesn't work with any data, at least for now. 14:24 So the Models folder is empty. 14:28 The Views folder contains all the files for 14:31 our views organized into folders, one folder for each of our controllers. 14:33 Remember we just have the Home controller now, so 14:39 that means we have just the one Home subfolder. 14:42 Looking inside the Home subfolder, 14:46 we can see there are three files About.cshtml, 14:50 Contact.cshtml, and Index.cshtml. 14:55 We'll take a closer look at these files in a bit. 14:59 The Shared folder contains views that are shared across our controllers. 15:02 The _Layout.cshtml file often referred to as a layout or master 15:07 page is used to specify the overall look and feel for every page on our website. 15:12 Later in this workshop, we'll be making changes to this file. 15:18 Most websites have CSS and JavaScript files and ours is no exception. 15:22 The content folder contains all of our website's CSS files 15:26 while the scripts folder contains all of our website's JavaScript files. 15:31 For now, we're going to ignore everything else that we see here. 15:35 But don't worry, we'll be taking a closer look in future courses. 15:39 So in time, you'll be familiar with every part of the MVC project. 15:42 Not every aspect of our projects folder structure is required by asp.net and MVC. 15:47 That being said, the majority of projects will look very similar to, 15:53 if not exactly like, our projects folder structure. 15:57 Following the standard project structure makes it easier for 16:00 other developers to quickly find what they're looking for. 16:03 Now that we're more familiar with the parts of our project, 16:07 let's work on adding a new page to our website. 16:10 [MUSIC] 16:12 Before we move on let's recap what we've covered so far. 16:17 We created an MVC website using Visual Studio. 16:21 Once we have created our website, we learned how to run it so 16:25 that we could preview it in a browser. 16:28 Then we looked at how our project is put together. 16:30 We covered a lot of ground, give yourself a pat on the back. 16:33 Now let's build upon that base by learning how to add a new page to our website. 16:37 But before we do that, let's take a bit of a tangent and 16:42 take a closer look at the URL's for the existing pages in our website. 16:45 Chrome by default won't display the full URL in the address bar, so 16:50 I'm going to select Internet Explorer for my browser. 16:54 Then click the Play button or the FI function key to start running our website. 16:59 Sometimes, Visual Studio won't bring the selected browser to the foreground. 17:04 So if you're not seeing your browser, go ahead and bring it to the foreground. 17:08 Looking in the address bar, 17:11 our current URL is http:// localhost: 17:15 50356/, let's break this down. 17:19 In our URL, http:// is the protocol and local host is our host name. 17:24 Typically, the host name is the domain name of the website, so for 17:30 example teamtreehouse.com or google.com. 17:35 Since we're running a website locally, the special name localhost is used. 17:38 The number following the colon after the host's name is our port number, 17:43 which in my case is 50356. 17:49 Your report number might be different as Visual Studio assigns a random number 17:51 when creating ASP.NET projects. 17:56 Using a different explicit port number allows each project to be ran locally 17:59 at the same time, even though they're all using the same hostname, localhost. 18:04 If the terms URL, Protocol, Hostname, 18:09 or Port are unfamiliar to you, check the teacher's notes for 18:12 links to resources that will explain these concepts in detail. 18:15 You'll notice that as we browse around our website, the protocol, host name and 18:19 port number won't change. 18:23 Given that, as we talk further about URLs, I'm only going to focus on the part of 18:25 the URL to the right of the port number, which is often referred to as the path. 18:29 If we click on the About menu item to browse to the about page, 18:35 the URL changes to Home/About. 18:40 And if we click the Contact menu item to browse to the contact page, 18:43 the URL path changes to Home/Contact. 18:47 When browsing the pages in our website the MVC framework will look for 18:50 a controller and action to handle that request. 18:54 So, how does this work? 18:58 Whenever MVC processes a request for a URL, it uses simple pattern matching to 19:00 determine the name of the controller and action in the form of controller/action. 19:06 So the URL path Home/About would map to a controller named Home and 19:12 an action named About. 19:17 And Home/Contact would map to a controller named Home and action named Contact. 19:19 Go ahead and switch back to Visual Studio and 19:26 click the Stop button to stop running our website. 19:29 Now let's see if we can find the home controller in the solution explorer panel. 19:32 Remember all of our controllers are located in the controllers folder. 19:37 If the folder isn't expanded, double click the folder name to display its contents. 19:41 Here's a file named HomeController.cs, that looks promising. 19:46 Go ahead and double click it to open it. 19:51 Here's our home controller, we can see that the home controller class has 19:54 three methods, Index About, and if we scroll down a little bit contact. 20:00 That's interesting. 20:05 The about and contact methods match the action names for our about and 20:07 contact pages. 20:11 That's not a coincidence. 20:12 These methods are special methods called, action methods. 20:14 When we browse to the about or contact pages, the MVC framework will find 20:18 the home controller and call the about method if we're viewing the about 20:22 page or the contact method if we're viewing the contact page. 20:27 So, what about the index method? 20:33 We don't have an index page on our website. 20:36 So when would this method get called? 20:38 To answer this question, let's start our website again and look at the URL for 20:41 the homepage. 20:45 The URL is http://localhost 20:46 followed by our port number, which doesn't include a path. 20:50 So if the controller or action name is not supplied in the URL path, 20:55 how does MVC know which controller and action to use? 20:59 When we make requests for pages on our website, it turns out we 21:02 don't have to supply an action name, when we don't, index is used by default. 21:06 So browsing to the URL home would result 21:11 in the home controllers index method being called. 21:14 We also don't need to provide a controller name. 21:17 If we don't then Home is used by default. 21:20 This allows us to browse to our home page, using nothing but our host name and 21:23 in our case, the port number. 21:27 So what happens if we try to browse to a page that 21:30 doesn't have a matching controller or action. 21:32 Let's try it and see. 21:35 In the address bar, let's type the URL Home/New and press the Enter key. 21:36 We get an error page. 21:45 Specifically the error message, the resource cannot be found. 21:47 Let's go ahead and change New to About and press the Enter key. 21:51 Now, we're back at our About page. 21:59 In ASP.NET MVC, the process of matching a URL to a controller in 22:02 action is called URL routing. 22:06 We're just scratching the surface of what URL routing is capable of. 22:09 But for now, these basic concepts are just what we need to know in order to add a new 22:13 page to our website. 22:17 [MUSIC] 22:18 Using the built-in project templates, 22:24 Visual Studio makes it easy to create an MVC website. 22:26 While that's helpful, it's not very likely that the resulting website 22:29 will align with the requirements for your project. 22:33 Well, unless they happen to call for a website with nothing but Home, About and 22:36 Contact pages. 22:40 Fortunately for us, adding new pages to an MVC website is easy to do. 22:42 Before we get started, 22:48 we need to do a little about the page that we're going to add. 22:49 For instance, what's the title of the page? 22:52 What kind of content will the page contain? 22:55 I'm going to go with an oldie but goodie. 22:58 A links page that will display a list of links. 23:00 I know, it's not fairly original but it will suit our purposes just fine. 23:03 URL path for our new links page will be links. 23:08 When we browse to that URL the MVC framework will look for 23:12 a Controller named Links and an action method on that controller named Index. 23:15 Remember, since we aren't including the actual name in the URL, 23:20 MVC by default will look for an action named Index. 23:24 All right. 23:29 I think we've done enough planning. 23:30 Let's get started. 23:31 Our first step is to add a links controller. 23:33 Right click on the controllers folder and select the Add, Controller menu item. 23:36 Visual Studio will open up a dialog, 23:43 listing the available controller templates. 23:45 Select the first one in the list, MVC 5 Controller- Empty and 23:47 click the Add button. 23:52 This brings up the Add controller dialog, 23:53 which prompts us to supply the name of the controller. 23:56 Noticed that the dialog is automatically including the suffix controller. 23:59 The MVC framework requires the controller names and with the word controller. 24:03 So don't remove that text. 24:07 Instead, replace the word default with links and then click the Add button. 24:09 Okay, here's our links controller, pretty simple, right? 24:15 The first thing to notice is that our controller is just a class. 24:19 We can tell this because of the class keyword right here. 24:23 Immediately to the right of the class keyword is the name of our class, 24:28 LinksController. 24:32 If you're not familiar with classes, you can think of them as a way of organizing 24:34 code, everything between these two curly braces is considered part of our class. 24:37 The word public is called an access modifier. 24:44 The public access modifier indicates that our class should be accessible to code 24:47 outside of our website. 24:51 This allows the MVC framework to discover and 24:53 use our controller, which is what we want it to be able to do. 24:55 If we look to the right of our class name, 24:59 we'll see a colon followed by the word Controller. 25:01 Controller is the name of a class that's part of the MVC framework. 25:06 The colon indicates that our links controller class is inheriting 25:10 from the Controller class. 25:13 Every controller in our website needs to inherit from the controller class. 25:15 Don't worry if you're not familiar with class inheritance. 25:20 That's a concept that will cover in future courses. 25:23 For now, just think of it as a way for 25:26 a class to use functionality that's defined in the controller class. 25:28 Let's take a closer look at the index action method. 25:32 Like a controller, the methods access modifier is public. 25:36 All control or action methods must be public. 25:40 Meaning, that can be accessed from code outside of this class. 25:42 This allows the MVC framework to be able to call your controllers action methods. 25:46 The methods return type is action result 25:51 which has the name describes represents the result of an action method. 25:53 The controller class, the class that were inheriting from, 25:58 provides a number of helpful methods for returning action results. 26:01 One of these methods, 26:05 the View method that we're calling here, renders a view to the response. 26:06 Next, lets add our view by right clicking on the View method and 26:11 selecting the Add View menu item. 26:15 This opens up the Add View dialog. 26:17 Visual Studio will default the name of the view to the action method name, 26:20 which in our case is Index. 26:24 If we open the template combo box, 26:26 we can see that there are a variety of templates that we can choose from. 26:28 For now, we're going to keep things simple and select the Empty without model option. 26:31 In future courses, we'll take a closer look at the other templates. 26:37 We'll keep the use a layout page checkbox, checked. 26:41 Layout pages are master pages that allow us to define a common set of markup for 26:44 all of the pages on our website. 26:48 Go ahead and click the add button to finish out in the view. 26:51 Visual Studio will add an index.cshtml file inside of a new links folder, 26:54 underneath the Views folder. 27:00 The convention for MVC websites is to use a sub folder for 27:02 each Controller’s views under the Views folder. 27:05 Additionally, the views themselves are typically named after the action 27:08 methods they're associated with. 27:12 Following this convention makes it easy to find the view you're looking for. 27:14 For example, if we want to find the view for 27:18 the home controllers about action method, we'd look in the Views home folder for 27:20 a file named About.cshtml. 27:25 Let's take a look at our links view. 27:29 The view that was created for us doesn't contain much content. 27:32 That makes sense though, given that we selected the Empty without model template. 27:35 The each to tag is pretty straight forward. 27:39 That's our page heading. 27:42 But what's the section at the top that starts with an @ symbol followed by a set 27:43 of curly braces? 27:47 The @ symbol's part of a special syntax called Razor 27:48 that allows us to make C# with our HTML markup. 27:51 Typing and add symbol tells the editor that we want to switch to using C#. 27:55 The curly braces create a code block, which allows us to write one or 27:59 more lines of C# code. 28:03 We currently just have a single line of code, ViewBag.Title = Index. 28:05 ViewBag is a special MVC framework object that can be used to pass data 28:11 from a controller to a view or in this case, from view to view. 28:15 By setting the ViewBag.Title property here. 28:19 Our layout page will use the same ViewBag property 28:22 to determine what the page title should be. 28:25 The view template sets both the page title and 28:27 the heading to Index, which was the name of our action method. 28:29 Let's change Index to something more meaningful, like Links. 28:33 Instead of typing the text Links for our heading, we can actually just type 28:37 an @ symbol to switch to C# code, and use the ViewBag.Title property. 28:42 That way, if we ever need to change our page title and heading text, 28:46 we only need to change the viewBag.Title property here at the top of the view. 28:50 To finish our view, let's add our list of links. 28:55 I'll use an unordered list for that. 28:58 Next, I'll create my first line item with an anchor tag, 29:01 leaving the href attribute partially incomplete for now. 29:04 I want two more of these line items. 29:11 So I'm gonna put my cursor here at the beginning of the line. 29:14 Press Control C to copy the line and 29:17 control V to paste the line, just below the line that I'm currently on. 29:20 Then I can press control V again to create a third line. 29:25 For the links themselves, let's link to Google, Bing, and Yahoo. 29:29 So now I will finish the href for the first item, google.com, 29:33 and then the anchor text Google, and then do the same for the second item. 29:39 So bing.com, and then Bing for the anchor text and then the third item. 29:44 Yahoo.com, and then yahoo for the anchor text. 29:50 Just in case users don't recognize what these links are, 29:56 I'll add an h3 heading tag with the text search engines. 30:00 Right above an ordered list. 30:04 Save the file by clicking the save toolbar button or by pressing Ctrl+S 30:06 then let's run our website by pressing the play button or the F5 function key. 30:11 Awesome, welcome to our links page. 30:20 Let's test each of our links to make sure that they work correctly. 30:23 Clicking on Google takes us to google.com, 30:27 clicking on Bing takes us to bing.com and 30:31 clicking on Yahoo takes us to yahoo.com. 30:36 Congrats on adding your first controller in view. 30:41 As an ASP.NET MVC developer, this is something that you'll do frequently on 30:44 your projects so over time you'll become very familiar with the process. 30:48 If any of the terms that I used including class, method, or 30:54 return type were confusing or 30:58 new to you, you want to take some time to learn more about the C# language. 31:00 See the teachers notes for links to additional resources 31:05 that cover the basics of the C# language. 31:08 So while we have our new page, expecting our website users to manually type 31:12 the URL for our links page is obviously not ideal. 31:17 Sounds like we need to update our menu. 31:21 Let's do this next. 31:24 [MUSIC] 31:25 Okay, we need to add a new item to our menu, 31:29 so users have a way to browse to our new links page. 31:32 Let's explore our project and see if we can figure out how to do that. 31:36 First off, let's run our website and take a closer look at the HTML for our menu. 31:40 I prefer Chromes developer tools. 31:45 So I'm going to change my selected browser to Google Chrome and 31:47 press the play button or the F5 function key to start running our website. 31:50 To see the market for our menu let's right-click on the contact menu item and 31:55 select inspect in Chrome's pop up menu. 31:59 Notice that as we hover our mouse over mark up in the elements window 32:03 Chrome will highlight that element in the browser. 32:06 Here's the line item for the about menu item and the line item for 32:10 the home menu item. 32:14 We can also click the little gray triangle to the left of the HTML tag 32:16 to see the content inside that item. 32:20 Moving up a bit, here's the UL tag for 32:23 our menus line items, we want to add a new item to this unordered list. 32:25 So let's search our project for the file that contains this tag. 32:29 To make sure that I'm finding the correct UL tag, I'm going to 32:33 use the entire element, including the class attribute for my search criteria. 32:37 Let's right click on the element, then select copy, copy element. 32:42 Let's switch back to Visual Studio and 32:47 stop our website by clicking the stop button. 32:49 Next we'll open the Find and Replace dialog by clicking on the Edit > Find and 32:52 Replace > Find in Files menu item. 32:57 You'll be using this dialog often so it's helpful to learn the keyboard shortcut for 33:01 the Find in Files command which is Ctrl+Shift+F. 33:05 Notice that Visual Studio automatically filled in the Find What field 33:10 with the HTML element that we copied to the clipboard. 33:14 If that didn't happen for you just place your cursor in this field and 33:18 press Ctrl+V to paste. 33:21 We want to search across every file on our website, so make sure that the Look in 33:24 field is set to Entire Solution then click the find all button. 33:28 This will open a panel here at the bottom of our environment 33:33 name to find results one. 33:36 Let's collapse the solution explorer panel so that we can see more of the results. 33:38 We can see that one matching line was found and that 40 files were searched. 33:43 The full path to the file is displayed along with a snippet of the matching line. 33:49 If we double click the search result Visual Studio will open 33:54 the _Layout.cshtml file and take us to the matching line. 33:58 Looks like we found the markup and code for our menu. 34:04 Let's take a closer look at the contents of the last LI tag. 34:08 This doesn't look like HTML does it? 34:12 It's actually C#, but what's this @ symbol? 34:14 As mentioned in an earlier video the @ symbol is part of a special syntax 34:19 called Razor that allows us to mix C# with our HTML markup. 34:23 Typing and add symbol tells the editor that we want to switch to using C#. 34:28 Notice that we don't have to tell Razor where the C# code ins. 34:33 Razor is intelligent enough to detect when we have transition back to using HTML. 34:37 Pretty cool? 34:43 We haven't covered how the HTML ActionLink method works, but that's okay. 34:44 From the name of the method, 34:49 it sounds like it will create a link which would make sense given our context. 34:50 Let's go ahead and copy one of the existing menu line items and 34:55 see if we can make it work. 34:58 I'm gonna put my cursor at the beginning of the line that contains the last 35:00 li element. 35:03 Press Ctrl+C to copy the line, and 35:05 Ctrl+V to paste the line just below the line that I'm currently on. 35:07 Now that we have our new line item, let's update the call to the ActionLink method. 35:12 If we hover our mouse pointer over the ActionLink method name, 35:17 Visual Studio will display a tool tip containing information about the method, 35:21 including the parameter list. 35:24 We can see that the first parameter is the linkText, 35:26 the second is the actionName, and the third is the controllerName. 35:30 For our links page, let's use links for the linkText, 35:35 index for the actionName, and links again for the controllerName. 35:40 Let's save by pressing Ctrl+S and then F5 to run the website. 35:48 Look at that. 35:54 Here's our links menu item. 35:55 If we click on it, we should see our links page. 35:57 Great job. 36:01 Now we have a way for users to discover and view our links page. 36:02 Knowing how to use the tools in your tool box to explore and 36:06 make changes to your website is a critical developer skill. 36:09 Inspecting, searching for and 36:13 modifying code, is something that you'll do over and over again. 36:15 So take the necessary time to practice and master that process. 36:19 We also got to use the developer tools built into the Chrome browser. 36:23 We're just scratching the surface of what these tools can do. 36:28 To learn more about what's possible check the teacher's notes for 36:31 links to additional resources. 36:34 Next let's wrap up work on our project by updating our websites content. 36:37 [MUSIC] 36:41 The content that we currently have on our website is boilerplate content that 36:45 was provided for us by the Visual Studio ASP.NET MVC project template. 36:50 The one exception is the list of links that we added to our links page. 36:55 In fact we were so focused on the mechanics of creating our project 36:59 that we didn't decide what the focus of our website should be. 37:03 We need to pick a topic when I'm working on a learning project 37:07 I like to make it fun and interesting for myself. 37:11 I find that if I enjoy what I'm working on I'm more likely to make time for it. 37:14 I'd love to ski. 37:19 So I'm going to make my website a directory of Oregon Ski Resorts. 37:20 The basic structure of our website is flexible enough to be used for 37:24 a variety of purposes. 37:28 So feel free to come up with your own idea. 37:29 Now that we have our websites topic, let's update our content. 37:33 We'll start by updating our layout page. 37:37 As we mentioned in an earlier video the layout pages used to specify 37:40 the overall look and feel for every page on our website. 37:44 So everything in the layout page appears on every page of the website. 37:47 The file that we're looking for is located in the views shared folder. 37:52 There it is. 37:57 It's the file name _Layout.cshtml. 37:59 Go ahead and doubled click it, to open it. 38:03 The text, My ASP.NET Application appears twice in this file In the title tag, here 38:06 in the document head, and if we scroll down a bit here again in the footer. 38:12 Let's change both instances to Oregon Ski Resorts, so 38:19 select that text and type Oregon Ski Resorts. 38:23 Select and copy that text by pressing Ctrl+C then move our cursor to the title 38:28 tag in the header, select the text to replace and press Ctrl+V. 38:34 Let's save by pressing Ctrl+S and then F5 to run our website. 38:40 In the browser we can see a bit of our new page title here in the tab. 38:46 If we hover our mouse pointer over the tab, 38:50 Chrome will display a tool tip showing the entire page title. 38:53 Scrolling down a bit, here in the footer we can see our updated copyright line, so 38:56 far, so good. 39:01 Now let's turn our attention to the menu 39:02 the text Application name still needs to be updated. 39:05 Let's switch back to Visual Studio and see if we can find where the text lives. 39:09 Go ahead and keep the website running. 39:14 For now, will only be making changes to our views 39:16 which can be edited while the website is running. 39:19 Open the Find and Replace dialog using the keyboard shortcut Ctrl+Shift+F. 39:22 In the Find what field, let's enter the search criteria application name and make 39:27 sure the Look in field is set to entire solution then click the Find All button. 39:33 Success, down here in the Find one results panel. 39:40 We can see that we got exactly one matching line, 39:43 double-click the search result to open the file. 39:46 The text we were looking for is in the _Layout.cshtml file 39:51 which is the file that we already had open. 39:55 It really is true. 39:59 Sometimes what you're looking for is already right in front of you. 40:00 Let's change the text application name to Oregon Ski Resorts then save the file, 40:04 switch back to Chrome and beat load the page by clicking the refresh 40:11 button here in the address bar or by using the keyboard shortcut Ctrl+R. 40:16 If the page doesn't refresh right away, don't worry, the delay is just the MVC 40:22 framework processing the changes that we've made to our view. 40:27 Great, here's our new website name in the menu. 40:30 Great job getting your hands dirty and updating your website content. 40:35 I'm gonna leave updating the rest of the content on your website as an exercise for 40:38 you to complete on your own. 40:43 By repeating the process that we just covered, 40:45 you'll be able to update all the remaining pages. 40:47 If you get stuck, be sure to stick with it. 40:51 The most meaningful learning that you can do won't be easy. 40:54 In fact, it should challenge you. 40:57 If you can't figure something out, reach out to others on the treehouse community 40:59 for help or check the teacher's notes for links to additional resources. 41:03 Also don't forget to have fun with it. 41:07 Before we wrap up this video, I wanna show you something that I think is pretty cool. 41:11 Our websites look and feel which includes everything from the layout and 41:15 color of the menu to the background color of our pages 41:19 comes from the Twitter Bootstrap CSS framework. 41:22 As you've see in this workshop, bootstrap makes it easy for 41:25 developers to create websites or applications that look great. 41:28 Another advantage of using a popular CSS framework like bootstrap is that there 41:32 are a wide variety of compatible themes that you can download and use. 41:37 Switching to a new bootstrap theme is an easy way to completely change the look and 41:41 feel of your website. 41:46 Lets see how this is done. 41:48 Bootswatch is one of the many websites that offers Bootstrap themes. 41:51 All the themes that we see here are free. 41:55 Here's one that looks interesting the darkly theme. 41:59 Let's update our website to use this theme. 42:02 Back in Visual Studio, let's show the solution explorer panel by clicking 42:05 the tab here on the right and then the pin in the right hand corner to keep it open. 42:09 That's a little narrow for my taste. 42:15 So let's grab this divider and drag it to the left to make the panel bigger. 42:17 There are two CSS files that we need to update in our project 42:22 the bootstrap.css and bootstrap.min.css files. 42:26 Both of these files can be found in the Content folder, here and here. 42:30 Switching back to my browser, I can download the CSS for 42:38 these files by clicking the down arrow here on the Download button. 42:41 Let's start by downloading the bootstrap.css file. 42:45 Clicking on the link will download the CSS into a new tab. 42:49 From here I can press Ctrl+A to select all the text 42:53 then Ctrl+C to copy the text to the clipboard. 42:57 Then in Visual Studio I can double click the bootstrap.css file to open it, 43:01 press Ctrl+A to select all of the text and Ctrl+V to paste 43:06 the text from the clipboard into the file then press Ctrl+S to save the file. 43:11 Be sure to repeat this process for the bootstrap.min.css file. 43:17 Now switch back to the browser and refresh the page. 43:21 And just like that here's our website with a new code of paint. 43:26 [MUSIC] 43:29 I hope this workshop gave you some sense of what it's like to work with 43:35 ASP.NET MVC, the C# language, and Visual Studio, but 43:39 it's really just the beginning. 43:42 I'm here with Jeremy. 43:45 Jeremy and I are both developers and 43:47 we work together to create the C# and ASP.NET curriculum here at Treehouse. 43:49 Jeremy teaches the next course you'll be taking C# Basics. 43:54 So Jeremy as a student taken C# basics what will I be learning? 43:58 >> C# basics is a great way to start learning the C# language. 44:02 We build a small console application called fitness frog and in fact in most of 44:07 the courses we teach here at Treehouse you'll be building applications and 44:12 things you can show off to others. 44:15 >> So as a beginner, can I really start with learning C#? 44:17 >> Yes, 44:21 C# is a great language to start learning especially when you're new to programming. 44:22 We don't assume that you've done anything in programming in the past. 44:27 >> So if I'm interested in web development, is ASP.NET and 44:30 C# the only thing that I need to learn? 44:34 Is there is something else and if there is something else, 44:36 can Treehouse help me with that? 44:39 >> Yeah absolutely, 44:40 ASP.NET MVC is actually the code that we would run on the web server. 44:42 There's other code that runs on the client's machine inside the web browser. 44:47 So you also want to learn things like HTML, CSS and 44:52 JavaScript and maybe some things about how to design web pages for users. 44:57 >> So to get started with C# basics today, 45:02 start your free trial if you're not already a Treehouse student and 45:04 click on tracks in the main menu and join either the C# or the ASP.NET track. 45:08 Happy coding. 45:13
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up