1
00:00:00,510 --> 00:00:02,580
Using the built in Project templates,

2
00:00:02,580 --> 00:00:06,240
Visual Studio makes it easy
to create an MVC website.

3
00:00:06,240 --> 00:00:07,530
While that's helpful.

4
00:00:07,530 --> 00:00:11,400
It's not very likely that the resulting
website will align with the requirements

5
00:00:11,400 --> 00:00:12,790
for your project.

6
00:00:12,790 --> 00:00:17,070
Well unless they happen to call for a
website with nothing but home, about, and

7
00:00:17,070 --> 00:00:19,080
contact pages.

8
00:00:19,080 --> 00:00:23,420
Fortunately for us adding new pages
to an MVC website is easy to do.

9
00:00:24,530 --> 00:00:25,870
Before we get started.

10
00:00:25,870 --> 00:00:29,875
We need to know a little about the page
that we're going to add for instance.

11
00:00:29,875 --> 00:00:31,575
What's the title of the page?

12
00:00:31,575 --> 00:00:34,122
What kind of content
will the page contain?

13
00:00:34,122 --> 00:00:36,253
I'm gonna go with an oldie, but goodie.

14
00:00:36,253 --> 00:00:37,477
A links page.

15
00:00:37,477 --> 00:00:39,665
That will display a list of links.

16
00:00:39,665 --> 00:00:40,710
I know.

17
00:00:40,710 --> 00:00:44,840
It's not very your original, but
it will suit our purposes just fine.

18
00:00:44,840 --> 00:00:48,790
URL path for our new links page,
will be links.

19
00:00:48,790 --> 00:00:52,080
When we browse to that URL,
the MVC framework will look for

20
00:00:52,080 --> 00:00:53,730
a controller named links.

21
00:00:53,730 --> 00:00:56,692
And an action method on that
controller named index.

22
00:00:56,692 --> 00:01:00,674
Remember since we aren't including
the actual name in the URL.

23
00:01:00,674 --> 00:01:04,432
MVC by default will look for
an action named index.

24
00:01:04,432 --> 00:01:06,260
All right.

25
00:01:06,260 --> 00:01:07,910
I think we've done enough planning.

26
00:01:07,910 --> 00:01:08,680
Let's get started.

27
00:01:09,970 --> 00:01:12,825
Our first step is to
add a links controller.

28
00:01:12,825 --> 00:01:18,060
Right-click on the controllers folder and
select the Add controller menu item.

29
00:01:19,140 --> 00:01:22,600
Visual Studio will open up a dialog
listing the available controller

30
00:01:22,600 --> 00:01:23,860
templates.

31
00:01:23,860 --> 00:01:28,470
Select the first one in the list
MVC5 controller dash empty and

32
00:01:28,470 --> 00:01:30,090
click the Add button.

33
00:01:30,090 --> 00:01:32,280
This brings up the ADD controller dialog,

34
00:01:32,280 --> 00:01:35,240
which prompts us to supply
the name of the controller.

35
00:01:35,240 --> 00:01:39,850
Notice that the dialogue is automatically
including the suffix controller.

36
00:01:39,850 --> 00:01:43,860
The MVC framework requires that controller
names end with the word controller.

37
00:01:43,860 --> 00:01:45,693
So don't remove that text.

38
00:01:45,693 --> 00:01:49,736
Instead, replace the word
Default with Links.

39
00:01:49,736 --> 00:01:50,970
And then click the Add button.

40
00:01:52,090 --> 00:01:54,350
Okay, here's our Links controller.

41
00:01:54,350 --> 00:01:55,850
Pretty simple, right?

42
00:01:55,850 --> 00:01:59,690
The first thing to notice is that
our controller is just a class.

43
00:01:59,690 --> 00:02:02,980
We can tell this because of
the class keyword right here.

44
00:02:04,400 --> 00:02:08,290
Immediately to the right of the class
keyword is the name of our class

45
00:02:08,290 --> 00:02:09,010
links controller.

46
00:02:10,250 --> 00:02:12,250
If you're not familiar with classes.

47
00:02:12,250 --> 00:02:14,920
You can think of them as
a way of organizing code.

48
00:02:14,920 --> 00:02:18,780
Everything between these two curly
braces is considered part of our class.

49
00:02:20,130 --> 00:02:23,340
The word public is called
an Access modifier.

50
00:02:23,340 --> 00:02:27,240
The public access modifier indicates that
our class should be accessible to code

51
00:02:27,240 --> 00:02:29,200
outside of our website.

52
00:02:29,200 --> 00:02:33,315
This allows the MVC framework to
discover and use our controller,

53
00:02:33,315 --> 00:02:35,604
which is what we want to be able to do.

54
00:02:35,604 --> 00:02:37,800
If we look to the right of our class name.

55
00:02:37,800 --> 00:02:41,290
We'll see a colon followed
by the word controller.

56
00:02:42,360 --> 00:02:46,150
Controller is the name of the class
that's part of the MVC framework.

57
00:02:46,150 --> 00:02:48,800
The colon indicates that
our links controller class

58
00:02:48,800 --> 00:02:51,690
is inheriting from the controller class.

59
00:02:51,690 --> 00:02:56,230
Every controller on our website needs
to inherit from the controller class.

60
00:02:56,230 --> 00:02:59,450
Don't worry if you're not
familiar with class inheritance.

61
00:02:59,450 --> 00:03:02,230
That's a concept that we'll
cover in future courses.

62
00:03:02,230 --> 00:03:04,590
For now, just think of it as a way for

63
00:03:04,590 --> 00:03:09,050
our class to use functionality that's
defined in the controller class.

64
00:03:09,050 --> 00:03:12,200
Let's take a closer look
at the index action method.

65
00:03:12,200 --> 00:03:16,150
Like our controller,
the methods access modifier is public.

66
00:03:16,150 --> 00:03:18,760
All controller action
methods must be public.

67
00:03:18,760 --> 00:03:22,250
Meaning they can be accessed
from code outside of this class.

68
00:03:22,250 --> 00:03:27,087
This allows the MVC framework to be able
to call your controllers action methods.

69
00:03:27,087 --> 00:03:30,024
The methods return type is action result.

70
00:03:30,024 --> 00:03:34,440
Which as the name describes represents
the result of an action method.

71
00:03:34,440 --> 00:03:37,630
The controller class,
the class that we're inheriting from

72
00:03:37,630 --> 00:03:41,840
provides a number of helpful methods for
returning action results.

73
00:03:41,840 --> 00:03:44,760
One of these methods the view
method that we're calling here.

74
00:03:44,760 --> 00:03:46,440
Renders your view to the response.

75
00:03:47,730 --> 00:03:51,250
Next let's add our view by right
clicking on the View method and

76
00:03:51,250 --> 00:03:53,930
selecting the ADD View menu item.

77
00:03:53,930 --> 00:03:56,580
This opens up the ADD view dialogue.

78
00:03:56,580 --> 00:04:00,310
Visual Studio will default the name
of the view to the action method name

79
00:04:00,310 --> 00:04:02,570
which in our cases index.

80
00:04:02,570 --> 00:04:04,430
If we open the template combo box.

81
00:04:04,430 --> 00:04:08,050
We can see that there are a variety
of templates that we can choose from.

82
00:04:08,050 --> 00:04:10,530
For now we're going to
keep things simple and

83
00:04:10,530 --> 00:04:13,620
select the Empty (without model) option.

84
00:04:13,620 --> 00:04:17,700
In future courses, we'll take
a closer look at the other templates.

85
00:04:17,700 --> 00:04:20,555
We'll keep the use a layout
page checkbox checked.

86
00:04:20,555 --> 00:04:22,478
Layout pages are master pages.

87
00:04:22,478 --> 00:04:24,769
That allow us to define
a common set of markup for

88
00:04:24,769 --> 00:04:26,330
all of the pages in our website.

89
00:04:27,340 --> 00:04:30,293
Go ahead and click the Add button
to finish out in the view.

90
00:04:30,293 --> 00:04:35,069
Visual Studio add an indexed.css
HTML file inside of a new

91
00:04:35,069 --> 00:04:38,679
links folder underneath the Views folder.

92
00:04:38,679 --> 00:04:41,547
The convention for
MVC websites is to use a sub folder for

93
00:04:41,547 --> 00:04:45,060
each controller's views
under the views folder.

94
00:04:45,060 --> 00:04:48,300
Additionally, the views themselves
are typically named after the action

95
00:04:48,300 --> 00:04:50,430
methods they're associated with.

96
00:04:50,430 --> 00:04:54,113
Following this convention makes it easy
to find the view you're looking for.

97
00:04:54,113 --> 00:04:56,361
For example,
if we want to find the view for

98
00:04:56,361 --> 00:04:58,803
the home controller's about action method.

99
00:04:58,803 --> 00:05:05,630
We'd look in the View's Home folder for
a file named About.cshtml.

100
00:05:05,630 --> 00:05:07,050
Let's take a look at our Links view.

101
00:05:08,270 --> 00:05:11,472
The view that was created for
us doesn't contain much content.

102
00:05:11,472 --> 00:05:15,984
That makes sense though given that we
selected the Empty Without Model template.

103
00:05:15,984 --> 00:05:18,180
The h2 tag is pretty straightforward.

104
00:05:18,180 --> 00:05:19,638
That's our page heading.

105
00:05:19,638 --> 00:05:23,040
But what's this section of the top that
starts with an at symbol followed by

106
00:05:23,040 --> 00:05:24,840
a set of curly braces?

107
00:05:24,840 --> 00:05:27,950
The at symbol's part of
a special syntax called Razor.

108
00:05:27,950 --> 00:05:31,560
That allows us to mix C#
with our HTML markup.

109
00:05:31,560 --> 00:05:35,030
Typing an at symbol tells the editor
that we want to switch to using C#.

110
00:05:35,030 --> 00:05:39,520
The curly braces create a code block,
which allows us to write one or

111
00:05:39,520 --> 00:05:40,790
more lines of C# code.

112
00:05:42,050 --> 00:05:44,398
We currently just have
a single line of code.

113
00:05:44,398 --> 00:05:47,570
ViewBag.Title equals Index.

114
00:05:47,570 --> 00:05:51,650
ViewBag is a special MVC framework
object that can be used to pass data

115
00:05:51,650 --> 00:05:55,900
from a controller to a view, or
in this case from view to view.

116
00:05:55,900 --> 00:05:58,630
By setting the ViewBag.Title
property here.

117
00:05:58,630 --> 00:06:01,270
Our layout page will use
the same ViewBag property

118
00:06:01,270 --> 00:06:03,710
to determine what
the page title should be.

119
00:06:03,710 --> 00:06:05,830
The view template sets
both the page title and

120
00:06:05,830 --> 00:06:09,540
the heading to index which was
the name of our action method.

121
00:06:09,540 --> 00:06:13,656
Let's change index to something
more meaningful like links.

122
00:06:13,656 --> 00:06:16,816
Instead of typing the text links for
our heading.

123
00:06:16,816 --> 00:06:20,534
We can actually just type in at
symbol to switch to C sharp code,

124
00:06:20,534 --> 00:06:23,069
and use the View.big the Title property.

125
00:06:23,069 --> 00:06:26,889
That way, if we ever need to change
our page title and heading text.

126
00:06:26,889 --> 00:06:30,628
We only need to change the view
ViewBag.Title property here at the top of

127
00:06:30,628 --> 00:06:31,990
the view.

128
00:06:31,990 --> 00:06:34,482
To finish our view,
let's add our list of links.

129
00:06:34,482 --> 00:06:37,326
I'll use an unordered list for that.

130
00:06:37,326 --> 00:06:40,769
Next, I'll create my first
line item with an anchor tag,

131
00:06:40,769 --> 00:06:44,446
leaving the href attribute
partially incomplete, for now.

132
00:06:47,639 --> 00:06:50,200
I want two more of these line items.

133
00:06:50,200 --> 00:06:53,342
So I'm gonna put my cursor here
at the beginning of the line.

134
00:06:53,342 --> 00:06:56,794
Press Ctrl-C to copy the line, and

135
00:06:56,794 --> 00:07:01,660
Ctrl-V to paste the line just below
the line that I'm currently on.

136
00:07:01,660 --> 00:07:05,510
Then I can press Ctrl-V again
to create a third line.

137
00:07:05,510 --> 00:07:07,000
For the links themselves.

138
00:07:07,000 --> 00:07:10,050
Let's link to Google, Bing, and Yahoo.

139
00:07:10,050 --> 00:07:12,545
So now we'll finish the href for
the first item.

140
00:07:12,545 --> 00:07:18,600
Google.com, and
then the anchor text Google.

141
00:07:18,600 --> 00:07:20,873
And then do the same for the second item.

142
00:07:20,873 --> 00:07:25,320
So bing.com, and then Bing for
the anchor text.

143
00:07:25,320 --> 00:07:28,806
And then the third item, yahoo.com.

144
00:07:28,806 --> 00:07:32,925
And then Yahoo for the anchor text.

145
00:07:32,925 --> 00:07:35,788
Just in case users don't
recognize what these links are.

146
00:07:35,788 --> 00:07:40,512
I'll add a h3 heading tag with
the text search engines right above

147
00:07:40,512 --> 00:07:42,830
the unordered list.

148
00:07:42,830 --> 00:07:48,990
Save the file by clicking the save
toolbar button, or by pressing Ctrl-S.

149
00:07:48,990 --> 00:07:53,580
Then let's run our website by pressing
the play button or the F5 function key.

150
00:07:57,330 --> 00:07:58,100
Awesome.

151
00:07:58,100 --> 00:07:59,830
Welcome to our links page.

152
00:07:59,830 --> 00:08:03,250
Let's test each of our links to
make sure that they work correctly.

153
00:08:03,250 --> 00:08:08,140
Clicking on Google takes us to google.com.

154
00:08:08,140 --> 00:08:12,590
Clicking on Bing takes us to Bing.com.

155
00:08:12,590 --> 00:08:17,160
And clicking on Yahoo
takes us to yahoo.com.

156
00:08:17,160 --> 00:08:19,548
Congrats on adding your
first controller and view.

157
00:08:19,548 --> 00:08:22,810
As an ASP.NET MVC developer,

158
00:08:22,810 --> 00:08:25,960
this is something that you'll
do frequently on your projects.

159
00:08:25,960 --> 00:08:29,630
So over time you'll become very
familiar with the process.

160
00:08:30,680 --> 00:08:32,190
If any of the terms that I used.

161
00:08:32,190 --> 00:08:37,805
Including class, method, or
return type were confusing or new to you.

162
00:08:37,805 --> 00:08:41,720
You'll want to take some time to learn
more about the C sharp language.

163
00:08:41,720 --> 00:08:42,970
See the teachers notes for

164
00:08:42,970 --> 00:08:49,093
links to additional resources that
cover the basics of the C# language.

165
00:08:49,093 --> 00:08:53,710
So, while we have our new page, expecting
our website users to manually type

166
00:08:53,710 --> 00:08:58,080
the URL for
our links page is obviously not ideal.

167
00:08:58,080 --> 00:09:00,240
Sounds like we need to update our menu.

168
00:09:00,240 --> 00:09:01,220
Let's do this next.