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
Turning our attention to the view, let’s see how we can use a partial view to keep our code DRY.
Follow Along
To follow along commiting your changes to this course, you'll need to fork the aspnet-fitness-frog repo. Then you can clone, commit, and push your changes to your fork like this:
git clone <your-fork>
cd aspnet-fitness-frog
git checkout tags/v5.2 -b creating-a-partial-view-for-our-form
Additional Learning
For more information on the DRY (Don’t Repeat Yourself) design principle, see this Wikipedia page.
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
Let's turn our attention to the view for
the Edit Entry page.
0:00
Our View doesn't contain much code right
now, it's really just a placeholder.
0:04
Let's review our Add View.
0:08
When thinking about the form that we need,
on our Edit Entry page,
0:10
it occurs to me that our Add Entry form
has all of the elements that we need.
0:14
Fields for each of our entry model
properties along with Save and
0:19
Cancel buttons.
0:23
It's tempting to just select copy and
0:25
paste this code into our edit view,
but we don't want to do that.
0:27
We wanna keep our code dry and it so
0:32
happens that MVC gives
us a way to do that.
0:35
We can use a partial view to share
code between one or more views.
0:38
Let's see how.
0:43
To start, I'll right click
on the Views Entries folder.
0:44
And select the Add, View menu item.
0:49
For the View name let's use _EntryForm.
0:53
The naming convention for
0:59
partial views is to prefix
the view name with an underscore.
1:00
That makes it easy to identify
partial views by just their name.
1:05
For the template, we can leave the Empty
(without model) option selected.
1:09
Lastly, check the Create as partial view,
check box and click the Add button.
1:14
Let's make our partial view strongly
typed by adding a model directive
1:21
here at the top of the view.
1:25
@model
1:26
Treehouse.fitnessFrog.Models.Entry.
1:28
Then we can switch back to our Add view,
select our entire form.
1:38
Cut the selection to the clipboard
by pressing control X.
1:48
Switch back to the partial view.
1:55
Put our cursor just a couple of
lines below the model directive.
1:57
And paste by pressing Ctrl+V.
2:01
Scrolling down a bit.
2:07
We can see that Visual Studio's underlined
entry here with a red squiggle.
2:08
We need to add a using directive
to our model's namespace
2:15
@using Treehouse.FitnessFrog.Models.
2:22
That looks better now.
2:36
Let's switch back to the ad view.
2:38
We can remove our using statement.
2:40
It's no longer needed now that our form
code has been moved to the partial view.
2:42
Now we can use the partial
Html helper method
2:47
to include a partial view in this field.
2:50
@Html.Partial, and
2:53
then the name of the View _EntryForm.
2:56
That's all there is to it.
3:02
Let's switch over to our edit view.
3:04
First, we need to make the view strongly
typed by adding a model directive to
3:08
the top of the view.
3:12
Then, right below our heading,
add the call to
3:18
the partial Html helper
method @Html.Partial, and
3:23
again the name of our partial view,
_EntryForm.
3:28
If we compare the edit
view to the add view,
3:33
you'll notice that
they're almost identical.
3:36
The only difference is
the ViewBag title property value.
3:39
Having two views whose names match their
corresponding action method names,
3:43
that share a common partial view or
3:47
views, is a common pattern in MVC apps or
applications.
3:49
It allows you to embrace the default
in MVC naming conventions,
3:54
while keeping your code dry.
3:58
Let's press F5 to run and test our app.
4:00
Here's our add entry page.
4:04
We're still seeing our form which is good,
provide values for
4:06
the activity, And
duration fields and save the form.
4:10
Now we're seeing the entries list page and
4:17
here's our new entry at
the top of the list.
4:20
Let's try editing that entry, by clicking
its edit button here on the right.
4:23
Let's change the date and save the form.
4:27
Great, here's our entry on the entries
list page with the updated date.
4:34
Let's edit our entry again.
4:40
This time, let's change every field
value before we save our form.
4:43
First the date, then the activity,
then the duration,
4:49
change the intensity,
check exclude and add a note.
4:57
And save the form.
5:06
Then from the list,
click the edit button again so
5:08
that we can verify every field value.
5:10
Good, every field has
retained its new value.
5:14
We also made a change to
our server side validation.
5:18
Let's test both the Add Entry and
Edit Entry pages,
5:21
to ensure that our server side
validation still works as expected.
5:24
First, our Add Entry page.
5:28
Provide a value for
the activity field, then save the form
5:31
Good, here's the expected
server side validation message.
5:38
Click the Cancel button to
return to the entries list page.
5:42
And click the Edit button on
the first entry in the list.
5:46
Change the Duration field value to 0 and
save the form.
5:51
And here's the expected server
side validation message again.
5:57
Testing every change that you've
made is a good habit to develop.
6:01
All too often in my career, I've assumed
that something is working correctly,
6:05
only to have a user later discover
that my assumption was false.
6:09
Save yourself the embarrassment and
your user's time.
6:14
Test all of your changes.
6:18
Go ahead and stop the app.
6:20
If you're using GitHub,
let's commit our changes.
6:23
Enter a commit message of,
Completed the "Edit
6:30
Entry" page, and
click the Commit All button.
6:36
After a short code challenge,
6:41
we'll update our web app with
the ability to delete entries.
6:43
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