Workshop

[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 set up Workspace

Sign up