Preview
Video Player
00:00
00:00
Adding a Page
9:01Let's walk through the steps to add a new page to our website.
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