1
00:00:00,480 --> 00:00:04,776
[MUSIC]

2
00:00:04,776 --> 00:00:06,340
Welcome back.

3
00:00:06,340 --> 00:00:09,140
As we discussed at the end
of the previous section.

4
00:00:09,140 --> 00:00:13,740
Returning content directly from
the controller action method is not ideal.

5
00:00:13,740 --> 00:00:19,020
Instead, we should rely upon a view to
provide the html content for the client.

6
00:00:20,140 --> 00:00:24,600
Luckily returning to view from
an action method is simple to do.

7
00:00:24,600 --> 00:00:25,675
Lets see how it's done.

8
00:00:25,675 --> 00:00:30,510
Mvc provides the few result
action result type for

9
00:00:30,510 --> 00:00:33,550
returning views from an action method.

10
00:00:33,550 --> 00:00:37,170
Just like we did with content result and
redirect result.

11
00:00:37,170 --> 00:00:40,700
We could instantiate a view
result object ourselves.

12
00:00:40,700 --> 00:00:44,490
Instead, let's use the Controller
base class View method.

13
00:00:44,490 --> 00:00:47,480
Go ahead and
remove our existing method implementation.

14
00:00:48,720 --> 00:00:52,050
Then, return a call to the View method.

15
00:00:53,390 --> 00:00:54,896
Let's run our website again.

16
00:00:54,896 --> 00:01:00,410
And browse to /comics/detail.

17
00:01:00,410 --> 00:01:03,050
And we get the following error.

18
00:01:03,050 --> 00:01:06,650
The view detail or
its master was not found or

19
00:01:06,650 --> 00:01:09,850
no view engine supports
the search locations.

20
00:01:09,850 --> 00:01:12,260
Well, this isn't too surprising.

21
00:01:12,260 --> 00:01:17,540
We updated our controller to return
a view But we didn't create one.

22
00:01:17,540 --> 00:01:21,440
If we take a closer look at the error
message we can see where MVC

23
00:01:21,440 --> 00:01:23,130
is looking for our view.

24
00:01:23,130 --> 00:01:26,580
Looks like there are two
folders Mvc is looking within.

25
00:01:26,580 --> 00:01:29,710
The comic books and shared folders.

26
00:01:29,710 --> 00:01:31,590
Both located within the Views folder.

27
00:01:32,600 --> 00:01:36,715
By convention, all of our views
are kept in the Views folder.

28
00:01:36,715 --> 00:01:42,050
Mvc is expecting our view to be
located in a folder named comic books,

29
00:01:42,050 --> 00:01:44,425
which matches the name of our controller.

30
00:01:44,425 --> 00:01:50,280
Mvc is also expecting the view filename
to match the name of our action method.

31
00:01:50,280 --> 00:01:53,960
Both of these expectations are in fact,
conventions.

32
00:01:53,960 --> 00:01:56,990
Though it is possible from
the controller action method,

33
00:01:56,990 --> 00:02:01,150
to explicitly request a view that
doesn't follow these conventions.

34
00:02:01,150 --> 00:02:04,010
See the teacher's notes for
more information.

35
00:02:04,010 --> 00:02:09,070
The shared folder is where we can keep
views that are shared across controllers.

36
00:02:09,070 --> 00:02:12,280
We'll explore that feature
later in this course

37
00:02:12,280 --> 00:02:15,290
views can be written in
a variety of languages.

38
00:02:15,290 --> 00:02:20,630
We're going to use Razor,
which is a combination of C# and HTML.

39
00:02:20,630 --> 00:02:24,570
So we need to create a CS HTML file.

40
00:02:24,570 --> 00:02:28,580
Go ahead and close Chrome,
and stop the website.

41
00:02:28,580 --> 00:02:32,330
Add a Comic Books folder by
right-clicking on the Views folder and

42
00:02:32,330 --> 00:02:35,460
selecting the Add > New Folder menu item.

43
00:02:38,200 --> 00:02:41,180
Then, right-click on
the Comic Books folder, and

44
00:02:41,180 --> 00:02:46,400
select the Add > Mvc 5
View Page Razor menu item.

45
00:02:46,400 --> 00:02:47,990
Lets name the view detail.

46
00:02:49,960 --> 00:02:53,330
This gives us a pretty basic HTML page.

47
00:02:53,330 --> 00:02:56,580
If you need to brush up on HTML,
check to teachers notes for

48
00:02:56,580 --> 00:03:00,690
links to other courses here
at Treehouse that can help.

49
00:03:00,690 --> 00:03:06,050
Within this div element, let's add
an element that contains the text

50
00:03:06,050 --> 00:03:09,040
hello from our view.

51
00:03:10,220 --> 00:03:14,030
While we're still on
the detail .CS HTML file.

52
00:03:14,030 --> 00:03:15,970
Let's run our website by pressing F5.

53
00:03:19,300 --> 00:03:20,220
Excellent.

54
00:03:20,220 --> 00:03:26,280
Now we're seeing our view content when
browsing to the /comics/detail route.

55
00:03:26,280 --> 00:03:31,550
Notice that since we started our
website from the detail.cshtml file.

56
00:03:31,550 --> 00:03:37,190
Visual Studio assumed that we wanted
to view the /comics/detail route.

57
00:03:37,190 --> 00:03:40,840
Go ahead and close Chrome and
stop the website.

58
00:03:40,840 --> 00:03:43,300
If you're using GitHub,
let's commit our changes.

59
00:03:45,580 --> 00:03:52,189
Enter a commit message of
Added Comic Book Detail

60
00:03:52,189 --> 00:03:54,590
view and click the Commit All button.

61
00:03:55,840 --> 00:03:59,250
There's so
much more we can do with Mvc views.

62
00:03:59,250 --> 00:04:02,960
In the next video,
let's dig deeper into the Razor syntax.