Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

ASP.NET MVC Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Adding a View

4: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.

Follow Along

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

Additional Learning

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.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up