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
We’ve just been defining our data directly in the view. Typically, it’s the controller’s job to supply data to the view. Let’s move our data from our view to the controller.
Follow Along
To follow along commiting your changes to this course, you'll need to fork the aspnet-comic-book-gallery repo. Then you can clone, commit, and push your changes to your fork like this:
git clone <your-fork>
cd aspnet-comic-book-gallery
git checkout tags/v3.4 -b setting-data-in-the-controller
Additional Learning
For more information on using dynamic types in C#, see this MSDN page.
Keyboard Shortcuts
-
CTRL+C- Copy to clipboard -
CTRL+X- Cut to clipboard -
CTRL+V- Paste from 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
So far we've been defining our
data directly in the view.
0:00
To be honest,
doing it this way is unusual.
0:04
Typically it's the controller's job
to supply the data to the view.
0:09
That way our view can be written
in more of a generic fashion, so
0:13
it can work with any comic book.
0:17
Moving the data to our controller
also follows the separation of
0:19
concerns design principle.
0:23
We'll talk more about design
principles in a later video.
0:25
Let's move our data from
our view to the controller.
0:30
Starting in the detail view, select
the lines of code that we're interested in
0:33
moving and
press Ctrl+X to cut them to the clipboard.
0:37
IN the controllers folder,
open the ComicBooksController.cs file,
0:41
then create a couple of blank lines
above the view method call and
0:47
press Ctrl+ V to paste from the clipboard.
0:52
Go ahead and fix the indentation
of the artists array values
0:56
by selecting those lines and
pressing Tab twice.
1:00
Next we need to replace our variables with
defining properties on the ViewBag object.
1:04
ViewBag is an object provided by MVC
1:10
that allows us to pass data
from a controller to a view.
1:13
Starting with seriesTitle,
let's remove the var keyword and
1:18
type ViewBag followed by a dot.
1:23
Then, capitalize the letter
S in SeriesTitle.
1:25
Since we're switching from
using variables to properties,
1:30
we need to capitalize the first
letter of each property name,
1:33
which is the commonly accepted
convention for naming properties.
1:36
Then, do the same for issueNumber.
1:40
Description.
1:47
And artists.
1:51
We can see that it's of type dynamic.
2:00
This allows us to define properties
on the ViewBag object without
2:03
having to modify a class as
we would normally have to do.
2:07
ViewBag is one of the few real world
use cases for dynamic types in C#.
2:10
Let's save the file and
switch back to our view.
2:16
Visual Studio is underlining each of our
variable references in a red squiggle,
2:20
indicating that the variables no
longer exist in the current context.
2:25
We need to update each reference with
the appropriate ViewBag property.
2:30
Notice that if I type
ViewBag followed by a dot,
2:35
Visual Studio's IntelliSense is not able
to tell us what properties are available.
2:38
This is one of the key disadvantages
of using a dynamic type.
2:43
Let's look at that again.
2:48
I'll remove the IssueNmber variable,
then type ViewBag followed by a dot.
2:50
Nope, no help whatsoever with what
properties are available for us to use.
2:56
So I'll go ahead and
type the property name.
3:01
Let's finish up by updating description,
And both artist references.
3:04
There's the first.
3:17
And here's the second.
3:21
Okay, let's save the view and
run our website.
3:25
Everything looks good with
the exception of the issue number,
3:30
whose value is no longer displaying.
3:34
Looking at that line of
code in Visual Studio,
3:37
we can see that I misspelled
the property name.
3:40
When using ViewBag,
3:43
it's very important to make sure that
you type the property names correctly.
3:44
You won't get an error, instead,
your content just won't display.
3:48
I'll go ahead and add the missing E.
3:53
Notice that our series
title displayed correctly,
3:56
even though we didn't capitalize the first
letter as we had in the controller.
3:59
This tells us that ViewBag
properties are not case sensitive.
4:04
That being said, it would be a good
idea to be consistent anyway.
4:09
So let's capitalize the letter S,
save the view and refresh the page.
4:12
And now we have our issue number back.
4:19
Go ahead and close Chrome and
stop the website.
4:22
If you're using GitHub, let's commit our
changes before we wrap up this video.
4:27
Enter a commit message of updated
4:31
comic book detail view.
4:36
And click the commit all button.
4:41
Great job on updating our controller and
view.
4:45
Moving the data to the controller
is a nice improvement
4:48
to the overall design of our website.
4:51
Before we finish this video,
let's talk a bit about the dynamic type.
4:54
While we use the dynamic
type in this video,
4:59
it was provided to us by MVC via
the controller view back property.
5:01
In most cases it's not necessary or
5:06
even desirable to use
dynamic types in our code.
5:09
Because we loose all the advantages
of having a compiler
5:12
check that we didn't miss type something.
5:16
We saw this drawback in our view when
Visual Studio was unable to help us
5:19
from making a simple typo in
our ViewBag property names.
5:24
We want to do whatever we can to
avoid these simple kind of mistakes.
5:28
In fact, later in this course
5:32
I'll show you an alternative to using
ViewBag that I think you'll like.
5:34
If you want to learn more about the
dynamic type see the teacher's notes for
5:39
links to additional resources.
5:43
In the next video we'll be
updating our website's design.
5:46
See ya then.
5:49
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