This course will be retired on June 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
Let’s use data modeling to update our data related code so that it has a clearer, well-defined structure.
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/v4.1 -b adding-a-data-model
Additional Learning
For more information about creating data models using C#, see the excellent C# Objects Treehouse course.
Keyboard Shortcuts
-
CTRL+S- Save file -
CTRL+SHIFT+B- Build solution
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
[MUSIC]
0:00
The comic book data that we have in our
controller's detail action method is
0:04
currently just a collection of variables.
0:08
In this video, we're going to take our
first steps towards updating that code,
0:10
so that it has a clear,
well-defined structure.
0:15
As you probably remember from earlier
courses, updating code without
0:19
changing its external behavior is
often referred to as refactoring.
0:23
The process of defining the structure
of your application's data is called
0:28
data modeling.
0:33
We saw how to do this in
earlier C# language courses.
0:34
And it's the same idea here for
ASP.net in VC.
0:38
When creating a data model, it's often
helpful to think of the nouns for
0:42
the data in your application.
0:46
For our comic book gallery website,
we have one primary noun, comic book.
0:48
So let's start by creating
a data model for a comic book.
0:54
In Visual Studio Solution Explorer panel,
right-click on
0:58
the Models folder and
select the Add > Class > Menu item.
1:03
Change the name of the class to ComicBook
and press Enter, or click the Add button.
1:08
Models can contain both attributes and
behaviors.
1:14
Let's start by adding our attributes.
1:18
Typically, model attributes
are defined using properties,
1:21
there are six properties that we're
going to add to the comic book class.
1:24
An integer property named ID,
1:29
we'll use this property to
uniquely identify a comic book.
1:31
A string property named Series title,
1:35
this represents the title of the series
that this comic book is part of.
1:38
Another integer property
named Issue Number,
1:42
this is the comic books Issue Number.
1:46
Another string property named Description,
this will be the comic books description.
1:49
Shocker, I know a string
array property named Artis.
1:55
This array of strings will contain a list
of the artists that were involved in
1:59
the creation of the comic.
2:04
And a boolean property named favorite,
2:05
this indicates whether or not this
comic is a favorite of ours or not.
2:08
So far so good, go ahead and
save the file by pressing control S.
2:13
Let's open up our comic
books controller and
2:17
review the comic book data
in the detail action method.
2:20
The data for the view bag series title and
2:24
issue number properties
are straightforward, but the description
2:26
property actually contains HTML formatted
content as opposed to plain text.
2:30
Even more interesting is that each value
in the artist's array property actually
2:35
looks like it has two values.
2:40
One value for the artist role and
another for the artist's name,
2:41
with this in mind, let's switch back to
our model and make a couple of changes.
2:45
First, let's read name the Description
property to DescriptionHtml,
2:50
this will make it clear that the property
will contain HTML formatted content.
2:55
Second, let's add an artist's model so
3:01
that we can change the artist's array of
strings to an array of artist objects.
3:03
Moving our artist data into a model will
improve the overall structure of our data
3:08
and make it easier to use.
3:12
Additionally, by separating the artist's
name and role into their own properties,
3:14
we are removing the presentation
of the data from the data itself.
3:19
This will give us more flexibility with
how this data is presented in our view.
3:23
Right click on the model's folder, and
select the Add > Class > Menu item.
3:28
Change the name of the class to artist and
press the Enter key.
3:34
For the model attributes let's
add properties to our class for
3:39
name and role, both of type String.
3:47
Save the file and
switch to the comic book model.
3:52
Now, let's change the artist's
property to be an array of artists.
3:55
Great, things are starting to shape
up nicely, let's build our project.
4:00
Press control shift B,
to build the solution.
4:05
Visual Studio opens the output window so
that we can monitor the progress of
4:08
the build and
see the results upon its completion.
4:13
We can see here that one project
succeeded and zero failed.
4:16
Looks like we're good to go!
4:20
If you're using GitHub,
let's commit our changes.
4:23
Into our commit message
of added comic book and
4:26
artist models, and
click the Commit All button.
4:31
Now that we have our
basic models in place.
4:36
There are improvements that we can make
to the comic book model that will help us
4:40
later when updating our
comic book detail view.
4:44
We'll work on those changes in
the next video see you then.
4:46
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