1
00:00:00,390 --> 00:00:04,240
Let's turn our attention to the view for
the Edit Entry page.

2
00:00:04,240 --> 00:00:08,680
Our View doesn't contain much code right
now, it's really just a placeholder.

3
00:00:08,680 --> 00:00:10,640
Let's review our Add View.

4
00:00:10,640 --> 00:00:14,290
When thinking about the form that we need,
on our Edit Entry page,

5
00:00:14,290 --> 00:00:19,150
it occurs to me that our Add Entry form
has all of the elements that we need.

6
00:00:19,150 --> 00:00:23,890
Fields for each of our entry model
properties along with Save and

7
00:00:23,890 --> 00:00:25,380
Cancel buttons.

8
00:00:25,380 --> 00:00:27,710
It's tempting to just select copy and

9
00:00:27,710 --> 00:00:32,370
paste this code into our edit view,
but we don't want to do that.

10
00:00:32,370 --> 00:00:35,020
We wanna keep our code dry and it so

11
00:00:35,020 --> 00:00:38,650
happens that MVC gives
us a way to do that.

12
00:00:38,650 --> 00:00:43,220
We can use a partial view to share
code between one or more views.

13
00:00:43,220 --> 00:00:44,370
Let's see how.

14
00:00:44,370 --> 00:00:49,300
To start, I'll right click
on the Views Entries folder.

15
00:00:49,300 --> 00:00:52,230
And select the Add, View menu item.

16
00:00:53,940 --> 00:00:59,840
For the View name let's use _EntryForm.

17
00:00:59,840 --> 00:01:00,860
The naming convention for

18
00:01:00,860 --> 00:01:05,310
partial views is to prefix
the view name with an underscore.

19
00:01:05,310 --> 00:01:09,560
That makes it easy to identify
partial views by just their name.

20
00:01:09,560 --> 00:01:13,800
For the template, we can leave the Empty
(without model) option selected.

21
00:01:14,990 --> 00:01:20,610
Lastly, check the Create as partial view,
check box and click the Add button.

22
00:01:21,650 --> 00:01:25,790
Let's make our partial view strongly
typed by adding a model directive

23
00:01:25,790 --> 00:01:26,882
here at the top of the view.

24
00:01:26,882 --> 00:01:28,604
@model

25
00:01:28,604 --> 00:01:38,290
Treehouse.fitnessFrog.Models.Entry.

26
00:01:38,290 --> 00:01:43,565
Then we can switch back to our Add view,
select our entire form.

27
00:01:48,674 --> 00:01:52,270
Cut the selection to the clipboard
by pressing control X.

28
00:01:55,580 --> 00:01:57,110
Switch back to the partial view.

29
00:01:57,110 --> 00:02:01,240
Put our cursor just a couple of
lines below the model directive.

30
00:02:01,240 --> 00:02:04,239
And paste by pressing Ctrl+V.

31
00:02:07,444 --> 00:02:08,850
Scrolling down a bit.

32
00:02:08,850 --> 00:02:13,080
We can see that Visual Studio's underlined
entry here with a red squiggle.

33
00:02:15,501 --> 00:02:19,481
We need to add a using directive
to our model's namespace

34
00:02:22,903 --> 00:02:31,279
@using Treehouse.FitnessFrog.Models.

35
00:02:36,056 --> 00:02:38,220
That looks better now.

36
00:02:38,220 --> 00:02:39,730
Let's switch back to the ad view.

37
00:02:40,750 --> 00:02:42,580
We can remove our using statement.

38
00:02:42,580 --> 00:02:46,400
It's no longer needed now that our form
code has been moved to the partial view.

39
00:02:47,420 --> 00:02:50,920
Now we can use the partial
Html helper method

40
00:02:50,920 --> 00:02:53,175
to include a partial view in this field.

41
00:02:53,175 --> 00:02:56,709
@Html.Partial, and

42
00:02:56,709 --> 00:03:02,544
then the name of the View _EntryForm.

43
00:03:02,544 --> 00:03:04,730
That's all there is to it.

44
00:03:04,730 --> 00:03:06,210
Let's switch over to our edit view.

45
00:03:08,000 --> 00:03:12,226
First, we need to make the view strongly
typed by adding a model directive to

46
00:03:12,226 --> 00:03:13,359
the top of the view.

47
00:03:18,970 --> 00:03:23,596
Then, right below our heading,
add the call to

48
00:03:23,596 --> 00:03:28,918
the partial Html helper
method @Html.Partial, and

49
00:03:28,918 --> 00:03:33,930
again the name of our partial view,
_EntryForm.

50
00:03:33,930 --> 00:03:36,630
If we compare the edit
view to the add view,

51
00:03:36,630 --> 00:03:39,470
you'll notice that
they're almost identical.

52
00:03:39,470 --> 00:03:43,470
The only difference is
the ViewBag title property value.

53
00:03:43,470 --> 00:03:47,950
Having two views whose names match their
corresponding action method names,

54
00:03:47,950 --> 00:03:49,750
that share a common partial view or

55
00:03:49,750 --> 00:03:54,520
views, is a common pattern in MVC apps or
applications.

56
00:03:54,520 --> 00:03:58,120
It allows you to embrace the default
in MVC naming conventions,

57
00:03:58,120 --> 00:04:00,040
while keeping your code dry.

58
00:04:00,040 --> 00:04:02,410
Let's press F5 to run and test our app.

59
00:04:04,390 --> 00:04:06,150
Here's our add entry page.

60
00:04:06,150 --> 00:04:10,086
We're still seeing our form which is good,
provide values for

61
00:04:10,086 --> 00:04:15,820
the activity, And
duration fields and save the form.

62
00:04:17,100 --> 00:04:20,320
Now we're seeing the entries list page and

63
00:04:20,320 --> 00:04:23,100
here's our new entry at
the top of the list.

64
00:04:23,100 --> 00:04:26,800
Let's try editing that entry, by clicking
its edit button here on the right.

65
00:04:27,920 --> 00:04:30,950
Let's change the date and save the form.

66
00:04:34,244 --> 00:04:39,050
Great, here's our entry on the entries
list page with the updated date.

67
00:04:40,150 --> 00:04:41,610
Let's edit our entry again.

68
00:04:43,960 --> 00:04:47,950
This time, let's change every field
value before we save our form.

69
00:04:49,400 --> 00:04:55,500
First the date, then the activity,
then the duration,

70
00:04:57,320 --> 00:05:01,470
change the intensity,
check exclude and add a note.

71
00:05:06,070 --> 00:05:06,980
And save the form.

72
00:05:08,320 --> 00:05:10,940
Then from the list,
click the edit button again so

73
00:05:10,940 --> 00:05:12,830
that we can verify every field value.

74
00:05:14,430 --> 00:05:18,190
Good, every field has
retained its new value.

75
00:05:18,190 --> 00:05:21,320
We also made a change to
our server side validation.

76
00:05:21,320 --> 00:05:24,650
Let's test both the Add Entry and
Edit Entry pages,

77
00:05:24,650 --> 00:05:28,460
to ensure that our server side
validation still works as expected.

78
00:05:28,460 --> 00:05:29,890
First, our Add Entry page.

79
00:05:31,900 --> 00:05:35,216
Provide a value for
the activity field, then save the form

80
00:05:38,630 --> 00:05:42,670
Good, here's the expected
server side validation message.

81
00:05:42,670 --> 00:05:46,130
Click the Cancel button to
return to the entries list page.

82
00:05:46,130 --> 00:05:48,982
And click the Edit button on
the first entry in the list.

83
00:05:51,126 --> 00:05:55,177
Change the Duration field value to 0 and
save the form.

84
00:05:57,466 --> 00:06:00,790
And here's the expected server
side validation message again.

85
00:06:01,950 --> 00:06:05,370
Testing every change that you've
made is a good habit to develop.

86
00:06:05,370 --> 00:06:09,810
All too often in my career, I've assumed
that something is working correctly,

87
00:06:09,810 --> 00:06:14,160
only to have a user later discover
that my assumption was false.

88
00:06:14,160 --> 00:06:18,010
Save yourself the embarrassment and
your user's time.

89
00:06:18,010 --> 00:06:19,370
Test all of your changes.

90
00:06:20,900 --> 00:06:22,380
Go ahead and stop the app.

91
00:06:23,730 --> 00:06:26,310
If you're using GitHub,
let's commit our changes.

92
00:06:30,720 --> 00:06:36,079
Enter a commit message of,
Completed the "Edit

93
00:06:36,079 --> 00:06:40,260
Entry" page, and
click the Commit All button.

94
00:06:41,830 --> 00:06:43,620
After a short code challenge,

95
00:06:43,620 --> 00:06:46,890
we'll update our web app with
the ability to delete entries.