This workshop will be retired on May 1, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Our website currently just has the boilerplate content that Visual Studio provided for us. Let's learn how to update our website's content.
Additional Learning
We're just scratching the surface of what you can do with ASP.NET MVC views. Check out the official ASP.NET site for more information about views.
If you get stuck or want to help others, be sure to check out the Treehouse Community.
Twitter Bootstrap
Here are some great resources for learning more about Twitter Bootstrap.
Keyboard Shortcuts
Visual Studio
- F5 - Start debugging (i.e. build and run your website/project)
- Ctrl + Shift + F - Find in Files
- Ctrl + S - Save Current File
Google Chrome
- Ctrl + R - Refresh the current page
General
- Ctrl + A - Select all
- Ctrl + C - Copy to the clipboard
- Ctrl + V - Paste from the clipboard
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The content that we currently have on
our website is boilerplate content
0:00
that was provided for us by the Visual
Studio ASP.NET MVC project template.
0:03
The one exception is the list of links
that we added to our links page.
0:08
In fact we were so focused on
the mechanics of creating our project
0:13
that we didn't decide what
the focus of our website should be.
0:17
We need to pick a topic.
0:21
When I'm working on a learning project,
I like to make it fun and interesting for
0:23
myself.
0:26
I find that if I enjoy what I'm working
on, I'm more likely to make time for it.
0:28
I love to ski, so I'm going to make my
website a directory of Oregon ski resorts.
0:33
The basic structure of our website
is flexible enough to be used for
0:38
a variety of purposes, so
feel free to come up with your own idea.
0:42
Now that we have our website's topic,
let's update our content.
0:47
We'll start by updating our layout page.
0:51
As we mentioned in an earlier video,
the layout page is used to specify
0:54
the overall look and feel for
every page on our website.
0:57
So everything in the layout page
appears on every page of the website.
1:01
The file that we're looking for
is located in the Views > Shared folder.
1:06
There it is.
1:11
It's the file named _layout.cshtml.
1:12
Go ahead and double click it to open it.
1:17
The text My ASP.NET Application
appears twice in this file.
1:20
in the title tag here in
the document head and
1:25
if we scroll down a bit,
here again in the footer.
1:28
Let's change both instances
to Oregon Ski Resorts.
1:33
So select that text and
type Oregon Ski Resorts.
1:36
Select and
copy that text by pressing Ctrl+C then
1:42
move our cursor to the title
tag in the header.
1:46
Select the text to replace and
press Ctrl+V.
1:49
Let's save by pressing Ctrl+S and
then F5 to run our website.
1:54
In the browser we can see a bit of
our new page title here in the tab.
2:00
If we hover our mouse pointer over the tab
2:04
Chrome will display a tool tab showing
the entire page title scrolling down a bit
2:07
here in the footer we can see our
updated copyright line so far so good.
2:11
Now let's turn our attention to the menu.
2:16
The text application name
still needs to be updated.
2:19
Let's switch back to Visual Studio and
see if we can find where the text lives.
2:23
Go ahead and keep the website running.
2:28
For now,
we'll only be making changes to our views
2:30
which can be edited while
the website is running.
2:33
Open the Find and Replace dialogue using
the keyboard shortcut Ctrl+Shift+F.
2:36
In the find what field let's enter the
search criteria application.name and make
2:41
sure the looking field is set to entire
solution then click the find all button.
2:47
Success down here in
the Find one results panel.
2:54
We can see that we got
exactly one match in line.
2:57
Double-click the search
result to open the file.
3:00
The text we were looking for
is in the _Layout.cshtml file,
3:04
which is the file that
we already had open.
3:10
It really is true.
3:13
Sometimes what you're looking for
is already right in front of you.
3:14
Let's change the text application name to
Oregon Ski resorts then save the file,
3:18
switch back to Chrome and reload the page
by clicking the refresh button here in
3:26
the address bar or
by using the keyboard shortcut Ctrl+R.
3:30
If the page doesn't refresh right away
don't worry, the delay is just the MVC
3:36
framework processing the changes
that we've made to our view.
3:40
Great, here's our new
website name in the menu.
3:44
Great job getting your hands dirty and
updating your website content.
3:49
I'm gonna leave updating the rest of the
content on your website as an exercise for
3:53
you to complete on your own.
3:57
By repeating the process
that we just covered
3:59
you'll be able to update
all of the remaining pages.
4:01
If you get stuck be sure to stick with it.
4:05
The most meaningful learning
that you can do won't be easy.
4:07
In fact, it should challenge you.
4:11
If you can't figure something out reach
out to others on the tree house community
4:13
for help or check the teacher's notes for
links to additional resources.
4:17
Also don't forget to have fun with it.
4:21
Before we wrap up this video I wanna show
you something that I think is pretty cool,
4:25
our websites look and feel which
includes everything from the layout and
4:29
color of the menu to
the background color of our pages
4:32
comes from the Twitter
bootstrap CSS framework.
4:36
As you've seen in this workshop
Bootstrap makes it easy for
4:39
developers to create websites or
applications that look great.
4:42
Another advantage of using a popular CSS
framework like Bootstrap is that there
4:46
are a wide variety of compatible
themes that you can download and use.
4:50
Switching to a new Bootstrap theme is an
easy way to completely change the look and
4:55
feel of your website.
5:00
Let's see how this is done.
5:02
Bootswatch is one of the many websites
that offers bootstrap themes.
5:05
All the themes that we see here are free.
5:09
Here's one that looks interesting,
the darkly theme.
5:12
Let's update our website
to use this theme.
5:15
Back in Visual Studio, let's show
the Solution Explorer panel by clicking
5:19
the tab here on the right and then the pin
in the right-hand corner to keep it open.
5:22
That's a little narrow for my taste,
so let's grab this divider and
5:28
drag it to the left to
make the panel bigger.
5:32
There are two CSS files that we
need to update in our project.
5:36
The bootstrap.css and
bootstrap.min.css files.
5:39
Both of these files can be
found in the content folder,
5:44
here and here.
5:47
Switching back to my browser.
5:52
I can download the CSS for
5:54
these files by clicking the down
arrow here on the download button.
5:55
Let's start by downloading
the bootstrapped.css file
5:59
clicking on the link will
download the CSS into a new tab.
6:03
From here I can press Ctrl+A to
select all the text then Ctrl+C
6:07
to copy the text to the clipboard.
6:12
Then in Visual Studio I can double click
the bootstrap.css file to open it.
6:15
Press Ctrl+A to select all of the text and
6:21
Ctrl+V to paste the text from
the clipboard into the file.
6:24
Then press Ctrl+S to save the file.
6:27
Be sure to repeat this process for
the bootstrapped.min.css file.
6:31
Now switch back to the browser and
refresh the page.
6:35
And just like that here's our
website with a new code of paint.
6:40
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up