- Adding a View 4:03
- Adding a View Review 5 questions
- Using Razor for View Layout 5:30
- Using the Razor Syntax 1 objective
- Displaying a List with Razor 4:16
- Displaying a List of Values 1 objective
- Setting Data in the Controller 5:51
- Using ViewBag 2 objectives
- Adding Design Files 4:41
- View Layouts 5:42
- Section Review 5 questions
Preview
Video Player
00:00
00:00
Adding Design Files
4:41We’ve been focused on getting our project setup and adding our first controller and view. In this video, let’s update our website’s design.
So far in this course we've been focused
on getting our projects set up and
0:00
adding our first controller and view.
0:04
Our website's design, well, let's be
honest, we really don't have a design yet.
0:07
We've just been using some basic HTML
tags with no CSS styles whatsoever.
0:12
As it turns out, our development team for
this project includes a designer.
0:18
While we've been ramping
up on the development work,
0:23
they've been working hard on creating
an interesting design for our website.
0:26
It's built on a design
framework called Bootstrap.
0:30
And if you're interested in learning more
about that, check the teacher's notes for
0:33
a link to a Bootstrap course.
0:36
In this video we're going to
use the fruit of their labor
0:39
to update our website's design.
0:42
To get started with this process,
0:45
we need to download the zip file that
the designer has provided for us.
0:47
You can find a link to the zip
file in the teacher's notes.
0:51
I've already downloaded
the file to my desktop.
0:54
To unzip it, right-click on the file and
select the extract all menu item.
0:58
And then click on the extract button.
1:04
Now we're seeing the contents
of the zip file.
1:08
There are five folders.
1:11
Content, fonts, images,
scripts, and views.
1:12
Let's take a look at
each of these folders.
1:19
The content folder contains two CSS files.
1:22
One named bootstrap.min.css,
which is the CSS for
1:24
the Twitter Bootstrap CSS framework.
1:29
And site.css,
which contains the styles for our website.
1:32
Bootstrap provides us with a set
of pre-built CSS styles for
1:37
styling elements like menus and buttons.
1:41
It also provides a responsive layout grid
which our design takes advantage of.
1:44
The fonts folder contains files for
1:49
a collection of icons that are part
of the Bootstrap CSS framework.
1:52
The images folder contains
a cover image for
1:56
each of the comic books that
we'll display in our website.
1:59
The scripts folder contains JavaScript and
related files for
2:03
the popular JQuery library.
2:07
There's also JavaScript files for
the Bootstrap CSS framework and
2:09
the Modernizr library.
2:13
Modernizr can be used to detect what HTML,
CSS, and
2:15
JavaScript features the user's
browser has available.
2:19
The Views folder contains a shared
folder that in turn contains
2:23
an _Layout.cshtml file.
2:27
This file is an MVC layout page which
provides us with an overall look and
2:31
feel for each of the pages in our website.
2:36
We'll take a closer look at
this file in the next video.
2:38
Let's add these folders and
files to our project.
2:42
To do that, select the five folders and
2:45
copy them to the clipboard
by pressing control-C.
2:48
Then open the folder that
contains our project files.
2:52
A handy shortcut for doing this is to
right-click on the project in a solution
2:56
explorer panel and select the open
folder in File Explorer menu item.
3:00
Then press control-V to paste
the folders from the clipboard
3:06
into the root of our project.
3:10
Now that we've added the design
files to the file system,
3:12
we can add them to our
Visual Studio project.
3:15
By default,
Solution Explorer will only show us
3:18
the files that are already
part of the project.
3:21
If it's not already selected,
click on the project name.
3:24
Then, in the toolbar at the top of the
panel, click on the Show All Files icon.
3:28
Now, we can see the folders and
3:33
files available on the file system
that aren't part of our project.
3:35
Their icons are outlined in dots.
3:39
Let's start by adding the content folder
by right clicking on the folder and
3:42
selecting the Include
in Project menu item.
3:47
Notice that once we add the folder,
3:50
each of the files within the folder
are also added to the project.
3:52
Go ahead and do the same thing for
the fonts, images and scripts folders.
3:56
The last folder that we need to add may
not be visible if you don't have the views
4:04
folder expanded.
4:08
Expand the views folder if you need to,
and add the shared folder to the project.
4:10
If you're using GitHub,
let's commit our changes.
4:16
Enter a commitmessage of added design
files and click the commit all button.
4:19
If Visual Studio asks you to save
the comicbookgallery.sln file,
4:28
go ahead and say yes.
4:32
In the next video, let's take a closer
look at the _Layout.cs HTML file.
4:35