1 00:00:00,162 --> 00:00:04,683 [MUSIC] 2 00:00:04,683 --> 00:00:08,740 Hi, My name is James and welcome to this free workshop. 3 00:00:08,740 --> 00:00:14,295 I'm excited to show you how to get your first ASP.net MVC website up and running. 4 00:00:14,295 --> 00:00:16,949 To sign up for a free trial with treehouse and 5 00:00:16,949 --> 00:00:22,062 get access to our full library of content, click the Free Trial button on this page. 6 00:00:22,062 --> 00:00:26,949 At the end of this workshop we'll talk about your next steps with learning C # 7 00:00:26,949 --> 00:00:28,765 and ASP.NET at Treehouse. 8 00:00:28,765 --> 00:00:34,670 ASP.NET MVC is a popular open source web framework developed by Microsoft. 9 00:00:34,670 --> 00:00:41,080 ASP.net code runs on a server so we refer to it as a server side framework. 10 00:00:41,080 --> 00:00:45,250 This is in contrast to JavaScript code that runs in your browser. 11 00:00:45,250 --> 00:00:49,430 The MVC acronym tells us the ASP.net MVC framework 12 00:00:49,430 --> 00:00:52,750 uses the model view controller design pattern. 13 00:00:52,750 --> 00:00:58,230 The MVC design pattern is an important part of the ASP.net MVC framework. 14 00:00:58,230 --> 00:01:03,190 So much so that it's common to refer to ASP.net MVC as just MVC, 15 00:01:03,190 --> 00:01:06,460 which is what I'll be doing throughout the rest of this workshop. 16 00:01:07,730 --> 00:01:11,210 When learning it's often helpful to quickly try something out 17 00:01:11,210 --> 00:01:13,700 before you set about learning it in detail. 18 00:01:13,700 --> 00:01:18,110 In the videos that follow we'll be kicking the tires on Visual Studio 19 00:01:18,110 --> 00:01:21,980 as we walk through the steps to create an MVC website. 20 00:01:21,980 --> 00:01:24,860 Visual Studio is a powerful development tool 21 00:01:24,860 --> 00:01:28,410 that is used by developers all over the world to create and 22 00:01:28,410 --> 00:01:33,340 maintain a wide variety of software including websites and web applications. 23 00:01:33,340 --> 00:01:37,750 Even with all that power, Visual Studio makes it easy to create an MVC website. 24 00:01:37,750 --> 00:01:41,740 In fact, I think you'll be surprised at just how easy it is. 25 00:01:42,840 --> 00:01:46,370 Visual Studio currently only runs on Windows computers. 26 00:01:46,370 --> 00:01:50,420 If you want to do ASP.net development on a Mac or Linux computer, check out 27 00:01:50,420 --> 00:01:53,870 the teacher’s notes for resources on how to get started on those platforms. 28 00:01:55,040 --> 00:01:59,238 As we build our website, we're going to intentionally keep things simple. 29 00:01:59,238 --> 00:02:04,800 To start with our website will include Home, About, and Contact pages. 30 00:02:04,800 --> 00:02:07,926 Later we'll walk through the steps to add a new page. 31 00:02:07,926 --> 00:02:12,056 So even though our website will start off simple, that won't prevent us from using 32 00:02:12,056 --> 00:02:15,200 it as a jumping off point for building something more complex. 33 00:02:16,460 --> 00:02:20,890 We'll also be using Twitter's excellent CSS framework called Bootstrap. 34 00:02:20,890 --> 00:02:23,930 Bootstrap provides us with a set of pre-built CSS styles for 35 00:02:23,930 --> 00:02:27,090 styling elements like menus and buttons. 36 00:02:27,090 --> 00:02:30,410 This will make it easy for us to create a great looking website. 37 00:02:30,410 --> 00:02:33,120 If you're like me you'll really enjoy using Bootstrap. 38 00:02:34,200 --> 00:02:36,830 Let's review what we'll be covering in this workshop. 39 00:02:36,830 --> 00:02:40,350 We'll start by walking through the steps to create an MVC website 40 00:02:40,350 --> 00:02:42,200 using Visual Studio. 41 00:02:42,200 --> 00:02:45,840 Once we have our website created, we'll learn how to run our website so 42 00:02:45,840 --> 00:02:48,060 that we can preview it in a browser. 43 00:02:48,060 --> 00:02:50,480 Then we'll review the anatomy of our project 44 00:02:50,480 --> 00:02:54,140 which will help us with our last item, how to add a page to our website. 45 00:02:55,190 --> 00:02:58,450 We're going to cover concepts, that will likely be new to you. 46 00:02:58,450 --> 00:03:02,690 Sometimes, I'm going to purposely not explain a concept in great detail. 47 00:03:02,690 --> 00:03:07,600 Instead, we'll introduce the concept, give you a high level explanation and 48 00:03:07,600 --> 00:03:11,760 ask that you be okay with not knowing all of the details, at least for now. 49 00:03:11,760 --> 00:03:14,840 But don't worry, we'll get you there. 50 00:03:14,840 --> 00:03:19,155 In later material we'll cover everything that you need to know to be a successful 51 00:03:19,155 --> 00:03:20,850 ASP.net developer. 52 00:03:20,850 --> 00:03:23,740 Before we get started let's review what you'll need 53 00:03:23,740 --> 00:03:25,150 to get the most from this workshop. 54 00:03:26,600 --> 00:03:31,500 First, you'll need to have Visual Studio community installed on a Windows PC. 55 00:03:31,500 --> 00:03:34,960 If you haven't installed Visual Studio yet, check the teacher's notes for 56 00:03:34,960 --> 00:03:37,250 a link that covers that process. 57 00:03:37,250 --> 00:03:40,630 Secondly while it's not absolutely required, 58 00:03:40,630 --> 00:03:45,020 having a basic understanding of C# and HTML will be helpful. 59 00:03:45,020 --> 00:03:46,800 Again check the teachers notes for 60 00:03:46,800 --> 00:03:50,940 links to Treehouse courses that cover both of these topics. 61 00:03:50,940 --> 00:03:54,240 Are you ready to create your first MVC website? 62 00:03:54,240 --> 00:03:55,309 Let's get started. 63 00:03:55,309 --> 00:04:00,578 [MUSIC] 64 00:04:00,578 --> 00:04:05,180 For first time users, Visual Studio can be a little overwhelming. 65 00:04:05,180 --> 00:04:08,585 There's a lot happening to the user interface, especially when compared to 66 00:04:08,585 --> 00:04:13,970 workspaces here a Treehouse, or other text editors like Sublime Text or Adam. 67 00:04:13,970 --> 00:04:17,330 For now, we're going to just focus on the parts that we need and 68 00:04:17,330 --> 00:04:18,680 ignore everything else. 69 00:04:19,930 --> 00:04:22,420 Let's open Visual Studio and create our project. 70 00:04:24,010 --> 00:04:25,660 To start the process, 71 00:04:25,660 --> 00:04:31,650 click on the File>New>Project menu item in the top menu. 72 00:04:31,650 --> 00:04:34,570 This opens up the new project dialog. 73 00:04:34,570 --> 00:04:36,960 Using the tree view on the left hand side, 74 00:04:36,960 --> 00:04:41,480 we can filter the available project templates by our language and platform. 75 00:04:41,480 --> 00:04:46,440 We're interested in doing web development using C#, so let's select our language 76 00:04:46,440 --> 00:04:51,840 Visual C# which was all ready selected, then our platform Web. 77 00:04:51,840 --> 00:04:54,780 Now we're seeing just the project templates that are specific 78 00:04:54,780 --> 00:04:55,707 to the Web platform. 79 00:04:56,790 --> 00:05:00,030 The first and only item in the list that is be ASP.Net 80 00:05:00,030 --> 00:05:03,470 web application project template is the one that we're looking for. 81 00:05:03,470 --> 00:05:05,040 Go ahead and click it to select it. 82 00:05:06,220 --> 00:05:11,270 Notice the panel on the right-hand side of the dialog for, Application Insights. 83 00:05:11,270 --> 00:05:15,610 Application Insights is a powerful application profiling tool, but in 84 00:05:15,610 --> 00:05:20,100 the spirit of keeping things simple make sure that this checkbox is not checked. 85 00:05:21,570 --> 00:05:24,980 Let's take a closer look at this combo box near the top of the dialog. 86 00:05:26,120 --> 00:05:29,320 If we open this combo box we'll see a list of the .NET 87 00:05:29,320 --> 00:05:31,542 Framework versions that we currently have installed. 88 00:05:31,542 --> 00:05:35,350 The .NET Framework is updated over time with new features and 89 00:05:35,350 --> 00:05:40,860 bug fixes, so it's not unusual to have more than one version installed. 90 00:05:40,860 --> 00:05:47,430 Wanna select the latest version in the list, which for me is 4.6.1, don't worry 91 00:05:47,430 --> 00:05:52,540 if your version is newer than mine as .NET is constantly updating for the better. 92 00:05:52,540 --> 00:05:55,060 Next, let's go to the bottom of the dialog and 93 00:05:55,060 --> 00:06:00,197 change our project name to something other than WebApplication1, 94 00:06:00,197 --> 00:06:05,310 how about about MyFirstWebsite. 95 00:06:05,310 --> 00:06:08,880 Lets go ahead and leave the default values for the Location and 96 00:06:08,880 --> 00:06:14,060 Solution name fields and make sure that the Create directory for solution check 97 00:06:14,060 --> 00:06:19,830 box is checked and the Add to source control check box is not checked. 98 00:06:19,830 --> 00:06:22,810 While we're not using a version control system for this workshop, 99 00:06:22,810 --> 00:06:28,760 rest assured Visual Studio plays nicely with popular tools like get or GitHub. 100 00:06:28,760 --> 00:06:31,950 For information about this, see the teacher's notes. 101 00:06:31,950 --> 00:06:35,540 Click the OK button to continue to the next step. 102 00:06:35,540 --> 00:06:39,761 Now, we're presented with the second step in the process, 103 00:06:39,761 --> 00:06:42,172 the new ASP.NET project dialog. 104 00:06:42,172 --> 00:06:44,761 Within the dialog, we can view and 105 00:06:44,761 --> 00:06:49,674 select the specific ASP.NET project template that we want, for 106 00:06:49,674 --> 00:06:54,878 now, let's focus in on the ASP.NET 4.6.1 Template section. 107 00:06:54,878 --> 00:07:00,890 And in particular, the third item in the list, the MVC project template. 108 00:07:00,890 --> 00:07:05,160 Future releases of ASP.NET might diverge significantly from the version I'm using 109 00:07:05,160 --> 00:07:08,930 here, so make sure that you're using one of the 4.X templates. 110 00:07:08,930 --> 00:07:14,160 On the right-hand side of the dialog we can specify the authentication options for 111 00:07:14,160 --> 00:07:15,570 our project. 112 00:07:15,570 --> 00:07:20,800 By default Visual Studio will include support for individual user accounts, 113 00:07:20,800 --> 00:07:24,780 that allows users to register and login to our website. 114 00:07:24,780 --> 00:07:28,140 Again let's keep things simple and remove that option. 115 00:07:28,140 --> 00:07:32,157 To do that, click the Change Authentication button and 116 00:07:32,157 --> 00:07:36,438 then select the No Authentication option, then click OK. 117 00:07:36,438 --> 00:07:37,649 This will make it so 118 00:07:37,649 --> 00:07:42,744 that anybody could visit our website if we were to publish it on a public server. 119 00:07:42,744 --> 00:07:46,894 Lastly, make sure that the Host in the cloud checkbox listed underneath 120 00:07:46,894 --> 00:07:49,585 the Microsoft Azure section is not selected. 121 00:07:49,585 --> 00:07:52,350 While that deployment option would be helpful 122 00:07:52,350 --> 00:07:55,420 if we were planning on deploying our application to the cloud, 123 00:07:55,420 --> 00:07:58,360 that's not something we're going to cover in this workshop. 124 00:07:58,360 --> 00:08:00,914 If you're interested in deploying your web to the cloud or 125 00:08:00,914 --> 00:08:05,920 a hosting provider, again check the teacher's notes for a list of resources. 126 00:08:05,920 --> 00:08:09,460 Now that we have all of our options set, go ahead and click the OK button. 127 00:08:10,950 --> 00:08:14,919 Visual Studio will start to create our project displaying 128 00:08:14,919 --> 00:08:18,486 the status in the dialog at the center of the screen. 129 00:08:18,486 --> 00:08:22,928 Once the dialog is closed and we now have our project. 130 00:08:22,928 --> 00:08:26,202 [NOISE] Seems like a lot of steps doesn't it? 131 00:08:26,202 --> 00:08:30,617 The first time that you create a new project seem a little daunting, but 132 00:08:30,617 --> 00:08:34,752 with a little practice, it will start to feel familiar in no time. 133 00:08:34,752 --> 00:08:38,848 Let's take a short break, when we return we'll use Visual Studio to run our 134 00:08:38,848 --> 00:08:42,376 website, so that we can preview it in a browser, see you in a bit. 135 00:08:42,376 --> 00:08:47,690 [MUSIC] 136 00:08:47,690 --> 00:08:50,570 Welcome back, we've got our project created now but 137 00:08:50,570 --> 00:08:53,962 having a website that you haven't seen running in a browser and 138 00:08:53,962 --> 00:08:57,232 that's as bad as useful as a book that you've never opened. 139 00:08:57,232 --> 00:09:01,830 Luckily, Visual Studio makes it really easy, ready, let's do it. 140 00:09:03,190 --> 00:09:07,280 To run a website, we'll click on the play button here at the top of the screen. 141 00:09:08,430 --> 00:09:10,870 If you prefer to keep your hands on the keyboard like I do, 142 00:09:10,870 --> 00:09:14,340 you can also press the F5 function key. 143 00:09:14,340 --> 00:09:15,830 But before we do that, 144 00:09:15,830 --> 00:09:19,550 let's click the little down triangle here on the right-hand side of the play button, 145 00:09:20,710 --> 00:09:23,930 this displays a list of the installed browsers. 146 00:09:23,930 --> 00:09:28,630 Using this list, we can select the browser that we want to use to run our website. 147 00:09:28,630 --> 00:09:32,230 Let's select Google Chrome and then click the play button. 148 00:09:34,040 --> 00:09:36,130 Visual Studio will build our website and 149 00:09:36,130 --> 00:09:37,890 load it into the browser that we've selected. 150 00:09:39,150 --> 00:09:40,792 Here's our website. 151 00:09:40,792 --> 00:09:45,852 The first page that we see is our default page which for a website is the Home page. 152 00:09:45,852 --> 00:09:50,658 Using the menu here in the header, we can click on About to 153 00:09:50,658 --> 00:09:55,181 see the About page or Contact to see the contact page. 154 00:09:55,181 --> 00:10:01,017 If we click on Application name that takes us back to the Home page. 155 00:10:01,017 --> 00:10:03,472 Let's switch back to Visual Studio. 156 00:10:03,472 --> 00:10:06,100 Notice how our environment has changed? 157 00:10:06,100 --> 00:10:09,650 The output panel has been replaced with the Autos and 158 00:10:09,650 --> 00:10:13,410 Call Stack panels, both of which are used for debugging. 159 00:10:13,410 --> 00:10:16,220 Over here on the right the Properties panel has been hidden, 160 00:10:16,220 --> 00:10:20,420 and we now have a Diagnostic Tools panel being displayed. 161 00:10:20,420 --> 00:10:24,070 We're not gonna use the diagnostic tools during this workshop, so we can safely 162 00:10:24,070 --> 00:10:30,160 collapse that panel by clicking the pin here in the right-hand corner, there. 163 00:10:30,160 --> 00:10:32,560 To stop our application, click the Stop button. 164 00:10:33,890 --> 00:10:35,630 Our website has stopped running and 165 00:10:35,630 --> 00:10:40,870 our environment returns back to what it was before, wasn't that fun? 166 00:10:40,870 --> 00:10:44,480 I always enjoy seeing my websites running in a browser for the first time. 167 00:10:45,810 --> 00:10:49,600 Whenever you start a new website projects, it's helpful to get something up and 168 00:10:49,600 --> 00:10:54,670 running as quickly as possible before you start making any other changes. 169 00:10:54,670 --> 00:10:58,660 The process of making a small change or set of small changes 170 00:10:58,660 --> 00:11:02,820 then running your website or application to review and test those changes, 171 00:11:02,820 --> 00:11:09,550 forms the basis of what developers like to call intuitive or incremental development. 172 00:11:09,550 --> 00:11:11,190 Doing development in this way, 173 00:11:11,190 --> 00:11:15,840 it's easier to determine the source of a problem when something goes wrong. 174 00:11:15,840 --> 00:11:19,650 Throughout your career as a developer, you'll literally do thousands and 175 00:11:19,650 --> 00:11:21,900 thousands of iterations. 176 00:11:21,900 --> 00:11:23,103 For our next iteration, 177 00:11:23,103 --> 00:11:26,263 let's take a closer look at the folder structure of our project. 178 00:11:26,263 --> 00:11:31,318 [MUSIC] 179 00:11:31,318 --> 00:11:34,158 When Visual Studio set up our project for us, 180 00:11:34,158 --> 00:11:37,992 it created a number of files organized into a set of folders. 181 00:11:37,992 --> 00:11:41,828 When you're first learning MVC it's helpful to for militarize yourself with 182 00:11:41,828 --> 00:11:45,630 the overall structure and organization of your project. 183 00:11:45,630 --> 00:11:50,140 Before we do that, let's talk a little bit about the MVC design pattern. 184 00:11:50,140 --> 00:11:53,380 Well before we do that, let's talk in general about design patterns. 185 00:11:54,480 --> 00:11:57,640 Over the decades the developers have been creating software, 186 00:11:57,640 --> 00:12:01,710 they noticed a set of problems that kept coming up time and time again. 187 00:12:01,710 --> 00:12:02,910 Some of these problems were so 188 00:12:02,910 --> 00:12:07,420 common, that developers realized it would be helpful to describe their solutions 189 00:12:07,420 --> 00:12:11,040 in very general terms and then share them with others. 190 00:12:11,040 --> 00:12:15,974 That way developers everywhere, regardless of what specific technology they were 191 00:12:15,974 --> 00:12:19,113 using, could learn and benefit from these efforts. 192 00:12:19,113 --> 00:12:23,312 These solutions often represented as written descriptions or 193 00:12:23,312 --> 00:12:26,490 templates are referred to as design patterns. 194 00:12:27,600 --> 00:12:29,721 So what is in MVC? 195 00:12:29,721 --> 00:12:35,860 MVC is a design pattern, in fact in MVC is a very common design pattern. 196 00:12:35,860 --> 00:12:40,580 Used by developers to create all sorts of applications including, websites and 197 00:12:40,580 --> 00:12:44,020 mobile applications like iPhone or Android apps. 198 00:12:44,020 --> 00:12:44,960 Let's take a closer look. 199 00:12:46,050 --> 00:12:50,060 MVC is an acronym that stands for Model View Controller. 200 00:12:50,060 --> 00:12:53,380 For now think of a model as the data in your website, 201 00:12:53,380 --> 00:12:57,570 the view as the visual part, and the controller as the coordinator. 202 00:12:57,570 --> 00:13:00,520 When users browse to a specific page in our website, 203 00:13:00,520 --> 00:13:04,300 the controller is responsible for coordinating what specific actions 204 00:13:04,300 --> 00:13:09,580 need to be performed in order to return a response to that user request. 205 00:13:09,580 --> 00:13:10,590 At this point, 206 00:13:10,590 --> 00:13:14,510 don't worry if you don't fully understand how the MVC pattern works. 207 00:13:14,510 --> 00:13:17,730 For this workshop, it's good enough to know that there's something called 208 00:13:17,730 --> 00:13:20,760 a model, a view and a controller. 209 00:13:20,760 --> 00:13:25,100 In future courses we'll explore the MVC design pattern in greater detail. 210 00:13:26,190 --> 00:13:28,940 Let's take a look at the project that Visual Studio created for us. 211 00:13:30,170 --> 00:13:33,360 >> Within Visual Studio we can use the Solution Explorer panel 212 00:13:33,360 --> 00:13:35,950 to see our projects folders and files. 213 00:13:35,950 --> 00:13:37,800 If you're not able to see this panel, 214 00:13:37,800 --> 00:13:42,152 you can display it by selecting the View>Solution menu item. 215 00:13:43,310 --> 00:13:44,290 We can make more room for 216 00:13:44,290 --> 00:13:49,500 the Solution Explorer by clicking the pin here on the Properties panel and 217 00:13:49,500 --> 00:13:53,200 while we're at it, let's go ahead and collapse the output panel. 218 00:13:53,200 --> 00:13:56,820 There, now, we have more room to see the folders and files in our project. 219 00:13:57,930 --> 00:14:00,830 Let's start by looking at the heart of our website. 220 00:14:00,830 --> 00:14:05,388 The Controllers folder contains all the files for our controllers. 221 00:14:05,388 --> 00:14:10,690 If we double-click it to expand it, we see that we have just one controller, 222 00:14:10,690 --> 00:14:12,080 our home controller. 223 00:14:12,080 --> 00:14:16,795 The Models folder contains all the files for our models. 224 00:14:16,795 --> 00:14:21,093 Hm, that's interesting, there aren't any files here, remember though, 225 00:14:21,093 --> 00:14:24,680 models are used to represent data within our website. 226 00:14:24,680 --> 00:14:28,200 But our website doesn't work with any data, at least for now. 227 00:14:28,200 --> 00:14:31,440 So the Models folder is empty. 228 00:14:31,440 --> 00:14:33,940 The Views folder contains all the files for 229 00:14:33,940 --> 00:14:39,080 our views organized into folders, one folder for each of our controllers. 230 00:14:39,080 --> 00:14:42,780 Remember we just have the Home controller now, so 231 00:14:42,780 --> 00:14:46,430 that means we have just the one Home subfolder. 232 00:14:46,430 --> 00:14:50,340 Looking inside the Home subfolder, 233 00:14:50,340 --> 00:14:55,512 we can see there are three files About.cshtml, 234 00:14:55,512 --> 00:14:59,938 Contact.cshtml, and Index.cshtml. 235 00:14:59,938 --> 00:15:02,920 We'll take a closer look at these files in a bit. 236 00:15:02,920 --> 00:15:07,108 The Shared folder contains views that are shared across our controllers. 237 00:15:07,108 --> 00:15:12,120 The _Layout.cshtml file often referred to as a layout or master 238 00:15:12,120 --> 00:15:18,149 page is used to specify the overall look and feel for every page on our website. 239 00:15:18,149 --> 00:15:22,000 Later in this workshop, we'll be making changes to this file. 240 00:15:22,000 --> 00:15:26,800 Most websites have CSS and JavaScript files and ours is no exception. 241 00:15:26,800 --> 00:15:31,070 The content folder contains all of our website's CSS files 242 00:15:31,070 --> 00:15:35,470 while the scripts folder contains all of our website's JavaScript files. 243 00:15:35,470 --> 00:15:39,310 For now, we're going to ignore everything else that we see here. 244 00:15:39,310 --> 00:15:42,960 But don't worry, we'll be taking a closer look in future courses. 245 00:15:42,960 --> 00:15:46,751 So in time, you'll be familiar with every part of the MVC project. 246 00:15:47,870 --> 00:15:53,270 Not every aspect of our projects folder structure is required by asp.net and MVC. 247 00:15:53,270 --> 00:15:57,270 That being said, the majority of projects will look very similar to, 248 00:15:57,270 --> 00:16:00,770 if not exactly like, our projects folder structure. 249 00:16:00,770 --> 00:16:03,860 Following the standard project structure makes it easier for 250 00:16:03,860 --> 00:16:07,400 other developers to quickly find what they're looking for. 251 00:16:07,400 --> 00:16:10,309 Now that we're more familiar with the parts of our project, 252 00:16:10,309 --> 00:16:12,601 let's work on adding a new page to our website. 253 00:16:12,601 --> 00:16:17,406 [MUSIC] 254 00:16:17,406 --> 00:16:20,640 Before we move on let's recap what we've covered so far. 255 00:16:21,710 --> 00:16:25,320 We created an MVC website using Visual Studio. 256 00:16:25,320 --> 00:16:28,120 Once we have created our website, we learned how to run it so 257 00:16:28,120 --> 00:16:30,550 that we could preview it in a browser. 258 00:16:30,550 --> 00:16:33,660 Then we looked at how our project is put together. 259 00:16:33,660 --> 00:16:37,440 We covered a lot of ground, give yourself a pat on the back. 260 00:16:37,440 --> 00:16:42,420 Now let's build upon that base by learning how to add a new page to our website. 261 00:16:42,420 --> 00:16:45,830 But before we do that, let's take a bit of a tangent and 262 00:16:45,830 --> 00:16:49,730 take a closer look at the URL's for the existing pages in our website. 263 00:16:50,830 --> 00:16:54,290 Chrome by default won't display the full URL in the address bar, so 264 00:16:54,290 --> 00:16:57,510 I'm going to select Internet Explorer for my browser. 265 00:16:59,050 --> 00:17:03,160 Then click the Play button or the FI function key to start running our website. 266 00:17:04,300 --> 00:17:08,320 Sometimes, Visual Studio won't bring the selected browser to the foreground. 267 00:17:08,320 --> 00:17:11,819 So if you're not seeing your browser, go ahead and bring it to the foreground. 268 00:17:11,819 --> 00:17:15,053 Looking in the address bar, 269 00:17:15,053 --> 00:17:19,907 our current URL is http:// localhost: 270 00:17:19,907 --> 00:17:24,639 50356/, let's break this down. 271 00:17:24,639 --> 00:17:30,480 In our URL, http:// is the protocol and local host is our host name. 272 00:17:30,480 --> 00:17:35,168 Typically, the host name is the domain name of the website, so for 273 00:17:35,168 --> 00:17:38,532 example teamtreehouse.com or google.com. 274 00:17:38,532 --> 00:17:43,965 Since we're running a website locally, the special name localhost is used. 275 00:17:43,965 --> 00:17:49,465 The number following the colon after the host's name is our port number, 276 00:17:49,465 --> 00:17:51,870 which in my case is 50356. 277 00:17:51,870 --> 00:17:56,260 Your report number might be different as Visual Studio assigns a random number 278 00:17:56,260 --> 00:17:59,480 when creating ASP.NET projects. 279 00:17:59,480 --> 00:18:04,100 Using a different explicit port number allows each project to be ran locally 280 00:18:04,100 --> 00:18:09,190 at the same time, even though they're all using the same hostname, localhost. 281 00:18:09,190 --> 00:18:12,240 If the terms URL, Protocol, Hostname, 282 00:18:12,240 --> 00:18:15,450 or Port are unfamiliar to you, check the teacher's notes for 283 00:18:15,450 --> 00:18:19,410 links to resources that will explain these concepts in detail. 284 00:18:19,410 --> 00:18:23,520 You'll notice that as we browse around our website, the protocol, host name and 285 00:18:23,520 --> 00:18:25,330 port number won't change. 286 00:18:25,330 --> 00:18:29,870 Given that, as we talk further about URLs, I'm only going to focus on the part of 287 00:18:29,870 --> 00:18:34,800 the URL to the right of the port number, which is often referred to as the path. 288 00:18:35,860 --> 00:18:40,120 If we click on the About menu item to browse to the about page, 289 00:18:40,120 --> 00:18:43,420 the URL changes to Home/About. 290 00:18:43,420 --> 00:18:47,380 And if we click the Contact menu item to browse to the contact page, 291 00:18:47,380 --> 00:18:50,450 the URL path changes to Home/Contact. 292 00:18:50,450 --> 00:18:54,920 When browsing the pages in our website the MVC framework will look for 293 00:18:54,920 --> 00:18:58,350 a controller and action to handle that request. 294 00:18:58,350 --> 00:19:00,770 So, how does this work? 295 00:19:00,770 --> 00:19:06,140 Whenever MVC processes a request for a URL, it uses simple pattern matching to 296 00:19:06,140 --> 00:19:12,290 determine the name of the controller and action in the form of controller/action. 297 00:19:12,290 --> 00:19:17,620 So the URL path Home/About would map to a controller named Home and 298 00:19:17,620 --> 00:19:19,680 an action named About. 299 00:19:19,680 --> 00:19:26,790 And Home/Contact would map to a controller named Home and action named Contact. 300 00:19:26,790 --> 00:19:29,530 Go ahead and switch back to Visual Studio and 301 00:19:29,530 --> 00:19:32,860 click the Stop button to stop running our website. 302 00:19:32,860 --> 00:19:37,300 Now let's see if we can find the home controller in the solution explorer panel. 303 00:19:37,300 --> 00:19:41,670 Remember all of our controllers are located in the controllers folder. 304 00:19:41,670 --> 00:19:45,750 If the folder isn't expanded, double click the folder name to display its contents. 305 00:19:46,800 --> 00:19:51,840 Here's a file named HomeController.cs, that looks promising. 306 00:19:51,840 --> 00:19:54,827 Go ahead and double click it to open it. 307 00:19:54,827 --> 00:20:00,030 Here's our home controller, we can see that the home controller class has 308 00:20:00,030 --> 00:20:05,161 three methods, Index About, and if we scroll down a little bit contact. 309 00:20:05,161 --> 00:20:07,210 That's interesting. 310 00:20:07,210 --> 00:20:11,110 The about and contact methods match the action names for our about and 311 00:20:11,110 --> 00:20:12,800 contact pages. 312 00:20:12,800 --> 00:20:14,470 That's not a coincidence. 313 00:20:14,470 --> 00:20:18,120 These methods are special methods called, action methods. 314 00:20:18,120 --> 00:20:22,380 When we browse to the about or contact pages, the MVC framework will find 315 00:20:22,380 --> 00:20:27,220 the home controller and call the about method if we're viewing the about 316 00:20:27,220 --> 00:20:33,040 page or the contact method if we're viewing the contact page. 317 00:20:33,040 --> 00:20:36,260 So, what about the index method? 318 00:20:36,260 --> 00:20:38,860 We don't have an index page on our website. 319 00:20:38,860 --> 00:20:41,070 So when would this method get called? 320 00:20:41,070 --> 00:20:45,390 To answer this question, let's start our website again and look at the URL for 321 00:20:45,390 --> 00:20:46,030 the homepage. 322 00:20:46,030 --> 00:20:50,170 The URL is http://localhost 323 00:20:50,170 --> 00:20:55,370 followed by our port number, which doesn't include a path. 324 00:20:55,370 --> 00:20:59,250 So if the controller or action name is not supplied in the URL path, 325 00:20:59,250 --> 00:21:02,950 how does MVC know which controller and action to use? 326 00:21:02,950 --> 00:21:06,190 When we make requests for pages on our website, it turns out we 327 00:21:06,190 --> 00:21:11,390 don't have to supply an action name, when we don't, index is used by default. 328 00:21:11,390 --> 00:21:14,110 So browsing to the URL home would result 329 00:21:14,110 --> 00:21:17,500 in the home controllers index method being called. 330 00:21:17,500 --> 00:21:20,090 We also don't need to provide a controller name. 331 00:21:20,090 --> 00:21:23,060 If we don't then Home is used by default. 332 00:21:23,060 --> 00:21:27,640 This allows us to browse to our home page, using nothing but our host name and 333 00:21:27,640 --> 00:21:30,140 in our case, the port number. 334 00:21:30,140 --> 00:21:32,730 So what happens if we try to browse to a page that 335 00:21:32,730 --> 00:21:35,270 doesn't have a matching controller or action. 336 00:21:35,270 --> 00:21:36,830 Let's try it and see. 337 00:21:36,830 --> 00:21:43,490 In the address bar, let's type the URL Home/New and press the Enter key. 338 00:21:45,820 --> 00:21:47,190 We get an error page. 339 00:21:47,190 --> 00:21:50,760 Specifically the error message, the resource cannot be found. 340 00:21:51,880 --> 00:21:59,110 Let's go ahead and change New to About and press the Enter key. 341 00:21:59,110 --> 00:22:01,050 Now, we're back at our About page. 342 00:22:02,280 --> 00:22:06,871 In ASP.NET MVC, the process of matching a URL to a controller in 343 00:22:06,871 --> 00:22:09,088 action is called URL routing. 344 00:22:09,088 --> 00:22:13,200 We're just scratching the surface of what URL routing is capable of. 345 00:22:13,200 --> 00:22:17,756 But for now, these basic concepts are just what we need to know in order to add a new 346 00:22:17,756 --> 00:22:18,963 page to our website. 347 00:22:18,963 --> 00:22:24,177 [MUSIC] 348 00:22:24,177 --> 00:22:26,467 Using the built-in project templates, 349 00:22:26,467 --> 00:22:29,445 Visual Studio makes it easy to create an MVC website. 350 00:22:29,445 --> 00:22:33,790 While that's helpful, it's not very likely that the resulting website 351 00:22:33,790 --> 00:22:36,570 will align with the requirements for your project. 352 00:22:36,570 --> 00:22:40,940 Well, unless they happen to call for a website with nothing but Home, About and 353 00:22:40,940 --> 00:22:42,950 Contact pages. 354 00:22:42,950 --> 00:22:47,290 Fortunately for us, adding new pages to an MVC website is easy to do. 355 00:22:48,410 --> 00:22:49,740 Before we get started, 356 00:22:49,740 --> 00:22:52,660 we need to do a little about the page that we're going to add. 357 00:22:52,660 --> 00:22:55,379 For instance, what's the title of the page? 358 00:22:55,379 --> 00:22:58,230 What kind of content will the page contain? 359 00:22:58,230 --> 00:23:00,330 I'm going to go with an oldie but goodie. 360 00:23:00,330 --> 00:23:03,790 A links page that will display a list of links. 361 00:23:03,790 --> 00:23:08,720 I know, it's not fairly original but it will suit our purposes just fine. 362 00:23:08,720 --> 00:23:12,670 URL path for our new links page will be links. 363 00:23:12,670 --> 00:23:15,960 When we browse to that URL the MVC framework will look for 364 00:23:15,960 --> 00:23:20,630 a Controller named Links and an action method on that controller named Index. 365 00:23:20,630 --> 00:23:24,255 Remember, since we aren't including the actual name in the URL, 366 00:23:24,255 --> 00:23:28,090 MVC by default will look for an action named Index. 367 00:23:29,290 --> 00:23:30,140 All right. 368 00:23:30,140 --> 00:23:31,780 I think we've done enough planning. 369 00:23:31,780 --> 00:23:32,560 Let's get started. 370 00:23:33,840 --> 00:23:36,670 Our first step is to add a links controller. 371 00:23:36,670 --> 00:23:41,930 Right click on the controllers folder and select the Add, Controller menu item. 372 00:23:43,020 --> 00:23:45,230 Visual Studio will open up a dialog, 373 00:23:45,230 --> 00:23:47,730 listing the available controller templates. 374 00:23:47,730 --> 00:23:52,340 Select the first one in the list, MVC 5 Controller- Empty and 375 00:23:52,340 --> 00:23:53,950 click the Add button. 376 00:23:53,950 --> 00:23:56,160 This brings up the Add controller dialog, 377 00:23:56,160 --> 00:23:59,130 which prompts us to supply the name of the controller. 378 00:23:59,130 --> 00:24:03,730 Noticed that the dialog is automatically including the suffix controller. 379 00:24:03,730 --> 00:24:07,740 The MVC framework requires the controller names and with the word controller. 380 00:24:07,740 --> 00:24:09,620 So don't remove that text. 381 00:24:09,620 --> 00:24:14,840 Instead, replace the word default with links and then click the Add button. 382 00:24:15,960 --> 00:24:19,730 Okay, here's our links controller, pretty simple, right? 383 00:24:19,730 --> 00:24:23,570 The first thing to notice is that our controller is just a class. 384 00:24:23,570 --> 00:24:26,850 We can tell this because of the class keyword right here. 385 00:24:28,270 --> 00:24:32,160 Immediately to the right of the class keyword is the name of our class, 386 00:24:32,160 --> 00:24:32,860 LinksController. 387 00:24:34,130 --> 00:24:37,990 If you're not familiar with classes, you can think of them as a way of organizing 388 00:24:37,990 --> 00:24:42,660 code, everything between these two curly braces is considered part of our class. 389 00:24:44,000 --> 00:24:47,210 The word public is called an access modifier. 390 00:24:47,210 --> 00:24:51,120 The public access modifier indicates that our class should be accessible to code 391 00:24:51,120 --> 00:24:53,080 outside of our website. 392 00:24:53,080 --> 00:24:55,590 This allows the MVC framework to discover and 393 00:24:55,590 --> 00:24:58,270 use our controller, which is what we want it to be able to do. 394 00:24:59,610 --> 00:25:01,780 If we look to the right of our class name, 395 00:25:01,780 --> 00:25:05,160 we'll see a colon followed by the word Controller. 396 00:25:06,240 --> 00:25:10,030 Controller is the name of a class that's part of the MVC framework. 397 00:25:10,030 --> 00:25:13,570 The colon indicates that our links controller class is inheriting 398 00:25:13,570 --> 00:25:15,570 from the Controller class. 399 00:25:15,570 --> 00:25:20,100 Every controller in our website needs to inherit from the controller class. 400 00:25:20,100 --> 00:25:23,330 Don't worry if you're not familiar with class inheritance. 401 00:25:23,330 --> 00:25:26,100 That's a concept that will cover in future courses. 402 00:25:26,100 --> 00:25:28,560 For now, just think of it as a way for 403 00:25:28,560 --> 00:25:32,920 a class to use functionality that's defined in the controller class. 404 00:25:32,920 --> 00:25:36,070 Let's take a closer look at the index action method. 405 00:25:36,070 --> 00:25:40,020 Like a controller, the methods access modifier is public. 406 00:25:40,020 --> 00:25:42,640 All control or action methods must be public. 407 00:25:42,640 --> 00:25:46,120 Meaning, that can be accessed from code outside of this class. 408 00:25:46,120 --> 00:25:51,080 This allows the MVC framework to be able to call your controllers action methods. 409 00:25:51,080 --> 00:25:53,990 The methods return type is action result 410 00:25:53,990 --> 00:25:58,320 which has the name describes represents the result of an action method. 411 00:25:58,320 --> 00:26:01,510 The controller class, the class that were inheriting from, 412 00:26:01,510 --> 00:26:05,670 provides a number of helpful methods for returning action results. 413 00:26:05,670 --> 00:26:06,800 One of these methods, 414 00:26:06,800 --> 00:26:10,320 the View method that we're calling here, renders a view to the response. 415 00:26:11,600 --> 00:26:15,130 Next, lets add our view by right clicking on the View method and 416 00:26:15,130 --> 00:26:17,820 selecting the Add View menu item. 417 00:26:17,820 --> 00:26:20,450 This opens up the Add View dialog. 418 00:26:20,450 --> 00:26:24,150 Visual Studio will default the name of the view to the action method name, 419 00:26:24,150 --> 00:26:26,440 which in our case is Index. 420 00:26:26,440 --> 00:26:28,330 If we open the template combo box, 421 00:26:28,330 --> 00:26:31,930 we can see that there are a variety of templates that we can choose from. 422 00:26:31,930 --> 00:26:37,500 For now, we're going to keep things simple and select the Empty without model option. 423 00:26:37,500 --> 00:26:41,570 In future courses, we'll take a closer look at the other templates. 424 00:26:41,570 --> 00:26:44,580 We'll keep the use a layout page checkbox, checked. 425 00:26:44,580 --> 00:26:48,850 Layout pages are master pages that allow us to define a common set of markup for 426 00:26:48,850 --> 00:26:51,160 all of the pages on our website. 427 00:26:51,160 --> 00:26:54,330 Go ahead and click the add button to finish out in the view. 428 00:26:54,330 --> 00:27:00,390 Visual Studio will add an index.cshtml file inside of a new links folder, 429 00:27:00,390 --> 00:27:01,610 underneath the Views folder. 430 00:27:02,660 --> 00:27:05,950 The convention for MVC websites is to use a sub folder for 431 00:27:05,950 --> 00:27:08,930 each Controller’s views under the Views folder. 432 00:27:08,930 --> 00:27:12,170 Additionally, the views themselves are typically named after the action 433 00:27:12,170 --> 00:27:14,300 methods they're associated with. 434 00:27:14,300 --> 00:27:18,110 Following this convention makes it easy to find the view you're looking for. 435 00:27:18,110 --> 00:27:20,150 For example, if we want to find the view for 436 00:27:20,150 --> 00:27:25,990 the home controllers about action method, we'd look in the Views home folder for 437 00:27:25,990 --> 00:27:29,510 a file named About.cshtml. 438 00:27:29,510 --> 00:27:30,900 Let's take a look at our links view. 439 00:27:32,140 --> 00:27:35,490 The view that was created for us doesn't contain much content. 440 00:27:35,490 --> 00:27:39,880 That makes sense though, given that we selected the Empty without model template. 441 00:27:39,880 --> 00:27:42,050 The each to tag is pretty straight forward. 442 00:27:42,050 --> 00:27:43,510 That's our page heading. 443 00:27:43,510 --> 00:27:47,617 But what's the section at the top that starts with an @ symbol followed by a set 444 00:27:47,617 --> 00:27:48,611 of curly braces? 445 00:27:48,611 --> 00:27:51,830 The @ symbol's part of a special syntax called Razor 446 00:27:51,830 --> 00:27:55,440 that allows us to make C# with our HTML markup. 447 00:27:55,440 --> 00:27:59,827 Typing and add symbol tells the editor that we want to switch to using C#. 448 00:27:59,827 --> 00:28:03,396 The curly braces create a code block, which allows us to write one or 449 00:28:03,396 --> 00:28:04,660 more lines of C# code. 450 00:28:05,920 --> 00:28:11,460 We currently just have a single line of code, ViewBag.Title = Index. 451 00:28:11,460 --> 00:28:15,520 ViewBag is a special MVC framework object that can be used to pass data 452 00:28:15,520 --> 00:28:19,780 from a controller to a view or in this case, from view to view. 453 00:28:19,780 --> 00:28:22,530 By setting the ViewBag.Title property here. 454 00:28:22,530 --> 00:28:25,190 Our layout page will use the same ViewBag property 455 00:28:25,190 --> 00:28:27,590 to determine what the page title should be. 456 00:28:27,590 --> 00:28:29,710 The view template sets both the page title and 457 00:28:29,710 --> 00:28:33,410 the heading to Index, which was the name of our action method. 458 00:28:33,410 --> 00:28:37,690 Let's change Index to something more meaningful, like Links. 459 00:28:37,690 --> 00:28:42,040 Instead of typing the text Links for our heading, we can actually just type 460 00:28:42,040 --> 00:28:46,930 an @ symbol to switch to C# code, and use the ViewBag.Title property. 461 00:28:46,930 --> 00:28:50,890 That way, if we ever need to change our page title and heading text, 462 00:28:50,890 --> 00:28:55,870 we only need to change the viewBag.Title property here at the top of the view. 463 00:28:55,870 --> 00:28:58,530 To finish our view, let's add our list of links. 464 00:28:58,530 --> 00:29:01,380 I'll use an unordered list for that. 465 00:29:01,380 --> 00:29:04,910 Next, I'll create my first line item with an anchor tag, 466 00:29:04,910 --> 00:29:07,940 leaving the href attribute partially incomplete for now. 467 00:29:11,690 --> 00:29:14,080 I want two more of these line items. 468 00:29:14,080 --> 00:29:17,900 So I'm gonna put my cursor here at the beginning of the line. 469 00:29:17,900 --> 00:29:20,990 Press Control C to copy the line and 470 00:29:20,990 --> 00:29:25,540 control V to paste the line, just below the line that I'm currently on. 471 00:29:25,540 --> 00:29:29,380 Then I can press control V again to create a third line. 472 00:29:29,380 --> 00:29:33,910 For the links themselves, let's link to Google, Bing, and Yahoo. 473 00:29:33,910 --> 00:29:39,180 So now I will finish the href for the first item, google.com, 474 00:29:39,180 --> 00:29:44,416 and then the anchor text Google, and then do the same for the second item. 475 00:29:44,416 --> 00:29:50,900 So bing.com, and then Bing for the anchor text and then the third item. 476 00:29:50,900 --> 00:29:56,706 Yahoo.com, and then yahoo for the anchor text. 477 00:29:56,706 --> 00:30:00,257 Just in case users don't recognize what these links are, 478 00:30:00,257 --> 00:30:04,470 I'll add an h3 heading tag with the text search engines. 479 00:30:04,470 --> 00:30:06,386 Right above an ordered list. 480 00:30:06,386 --> 00:30:11,606 Save the file by clicking the save toolbar button or by pressing Ctrl+S 481 00:30:11,606 --> 00:30:17,441 then let's run our website by pressing the play button or the F5 function key. 482 00:30:20,969 --> 00:30:23,710 Awesome, welcome to our links page. 483 00:30:23,710 --> 00:30:27,120 Let's test each of our links to make sure that they work correctly. 484 00:30:27,120 --> 00:30:31,956 Clicking on Google takes us to google.com, 485 00:30:31,956 --> 00:30:36,410 clicking on Bing takes us to bing.com and 486 00:30:36,410 --> 00:30:41,030 clicking on Yahoo takes us to yahoo.com. 487 00:30:41,030 --> 00:30:44,146 Congrats on adding your first controller in view. 488 00:30:44,146 --> 00:30:48,570 As an ASP.NET MVC developer, this is something that you'll do frequently on 489 00:30:48,570 --> 00:30:53,500 your projects so over time you'll become very familiar with the process. 490 00:30:54,560 --> 00:30:58,280 If any of the terms that I used including class, method, or 491 00:30:58,280 --> 00:31:00,500 return type were confusing or 492 00:31:00,500 --> 00:31:05,590 new to you, you want to take some time to learn more about the C# language. 493 00:31:05,590 --> 00:31:08,870 See the teachers notes for links to additional resources 494 00:31:08,870 --> 00:31:12,964 that cover the basics of the C# language. 495 00:31:12,964 --> 00:31:17,590 So while we have our new page, expecting our website users to manually type 496 00:31:17,590 --> 00:31:21,950 the URL for our links page is obviously not ideal. 497 00:31:21,950 --> 00:31:24,110 Sounds like we need to update our menu. 498 00:31:24,110 --> 00:31:25,311 Let's do this next. 499 00:31:25,311 --> 00:31:29,861 [MUSIC] 500 00:31:29,861 --> 00:31:32,620 Okay, we need to add a new item to our menu, 501 00:31:32,620 --> 00:31:36,330 so users have a way to browse to our new links page. 502 00:31:36,330 --> 00:31:40,290 Let's explore our project and see if we can figure out how to do that. 503 00:31:40,290 --> 00:31:45,070 First off, let's run our website and take a closer look at the HTML for our menu. 504 00:31:45,070 --> 00:31:47,100 I prefer Chromes developer tools. 505 00:31:47,100 --> 00:31:50,280 So I'm going to change my selected browser to Google Chrome and 506 00:31:50,280 --> 00:31:54,010 press the play button or the F5 function key to start running our website. 507 00:31:55,110 --> 00:31:59,610 To see the market for our menu let's right-click on the contact menu item and 508 00:31:59,610 --> 00:32:02,060 select inspect in Chrome's pop up menu. 509 00:32:03,260 --> 00:32:06,800 Notice that as we hover our mouse over mark up in the elements window 510 00:32:06,800 --> 00:32:09,190 Chrome will highlight that element in the browser. 511 00:32:10,340 --> 00:32:14,230 Here's the line item for the about menu item and the line item for 512 00:32:14,230 --> 00:32:15,200 the home menu item. 513 00:32:16,340 --> 00:32:20,410 We can also click the little gray triangle to the left of the HTML tag 514 00:32:20,410 --> 00:32:22,220 to see the content inside that item. 515 00:32:23,450 --> 00:32:25,510 Moving up a bit, here's the UL tag for 516 00:32:25,510 --> 00:32:29,950 our menus line items, we want to add a new item to this unordered list. 517 00:32:29,950 --> 00:32:33,870 So let's search our project for the file that contains this tag. 518 00:32:33,870 --> 00:32:37,140 To make sure that I'm finding the correct UL tag, I'm going to 519 00:32:37,140 --> 00:32:41,300 use the entire element, including the class attribute for my search criteria. 520 00:32:42,340 --> 00:32:47,640 Let's right click on the element, then select copy, copy element. 521 00:32:47,640 --> 00:32:49,610 Let's switch back to Visual Studio and 522 00:32:49,610 --> 00:32:52,190 stop our website by clicking the stop button. 523 00:32:52,190 --> 00:32:57,330 Next we'll open the Find and Replace dialog by clicking on the Edit > Find and 524 00:32:57,330 --> 00:33:00,550 Replace > Find in Files menu item. 525 00:33:01,630 --> 00:33:05,710 You'll be using this dialog often so it's helpful to learn the keyboard shortcut for 526 00:33:05,710 --> 00:33:09,539 the Find in Files command which is Ctrl+Shift+F. 527 00:33:10,730 --> 00:33:14,750 Notice that Visual Studio automatically filled in the Find What field 528 00:33:14,750 --> 00:33:18,210 with the HTML element that we copied to the clipboard. 529 00:33:18,210 --> 00:33:21,810 If that didn't happen for you just place your cursor in this field and 530 00:33:21,810 --> 00:33:24,690 press Ctrl+V to paste. 531 00:33:24,690 --> 00:33:28,550 We want to search across every file on our website, so make sure that the Look in 532 00:33:28,550 --> 00:33:33,670 field is set to Entire Solution then click the find all button. 533 00:33:33,670 --> 00:33:36,370 This will open a panel here at the bottom of our environment 534 00:33:36,370 --> 00:33:38,940 name to find results one. 535 00:33:38,940 --> 00:33:43,910 Let's collapse the solution explorer panel so that we can see more of the results. 536 00:33:43,910 --> 00:33:49,770 We can see that one matching line was found and that 40 files were searched. 537 00:33:49,770 --> 00:33:54,960 The full path to the file is displayed along with a snippet of the matching line. 538 00:33:54,960 --> 00:33:58,150 If we double click the search result Visual Studio will open 539 00:33:58,150 --> 00:34:02,800 the _Layout.cshtml file and take us to the matching line. 540 00:34:04,430 --> 00:34:08,160 Looks like we found the markup and code for our menu. 541 00:34:08,160 --> 00:34:12,060 Let's take a closer look at the contents of the last LI tag. 542 00:34:12,060 --> 00:34:14,503 This doesn't look like HTML does it? 543 00:34:14,503 --> 00:34:19,500 It's actually C#, but what's this @ symbol? 544 00:34:19,500 --> 00:34:23,620 As mentioned in an earlier video the @ symbol is part of a special syntax 545 00:34:23,620 --> 00:34:28,990 called Razor that allows us to mix C# with our HTML markup. 546 00:34:28,990 --> 00:34:33,443 Typing and add symbol tells the editor that we want to switch to using C#. 547 00:34:33,443 --> 00:34:37,940 Notice that we don't have to tell Razor where the C# code ins. 548 00:34:37,940 --> 00:34:43,210 Razor is intelligent enough to detect when we have transition back to using HTML. 549 00:34:43,210 --> 00:34:44,800 Pretty cool? 550 00:34:44,800 --> 00:34:49,650 We haven't covered how the HTML ActionLink method works, but that's okay. 551 00:34:49,650 --> 00:34:50,790 From the name of the method, 552 00:34:50,790 --> 00:34:54,490 it sounds like it will create a link which would make sense given our context. 553 00:34:55,600 --> 00:34:58,710 Let's go ahead and copy one of the existing menu line items and 554 00:34:58,710 --> 00:35:00,640 see if we can make it work. 555 00:35:00,640 --> 00:35:03,910 I'm gonna put my cursor at the beginning of the line that contains the last 556 00:35:03,910 --> 00:35:05,420 li element. 557 00:35:05,420 --> 00:35:07,365 Press Ctrl+C to copy the line, and 558 00:35:07,365 --> 00:35:12,640 Ctrl+V to paste the line just below the line that I'm currently on. 559 00:35:12,640 --> 00:35:16,420 Now that we have our new line item, let's update the call to the ActionLink method. 560 00:35:17,460 --> 00:35:21,100 If we hover our mouse pointer over the ActionLink method name, 561 00:35:21,100 --> 00:35:24,970 Visual Studio will display a tool tip containing information about the method, 562 00:35:24,970 --> 00:35:26,940 including the parameter list. 563 00:35:26,940 --> 00:35:30,270 We can see that the first parameter is the linkText, 564 00:35:30,270 --> 00:35:33,515 the second is the actionName, and the third is the controllerName. 565 00:35:35,180 --> 00:35:40,240 For our links page, let's use links for the linkText, 566 00:35:40,240 --> 00:35:48,020 index for the actionName, and links again for the controllerName. 567 00:35:48,020 --> 00:35:52,420 Let's save by pressing Ctrl+S and then F5 to run the website. 568 00:35:54,190 --> 00:35:55,330 Look at that. 569 00:35:55,330 --> 00:35:57,420 Here's our links menu item. 570 00:35:57,420 --> 00:36:00,170 If we click on it, we should see our links page. 571 00:36:01,450 --> 00:36:02,480 Great job. 572 00:36:02,480 --> 00:36:06,990 Now we have a way for users to discover and view our links page. 573 00:36:06,990 --> 00:36:09,910 Knowing how to use the tools in your tool box to explore and 574 00:36:09,910 --> 00:36:13,610 make changes to your website is a critical developer skill. 575 00:36:13,610 --> 00:36:15,410 Inspecting, searching for and 576 00:36:15,410 --> 00:36:19,690 modifying code, is something that you'll do over and over again. 577 00:36:19,690 --> 00:36:23,990 So take the necessary time to practice and master that process. 578 00:36:23,990 --> 00:36:28,360 We also got to use the developer tools built into the Chrome browser. 579 00:36:28,360 --> 00:36:31,530 We're just scratching the surface of what these tools can do. 580 00:36:31,530 --> 00:36:34,580 To learn more about what's possible check the teacher's notes for 581 00:36:34,580 --> 00:36:37,100 links to additional resources. 582 00:36:37,100 --> 00:36:41,628 Next let's wrap up work on our project by updating our websites content. 583 00:36:41,628 --> 00:36:45,762 [MUSIC] 584 00:36:45,762 --> 00:36:50,740 The content that we currently have on our website is boilerplate content that 585 00:36:50,740 --> 00:36:55,430 was provided for us by the Visual Studio ASP.NET MVC project template. 586 00:36:55,430 --> 00:36:59,480 The one exception is the list of links that we added to our links page. 587 00:36:59,480 --> 00:37:03,730 In fact we were so focused on the mechanics of creating our project 588 00:37:03,730 --> 00:37:07,590 that we didn't decide what the focus of our website should be. 589 00:37:07,590 --> 00:37:11,150 We need to pick a topic when I'm working on a learning project 590 00:37:11,150 --> 00:37:14,270 I like to make it fun and interesting for myself. 591 00:37:14,270 --> 00:37:19,220 I find that if I enjoy what I'm working on I'm more likely to make time for it. 592 00:37:19,220 --> 00:37:20,360 I'd love to ski. 593 00:37:20,360 --> 00:37:23,680 So I'm going to make my website a directory of Oregon Ski Resorts. 594 00:37:24,720 --> 00:37:28,290 The basic structure of our website is flexible enough to be used for 595 00:37:28,290 --> 00:37:29,850 a variety of purposes. 596 00:37:29,850 --> 00:37:32,070 So feel free to come up with your own idea. 597 00:37:33,470 --> 00:37:36,740 Now that we have our websites topic, let's update our content. 598 00:37:37,990 --> 00:37:40,390 We'll start by updating our layout page. 599 00:37:40,390 --> 00:37:44,130 As we mentioned in an earlier video the layout pages used to specify 600 00:37:44,130 --> 00:37:47,450 the overall look and feel for every page on our website. 601 00:37:47,450 --> 00:37:52,530 So everything in the layout page appears on every page of the website. 602 00:37:52,530 --> 00:37:56,660 The file that we're looking for is located in the views shared folder. 603 00:37:57,940 --> 00:37:59,130 There it is. 604 00:37:59,130 --> 00:38:03,210 It's the file name _Layout.cshtml. 605 00:38:03,210 --> 00:38:04,940 Go ahead and doubled click it, to open it. 606 00:38:06,580 --> 00:38:12,850 The text, My ASP.NET Application appears twice in this file In the title tag, here 607 00:38:12,850 --> 00:38:17,880 in the document head, and if we scroll down a bit here again in the footer. 608 00:38:19,210 --> 00:38:23,050 Let's change both instances to Oregon Ski Resorts, so 609 00:38:23,050 --> 00:38:27,520 select that text and type Oregon Ski Resorts. 610 00:38:28,840 --> 00:38:34,020 Select and copy that text by pressing Ctrl+C then move our cursor to the title 611 00:38:34,020 --> 00:38:39,155 tag in the header, select the text to replace and press Ctrl+V. 612 00:38:40,460 --> 00:38:46,241 Let's save by pressing Ctrl+S and then F5 to run our website. 613 00:38:46,241 --> 00:38:50,950 In the browser we can see a bit of our new page title here in the tab. 614 00:38:50,950 --> 00:38:53,370 If we hover our mouse pointer over the tab, 615 00:38:53,370 --> 00:38:56,540 Chrome will display a tool tip showing the entire page title. 616 00:38:56,540 --> 00:39:01,030 Scrolling down a bit, here in the footer we can see our updated copyright line, so 617 00:39:01,030 --> 00:39:01,850 far, so good. 618 00:39:02,870 --> 00:39:05,710 Now let's turn our attention to the menu 619 00:39:05,710 --> 00:39:09,810 the text Application name still needs to be updated. 620 00:39:09,810 --> 00:39:14,220 Let's switch back to Visual Studio and see if we can find where the text lives. 621 00:39:14,220 --> 00:39:16,190 Go ahead and keep the website running. 622 00:39:16,190 --> 00:39:19,290 For now, will only be making changes to our views 623 00:39:19,290 --> 00:39:22,370 which can be edited while the website is running. 624 00:39:22,370 --> 00:39:27,520 Open the Find and Replace dialog using the keyboard shortcut Ctrl+Shift+F. 625 00:39:27,520 --> 00:39:33,830 In the Find what field, let's enter the search criteria application name and make 626 00:39:33,830 --> 00:39:39,020 sure the Look in field is set to entire solution then click the Find All button. 627 00:39:40,230 --> 00:39:43,820 Success, down here in the Find one results panel. 628 00:39:43,820 --> 00:39:46,495 We can see that we got exactly one matching line, 629 00:39:46,495 --> 00:39:49,190 double-click the search result to open the file. 630 00:39:51,070 --> 00:39:55,959 The text we were looking for is in the _Layout.cshtml file 631 00:39:55,959 --> 00:39:59,497 which is the file that we already had open. 632 00:39:59,497 --> 00:40:00,825 It really is true. 633 00:40:00,825 --> 00:40:04,438 Sometimes what you're looking for is already right in front of you. 634 00:40:04,438 --> 00:40:11,075 Let's change the text application name to Oregon Ski Resorts then save the file, 635 00:40:11,075 --> 00:40:16,461 switch back to Chrome and beat load the page by clicking the refresh 636 00:40:16,461 --> 00:40:22,500 button here in the address bar or by using the keyboard shortcut Ctrl+R. 637 00:40:22,500 --> 00:40:27,130 If the page doesn't refresh right away, don't worry, the delay is just the MVC 638 00:40:27,130 --> 00:40:30,860 framework processing the changes that we've made to our view. 639 00:40:30,860 --> 00:40:33,910 Great, here's our new website name in the menu. 640 00:40:35,320 --> 00:40:38,872 Great job getting your hands dirty and updating your website content. 641 00:40:38,872 --> 00:40:43,440 I'm gonna leave updating the rest of the content on your website as an exercise for 642 00:40:43,440 --> 00:40:45,250 you to complete on your own. 643 00:40:45,250 --> 00:40:47,820 By repeating the process that we just covered, 644 00:40:47,820 --> 00:40:50,040 you'll be able to update all the remaining pages. 645 00:40:51,240 --> 00:40:54,020 If you get stuck, be sure to stick with it. 646 00:40:54,020 --> 00:40:57,360 The most meaningful learning that you can do won't be easy. 647 00:40:57,360 --> 00:40:59,820 In fact, it should challenge you. 648 00:40:59,820 --> 00:41:03,760 If you can't figure something out, reach out to others on the treehouse community 649 00:41:03,760 --> 00:41:07,910 for help or check the teacher's notes for links to additional resources. 650 00:41:07,910 --> 00:41:11,190 Also don't forget to have fun with it. 651 00:41:11,190 --> 00:41:15,690 Before we wrap up this video, I wanna show you something that I think is pretty cool. 652 00:41:15,690 --> 00:41:19,060 Our websites look and feel which includes everything from the layout and 653 00:41:19,060 --> 00:41:22,510 color of the menu to the background color of our pages 654 00:41:22,510 --> 00:41:25,540 comes from the Twitter Bootstrap CSS framework. 655 00:41:25,540 --> 00:41:28,560 As you've see in this workshop, bootstrap makes it easy for 656 00:41:28,560 --> 00:41:32,810 developers to create websites or applications that look great. 657 00:41:32,810 --> 00:41:37,240 Another advantage of using a popular CSS framework like bootstrap is that there 658 00:41:37,240 --> 00:41:41,420 are a wide variety of compatible themes that you can download and use. 659 00:41:41,420 --> 00:41:46,260 Switching to a new bootstrap theme is an easy way to completely change the look and 660 00:41:46,260 --> 00:41:47,270 feel of your website. 661 00:41:48,410 --> 00:41:49,460 Lets see how this is done. 662 00:41:51,180 --> 00:41:55,920 Bootswatch is one of the many websites that offers Bootstrap themes. 663 00:41:55,920 --> 00:41:59,020 All the themes that we see here are free. 664 00:41:59,020 --> 00:42:02,080 Here's one that looks interesting the darkly theme. 665 00:42:02,080 --> 00:42:05,320 Let's update our website to use this theme. 666 00:42:05,320 --> 00:42:09,100 Back in Visual Studio, let's show the solution explorer panel by clicking 667 00:42:09,100 --> 00:42:15,160 the tab here on the right and then the pin in the right hand corner to keep it open. 668 00:42:15,160 --> 00:42:17,330 That's a little narrow for my taste. 669 00:42:17,330 --> 00:42:21,270 So let's grab this divider and drag it to the left to make the panel bigger. 670 00:42:22,310 --> 00:42:26,392 There are two CSS files that we need to update in our project 671 00:42:26,392 --> 00:42:30,245 the bootstrap.css and bootstrap.min.css files. 672 00:42:30,245 --> 00:42:38,730 Both of these files can be found in the Content folder, here and here. 673 00:42:38,730 --> 00:42:41,650 Switching back to my browser, I can download the CSS for 674 00:42:41,650 --> 00:42:45,960 these files by clicking the down arrow here on the Download button. 675 00:42:45,960 --> 00:42:49,440 Let's start by downloading the bootstrap.css file. 676 00:42:49,440 --> 00:42:53,780 Clicking on the link will download the CSS into a new tab. 677 00:42:53,780 --> 00:42:57,720 From here I can press Ctrl+A to select all the text 678 00:42:57,720 --> 00:43:00,300 then Ctrl+C to copy the text to the clipboard. 679 00:43:01,540 --> 00:43:06,712 Then in Visual Studio I can double click the bootstrap.css file to open it, 680 00:43:06,712 --> 00:43:11,770 press Ctrl+A to select all of the text and Ctrl+V to paste 681 00:43:11,770 --> 00:43:17,540 the text from the clipboard into the file then press Ctrl+S to save the file. 682 00:43:17,540 --> 00:43:21,980 Be sure to repeat this process for the bootstrap.min.css file. 683 00:43:21,980 --> 00:43:25,220 Now switch back to the browser and refresh the page. 684 00:43:26,260 --> 00:43:29,889 And just like that here's our website with a new code of paint. 685 00:43:29,889 --> 00:43:35,265 [MUSIC] 686 00:43:35,265 --> 00:43:39,413 I hope this workshop gave you some sense of what it's like to work with 687 00:43:39,413 --> 00:43:42,916 ASP.NET MVC, the C# language, and Visual Studio, but 688 00:43:42,916 --> 00:43:45,820 it's really just the beginning. 689 00:43:45,820 --> 00:43:47,080 I'm here with Jeremy. 690 00:43:47,080 --> 00:43:49,310 Jeremy and I are both developers and 691 00:43:49,310 --> 00:43:54,620 we work together to create the C# and ASP.NET curriculum here at Treehouse. 692 00:43:54,620 --> 00:43:58,650 Jeremy teaches the next course you'll be taking C# Basics. 693 00:43:58,650 --> 00:44:02,680 So Jeremy as a student taken C# basics what will I be learning? 694 00:44:02,680 --> 00:44:07,450 >> C# basics is a great way to start learning the C# language. 695 00:44:07,450 --> 00:44:12,010 We build a small console application called fitness frog and in fact in most of 696 00:44:12,010 --> 00:44:15,310 the courses we teach here at Treehouse you'll be building applications and 697 00:44:15,310 --> 00:44:17,150 things you can show off to others. 698 00:44:17,150 --> 00:44:21,506 >> So as a beginner, can I really start with learning C#? 699 00:44:21,506 --> 00:44:22,458 >> Yes, 700 00:44:22,458 --> 00:44:27,020 C# is a great language to start learning especially when you're new to programming. 701 00:44:27,020 --> 00:44:30,850 We don't assume that you've done anything in programming in the past. 702 00:44:30,850 --> 00:44:34,331 >> So if I'm interested in web development, is ASP.NET and 703 00:44:34,331 --> 00:44:36,290 C# the only thing that I need to learn? 704 00:44:36,290 --> 00:44:39,180 Is there is something else and if there is something else, 705 00:44:39,180 --> 00:44:40,298 can Treehouse help me with that? 706 00:44:40,298 --> 00:44:42,176 >> Yeah absolutely, 707 00:44:42,176 --> 00:44:47,960 ASP.NET MVC is actually the code that we would run on the web server. 708 00:44:47,960 --> 00:44:52,360 There's other code that runs on the client's machine inside the web browser. 709 00:44:52,360 --> 00:44:57,600 So you also want to learn things like HTML, CSS and 710 00:44:57,600 --> 00:45:02,400 JavaScript and maybe some things about how to design web pages for users. 711 00:45:02,400 --> 00:45:04,770 >> So to get started with C# basics today, 712 00:45:04,770 --> 00:45:08,340 start your free trial if you're not already a Treehouse student and 713 00:45:08,340 --> 00:45:13,840 click on tracks in the main menu and join either the C# or the ASP.NET track. 714 00:45:13,840 --> 00:45:14,390 Happy coding.