Using the built in Project templates, 0:00 Visual Studio makes it easy to create an MVC website. 0:02 While that's helpful. 0:06 It's not very likely that the resulting website will align with the requirements 0:07 for your project. 0:11 Well unless they happen to call for a website with nothing but home, about, and 0:12 contact pages. 0:17 Fortunately for us adding new pages to an MVC website is easy to do. 0:19 Before we get started. 0:24 We need to know a little about the page that we're going to add for instance. 0:25 What's the title of the page? 0:29 What kind of content will the page contain? 0:31 I'm gonna go with an oldie, but goodie. 0:34 A links page. 0:36 That will display a list of links. 0:37 I know. 0:39 It's not very your original, but it will suit our purposes just fine. 0:40 URL path for our new links page, will be links. 0:44 When we browse to that URL, the MVC framework will look for 0:48 a controller named links. 0:52 And an action method on that controller named index. 0:53 Remember since we aren't including the actual name in the URL. 0:56 MVC by default will look for an action named index. 1:00 All right. 1:04 I think we've done enough planning. 1:06 Let's get started. 1:07 Our first step is to add a links controller. 1:09 Right-click on the controllers folder and select the Add controller menu item. 1:12 Visual Studio will open up a dialog listing the available controller 1:19 templates. 1:22 Select the first one in the list MVC5 controller dash empty and 1:23 click the Add button. 1:28 This brings up the ADD controller dialog, 1:30 which prompts us to supply the name of the controller. 1:32 Notice that the dialogue is automatically including the suffix controller. 1:35 The MVC framework requires that controller names end with the word controller. 1:39 So don't remove that text. 1:43 Instead, replace the word Default with Links. 1:45 And then click the Add button. 1:49 Okay, here's our Links controller. 1:52 Pretty simple, right? 1:54 The first thing to notice is that our controller is just a class. 1:55 We can tell this because of the class keyword right here. 1:59 Immediately to the right of the class keyword is the name of our class 2:04 links controller. 2:08 If you're not familiar with classes. 2:10 You can think of them as a way of organizing code. 2:12 Everything between these two curly braces is considered part of our class. 2:14 The word public is called an Access modifier. 2:20 The public access modifier indicates that our class should be accessible to code 2:23 outside of our website. 2:27 This allows the MVC framework to discover and use our controller, 2:29 which is what we want to be able to do. 2:33 If we look to the right of our class name. 2:35 We'll see a colon followed by the word controller. 2:37 Controller is the name of the class that's part of the MVC framework. 2:42 The colon indicates that our links controller class 2:46 is inheriting from the controller class. 2:48 Every controller on our website needs to inherit from the controller class. 2:51 Don't worry if you're not familiar with class inheritance. 2:56 That's a concept that we'll cover in future courses. 2:59 For now, just think of it as a way for 3:02 our class to use functionality that's defined in the controller class. 3:04 Let's take a closer look at the index action method. 3:09 Like our controller, the methods access modifier is public. 3:12 All controller action methods must be public. 3:16 Meaning they can be accessed from code outside of this class. 3:18 This allows the MVC framework to be able to call your controllers action methods. 3:22 The methods return type is action result. 3:27 Which as the name describes represents the result of an action method. 3:30 The controller class, the class that we're inheriting from 3:34 provides a number of helpful methods for returning action results. 3:37 One of these methods the view method that we're calling here. 3:41 Renders your view to the response. 3:44 Next let's add our view by right clicking on the View method and 3:47 selecting the ADD View menu item. 3:51 This opens up the ADD view dialogue. 3:53 Visual Studio will default the name of the view to the action method name 3:56 which in our cases index. 4:00 If we open the template combo box. 4:02 We can see that there are a variety of templates that we can choose from. 4:04 For now we're going to keep things simple and 4:08 select the Empty (without model) option. 4:10 In future courses, we'll take a closer look at the other templates. 4:13 We'll keep the use a layout page checkbox checked. 4:17 Layout pages are master pages. 4:20 That allow us to define a common set of markup for 4:22 all of the pages in our website. 4:24 Go ahead and click the Add button to finish out in the view. 4:27 Visual Studio add an indexed.css HTML file inside of a new 4:30 links folder underneath the Views folder. 4:35 The convention for MVC websites is to use a sub folder for 4:38 each controller's views under the views folder. 4:41 Additionally, the views themselves are typically named after the action 4:45 methods they're associated with. 4:48 Following this convention makes it easy to find the view you're looking for. 4:50 For example, if we want to find the view for 4:54 the home controller's about action method. 4:56 We'd look in the View's Home folder for a file named About.cshtml. 4:58 Let's take a look at our Links view. 5:05 The view that was created for us doesn't contain much content. 5:08 That makes sense though given that we selected the Empty Without Model template. 5:11 The h2 tag is pretty straightforward. 5:15 That's our page heading. 5:18 But what's this section of the top that starts with an at symbol followed by 5:19 a set of curly braces? 5:23 The at symbol's part of a special syntax called Razor. 5:24 That allows us to mix C# with our HTML markup. 5:27 Typing an at symbol tells the editor that we want to switch to using C#. 5:31 The curly braces create a code block, which allows us to write one or 5:35 more lines of C# code. 5:39 We currently just have a single line of code. 5:42 ViewBag.Title equals Index. 5:44 ViewBag is a special MVC framework object that can be used to pass data 5:47 from a controller to a view, or in this case from view to view. 5:51 By setting the ViewBag.Title property here. 5:55 Our layout page will use the same ViewBag property 5:58 to determine what the page title should be. 6:01 The view template sets both the page title and 6:03 the heading to index which was the name of our action method. 6:05 Let's change index to something more meaningful like links. 6:09 Instead of typing the text links for our heading. 6:13 We can actually just type in at symbol to switch to C sharp code, 6:16 and use the View.big the Title property. 6:20 That way, if we ever need to change our page title and heading text. 6:23 We only need to change the view ViewBag.Title property here at the top of 6:26 the view. 6:30 To finish our view, let's add our list of links. 6:31 I'll use an unordered list for that. 6:34 Next, I'll create my first line item with an anchor tag, 6:37 leaving the href attribute partially incomplete, for now. 6:40 I want two more of these line items. 6:47 So I'm gonna put my cursor here at the beginning of the line. 6:50 Press Ctrl-C to copy the line, and 6:53 Ctrl-V to paste the line just below the line that I'm currently on. 6:56 Then I can press Ctrl-V again to create a third line. 7:01 For the links themselves. 7:05 Let's link to Google, Bing, and Yahoo. 7:07 So now we'll finish the href for the first item. 7:10 Google.com, and then the anchor text Google. 7:12 And then do the same for the second item. 7:18 So bing.com, and then Bing for the anchor text. 7:20 And then the third item, yahoo.com. 7:25 And then Yahoo for the anchor text. 7:28 Just in case users don't recognize what these links are. 7:32 I'll add a h3 heading tag with the text search engines right above 7:35 the unordered list. 7:40 Save the file by clicking the save toolbar button, or by pressing Ctrl-S. 7:42 Then let's run our website by pressing the play button or the F5 function key. 7:48 Awesome. 7:57 Welcome to our links page. 7:58 Let's test each of our links to make sure that they work correctly. 7:59 Clicking on Google takes us to google.com. 8:03 Clicking on Bing takes us to Bing.com. 8:08 And clicking on Yahoo takes us to yahoo.com. 8:12 Congrats on adding your first controller and view. 8:17 As an ASP.NET MVC developer, 8:19 this is something that you'll do frequently on your projects. 8:22 So over time you'll become very familiar with the process. 8:25 If any of the terms that I used. 8:30 Including class, method, or return type were confusing or new to you. 8:32 You'll want to take some time to learn more about the C sharp language. 8:37 See the teachers notes for 8:41 links to additional resources that cover the basics of the C# language. 8:42 So, while we have our new page, expecting our website users to manually type 8:49 the URL for our links page is obviously not ideal. 8:53 Sounds like we need to update our menu. 8:58 Let's do this next. 9:00