Using the built in Project templates,

Visual Studio makes it easy to create an MVC website.

While that's helpful.

It's not very likely that the resulting website will align with the requirements

for your project.

Well unless they happen to call for a website with nothing but home, about, and

contact pages.

Fortunately for us adding new pages to an MVC website is easy to do.

Before we get started.

We need to know a little about the page that we're going to add for instance.

What's the title of the page?

What kind of content will the page contain?

I'm gonna go with an oldie, but goodie.

A links page.

That will display a list of links.

I know.

It's not very your original, but it will suit our purposes just fine.

URL path for our new links page, will be links.

When we browse to that URL, the MVC framework will look for

a controller named links.

And an action method on that controller named index.

Remember since we aren't including the actual name in the URL.

MVC by default will look for an action named index.

All right.

I think we've done enough planning.

Let's get started.

Our first step is to add a links controller.

Right-click on the controllers folder and select the Add controller menu item.

Visual Studio will open up a dialog listing the available controller

templates.

Select the first one in the list MVC5 controller dash empty and

click the Add button.

This brings up the ADD controller dialog,

which prompts us to supply the name of the controller.

Notice that the dialogue is automatically including the suffix controller.

The MVC framework requires that controller names end with the word controller.

So don't remove that text.

Instead, replace the word Default with Links.

And then click the Add button.

Okay, here's our Links controller.

Pretty simple, right?

The first thing to notice is that our controller is just a class.

We can tell this because of the class keyword right here.

Immediately to the right of the class keyword is the name of our class

links controller.

If you're not familiar with classes.

You can think of them as a way of organizing code.

Everything between these two curly braces is considered part of our class.

The word public is called an Access modifier.

The public access modifier indicates that our class should be accessible to code

outside of our website.

This allows the MVC framework to discover and use our controller,

which is what we want to be able to do.

If we look to the right of our class name.

We'll see a colon followed by the word controller.

Controller is the name of the class that's part of the MVC framework.

The colon indicates that our links controller class

is inheriting from the controller class.

Every controller on our website needs to inherit from the controller class.

Don't worry if you're not familiar with class inheritance.

That's a concept that we'll cover in future courses.

For now, just think of it as a way for

our class to use functionality that's defined in the controller class.

Let's take a closer look at the index action method.

Like our controller, the methods access modifier is public.

All controller action methods must be public.

Meaning they can be accessed from code outside of this class.

This allows the MVC framework to be able to call your controllers action methods.

The methods return type is action result.

Which as the name describes represents the result of an action method.

The controller class, the class that we're inheriting from

provides a number of helpful methods for returning action results.

One of these methods the view method that we're calling here.

Renders your view to the response.

Next let's add our view by right clicking on the View method and

selecting the ADD View menu item.

This opens up the ADD view dialogue.

Visual Studio will default the name of the view to the action method name

which in our cases index.

If we open the template combo box.

We can see that there are a variety of templates that we can choose from.

For now we're going to keep things simple and

select the Empty (without model) option.

In future courses, we'll take a closer look at the other templates.

We'll keep the use a layout page checkbox checked.

Layout pages are master pages.

That allow us to define a common set of markup for

all of the pages in our website.

Go ahead and click the Add button to finish out in the view.

Visual Studio add an indexed.css HTML file inside of a new

links folder underneath the Views folder.

The convention for MVC websites is to use a sub folder for

each controller's views under the views folder.

Additionally, the views themselves are typically named after the action

methods they're associated with.

Following this convention makes it easy to find the view you're looking for.

For example, if we want to find the view for

the home controller's about action method.

We'd look in the View's Home folder for a file named About.cshtml.

Let's take a look at our Links view.

The view that was created for us doesn't contain much content.

That makes sense though given that we selected the Empty Without Model template.

The h2 tag is pretty straightforward.

That's our page heading.

But what's this section of the top that starts with an at symbol followed by

a set of curly braces?

The at symbol's part of a special syntax called Razor.

That allows us to mix C# with our HTML markup.

Typing an at symbol tells the editor that we want to switch to using C#.

The curly braces create a code block, which allows us to write one or

more lines of C# code.

We currently just have a single line of code.

ViewBag.Title equals Index.

ViewBag is a special MVC framework object that can be used to pass data

from a controller to a view, or in this case from view to view.

By setting the ViewBag.Title property here.

Our layout page will use the same ViewBag property

to determine what the page title should be.

The view template sets both the page title and

the heading to index which was the name of our action method.

Let's change index to something more meaningful like links.

Instead of typing the text links for our heading.

We can actually just type in at symbol to switch to C sharp code,

and use the View.big the Title property.

That way, if we ever need to change our page title and heading text.

We only need to change the view ViewBag.Title property here at the top of

the view.

To finish our view, let's add our list of links.

I'll use an unordered list for that.

Next, I'll create my first line item with an anchor tag,

leaving the href attribute partially incomplete, for now.

I want two more of these line items.

So I'm gonna put my cursor here at the beginning of the line.

Press Ctrl-C to copy the line, and

Ctrl-V to paste the line just below the line that I'm currently on.

Then I can press Ctrl-V again to create a third line.

For the links themselves.

Let's link to Google, Bing, and Yahoo.

So now we'll finish the href for the first item.

Google.com, and then the anchor text Google.

And then do the same for the second item.

So bing.com, and then Bing for the anchor text.

And then the third item, yahoo.com.

And then Yahoo for the anchor text.

Just in case users don't recognize what these links are.

I'll add a h3 heading tag with the text search engines right above

the unordered list.

Save the file by clicking the save toolbar button, or by pressing Ctrl-S.

Then let's run our website by pressing the play button or the F5 function key.

Awesome.

Welcome to our links page.

Let's test each of our links to make sure that they work correctly.

Clicking on Google takes us to google.com.

Clicking on Bing takes us to Bing.com.

And clicking on Yahoo takes us to yahoo.com.

Congrats on adding your first controller and view.

As an ASP.NET MVC developer,

this is something that you'll do frequently on your projects.

So over time you'll become very familiar with the process.

If any of the terms that I used.

Including class, method, or return type were confusing or new to you.

You'll want to take some time to learn more about the C sharp language.

See the teachers notes for

links to additional resources that cover the basics of the C# language.

So, while we have our new page, expecting our website users to manually type

the URL for our links page is obviously not ideal.

Sounds like we need to update our menu.

Let's do this next.