Adding a View4:03 with James Churchill
Returning content directly from a controller action method is not ideal. Instead, we should rely upon a view to provide the HTML content for the client. Let’s see how to return a view from an action method.
To follow along commiting your changes to this course, you'll need to fork the aspnet-comic-book-gallery repo. Then you can clone, commit, and push your changes to your fork like this:
git clone <your-fork> cd aspnet-comic-book-gallery git checkout tags/v3.1 -b adding-a-view
For a great introduction to HTML and CSS, don’t miss this Treehouse course.
For more information about the
Controller.View method, see this MSDN page.
[MUSIC] 0:00 Welcome back. 0:04 As we discussed at the end of the previous section. 0:06 Returning content directly from the controller action method is not ideal. 0:09 Instead, we should rely upon a view to provide the html content for the client. 0:13 Luckily returning to view from an action method is simple to do. 0:20 Lets see how it's done. 0:24 Mvc provides the few result action result type for 0:25 returning views from an action method. 0:30 Just like we did with content result and redirect result. 0:33 We could instantiate a view result object ourselves. 0:37 Instead, let's use the Controller base class View method. 0:40 Go ahead and remove our existing method implementation. 0:44 Then, return a call to the View method. 0:48 Let's run our website again. 0:53 And browse to /comics/detail. 0:54 And we get the following error. 1:00 The view detail or its master was not found or 1:03 no view engine supports the search locations. 1:06 Well, this isn't too surprising. 1:09 We updated our controller to return a view But we didn't create one. 1:12 If we take a closer look at the error message we can see where MVC 1:17 is looking for our view. 1:21 Looks like there are two folders Mvc is looking within. 1:23 The comic books and shared folders. 1:26 Both located within the Views folder. 1:29 By convention, all of our views are kept in the Views folder. 1:32 Mvc is expecting our view to be located in a folder named comic books, 1:36 which matches the name of our controller. 1:42 Mvc is also expecting the view filename to match the name of our action method. 1:44 Both of these expectations are in fact, conventions. 1:50 Though it is possible from the controller action method, 1:53 to explicitly request a view that doesn't follow these conventions. 1:56 See the teacher's notes for more information. 2:01 The shared folder is where we can keep views that are shared across controllers. 2:04 We'll explore that feature later in this course 2:09 views can be written in a variety of languages. 2:12 We're going to use Razor, which is a combination of C# and HTML. 2:15 So we need to create a CS HTML file. 2:20 Go ahead and close Chrome, and stop the website. 2:24 Add a Comic Books folder by right-clicking on the Views folder and 2:28 selecting the Add > New Folder menu item. 2:32 Then, right-click on the Comic Books folder, and 2:38 select the Add > Mvc 5 View Page Razor menu item. 2:41 Lets name the view detail. 2:46 This gives us a pretty basic HTML page. 2:49 If you need to brush up on HTML, check to teachers notes for 2:53 links to other courses here at Treehouse that can help. 2:56 Within this div element, let's add an element that contains the text 3:00 hello from our view. 3:06 While we're still on the detail .CS HTML file. 3:10 Let's run our website by pressing F5. 3:14 Excellent. 3:19 Now we're seeing our view content when browsing to the /comics/detail route. 3:20 Notice that since we started our website from the detail.cshtml file. 3:26 Visual Studio assumed that we wanted to view the /comics/detail route. 3:31 Go ahead and close Chrome and stop the website. 3:37 If you're using GitHub, let's commit our changes. 3:40 Enter a commit message of Added Comic Book Detail 3:45 view and click the Commit All button. 3:52 There's so much more we can do with Mvc views. 3:55 In the next video, let's dig deeper into the Razor syntax. 3:59
You need to sign up for Treehouse in order to download course files.Sign up