1
00:00:00,800 --> 00:00:03,830
Now let's turn our attention
to the delete view.

2
00:00:03,830 --> 00:00:07,380
Earlier, I gave a heads up to our
project designer to let them know

3
00:00:07,380 --> 00:00:09,850
that we needed the market for
our delete view.

4
00:00:09,850 --> 00:00:12,070
Here's the HTML that they sent.

5
00:00:12,070 --> 00:00:16,090
If you're following along you can find
this markup in the teacher's notes.

6
00:00:16,090 --> 00:00:19,200
I'll select and
copy this markup to the clipboard.

7
00:00:20,260 --> 00:00:23,935
Now let's switch back to Visual Studio and
open the delete view.

8
00:00:30,037 --> 00:00:34,060
Paste the clipboard into our
view right below our heading.

9
00:00:34,060 --> 00:00:38,250
First, we need to make our views strongly
typed by adding a model directive

10
00:00:38,250 --> 00:00:39,345
to the top of the view.

11
00:00:39,345 --> 00:00:41,225
@model

12
00:00:41,225 --> 00:00:51,710
Treehouse.FitnessFrog.Models.Entry.

13
00:00:51,710 --> 00:00:55,230
Next, let's review the markup and
replace any static text or

14
00:00:55,230 --> 00:00:59,180
values that we find with
calls to HTML helper methods.

15
00:00:59,180 --> 00:01:05,860
Looks like our designer use the bootstrap
row and col-lg-6 CSS classes

16
00:01:05,860 --> 00:01:10,970
to create a column that'll use half of
the available 12 columns on large screens.

17
00:01:10,970 --> 00:01:16,610
That's what the lg part of
the col-lg-6 CSS class indicates.

18
00:01:16,610 --> 00:01:22,700
Use six columns on large screens then
inside of that column are four rows.

19
00:01:22,700 --> 00:01:26,420
One for each of the entry fields that
were displaying to our users, so

20
00:01:26,420 --> 00:01:28,810
that they can confirm the deletion.

21
00:01:28,810 --> 00:01:34,060
Each field in turn, is a set of bootstrap
columns that displays a label, and

22
00:01:34,060 --> 00:01:36,500
a value side by side.

23
00:01:36,500 --> 00:01:43,670
Each column has two bootstraps
CSS classes col-xs and col-sm.

24
00:01:43,670 --> 00:01:46,850
Defining multiple bootstrap
CSS column classes

25
00:01:46,850 --> 00:01:51,480
allows you to change the ratio between
the columns depending on the screen size.

26
00:01:51,480 --> 00:01:55,860
So with these particular CSS classes,
our columns will have a four to

27
00:01:55,860 --> 00:02:00,830
eight split on extra small screens and
a three to nine split on small screens.

28
00:02:00,830 --> 00:02:03,480
For more information about
responsive layouts and

29
00:02:03,480 --> 00:02:07,440
how the bootstrap grid system works,
see the teacher's notes.

30
00:02:07,440 --> 00:02:08,910
Let's replace the static labels and

31
00:02:08,910 --> 00:02:13,290
values in each of our fields with
calls to HTML helper methods.

32
00:02:13,290 --> 00:02:16,270
For the date label we can
make a call to the label for

33
00:02:16,270 --> 00:02:19,782
method passing in a lambda for
the models date property

34
00:02:19,782 --> 00:02:28,680
@html.LabelFor(m=> m.date).

35
00:02:28,680 --> 00:02:32,310
For the value, we can just write
the models date value to the view,

36
00:02:32,310 --> 00:02:36,957
using the DateTime.ToShortDateString
method to render just the date portion of

37
00:02:36,957 --> 00:02:43,090
the value @model.Date.ToShortDateString.

38
00:02:43,090 --> 00:02:45,759
Remember, if we don't format the date,

39
00:02:45,759 --> 00:02:50,262
either by using one of
the DateTime.ToString convenience methods,

40
00:02:50,262 --> 00:02:54,992
like we're doing here, or using
a daytime format string, the date value

41
00:02:54,992 --> 00:02:59,823
would display with both a date and
time portion, which is not what we want.

42
00:02:59,823 --> 00:03:02,781
Now let's update the other three fields.

43
00:03:08,984 --> 00:03:11,959
First, the activity field.

44
00:03:11,959 --> 00:03:17,535
@Html.LabelFor(m =>

45
00:03:17,535 --> 00:03:21,658
m.ActivityId).

46
00:03:21,658 --> 00:03:27,575
Then for the value @Model.Activity.Name.

47
00:03:34,603 --> 00:03:38,556
For the duration field

48
00:03:38,556 --> 00:03:46,469
@Html.labelFor(m => m.Duration).

49
00:03:46,469 --> 00:03:51,057
And for the value, @Model.Duration and

50
00:03:51,057 --> 00:03:54,633
lastly for the intensity field,

51
00:03:58,493 --> 00:04:05,529
@Html LabelFor(m => m.Intensity) and

52
00:04:05,529 --> 00:04:11,870
for the value @Model.Intensity.

53
00:04:11,870 --> 00:04:16,860
Further down there's a form element
containing a button and an anchor element.

54
00:04:16,860 --> 00:04:19,350
Clicking on the button
will post the form and

55
00:04:19,350 --> 00:04:23,150
since we haven't specified in action
attribute on the form element

56
00:04:23,150 --> 00:04:28,790
the form a post back to the same URL that
was used in the original GET request.

57
00:04:28,790 --> 00:04:31,220
This will work fine as our Delete,
Get, and

58
00:04:31,220 --> 00:04:35,280
Post action methods both
use the same name, Delete.

59
00:04:35,280 --> 00:04:40,650
The anchor's href attribute is set to /,
which is the root of our web app.

60
00:04:40,650 --> 00:04:44,440
That will work fine as the root of our
web app will use our default route,

61
00:04:44,440 --> 00:04:47,850
which is configured to be
the entry's list page.

62
00:04:47,850 --> 00:04:52,364
Let's start with replacing the form
element with a call to the begin form HTML

63
00:04:52,364 --> 00:04:53,344
helper method.

64
00:04:55,446 --> 00:05:02,240
@using Html.BeginForm(),
then a set of curly braces.

65
00:05:03,250 --> 00:05:07,330
Remember, if we place this method
call inside of a using statement,

66
00:05:07,330 --> 00:05:10,340
the closing form element
will be rendered for us.

67
00:05:10,340 --> 00:05:14,139
Then cut and paste the form
content into our using statement.

68
00:05:18,919 --> 00:05:20,891
And remove the old form element.

69
00:05:24,061 --> 00:05:28,233
Lastly, let's replace the encrypt
element static reference to the root

70
00:05:28,233 --> 00:05:31,070
of our web app with a call
to the URL action method.

71
00:05:34,420 --> 00:05:39,600
@Url.Action("Index").

72
00:05:39,600 --> 00:05:43,520
Remember, we can't use
the ActionLink HTML helper method,

73
00:05:43,520 --> 00:05:46,510
as the anchor element
contains a span element.

74
00:05:46,510 --> 00:05:51,010
And the ActionLink method doesn't allow
you to provide markup for the link text.

75
00:05:51,010 --> 00:05:52,600
That completes our view.

76
00:05:52,600 --> 00:05:56,050
Press F5 to run the app so
that we can test our changes.

77
00:05:57,290 --> 00:05:59,260
And we got a bad request error.

78
00:05:59,260 --> 00:06:04,890
That's by design, remember in our
controllers delete action method we return

79
00:06:04,890 --> 00:06:10,040
a bad request status code when the request
doesn't include an ID parameter value.

80
00:06:10,040 --> 00:06:13,177
Let's click in the address bar and
remove the URL path so

81
00:06:13,177 --> 00:06:15,857
that we're requesting
the root of the web app.

82
00:06:19,007 --> 00:06:21,062
And here's our entries list page.

83
00:06:21,062 --> 00:06:24,881
Click on the first entry's delete
button to navigate to the Delete page.

84
00:06:29,378 --> 00:06:30,880
That looks good.

85
00:06:30,880 --> 00:06:34,860
Click on the Cancel button to see if
we're returned to the entries page.

86
00:06:34,860 --> 00:06:36,670
So far so good.

87
00:06:36,670 --> 00:06:41,622
Click the Delete button again, This time,

88
00:06:41,622 --> 00:06:45,340
click the Delete button on our
delete page to delete the entry.

89
00:06:47,080 --> 00:06:49,380
Now we're back on our entries list page,
but

90
00:06:49,380 --> 00:06:52,050
this time our entry is
no longer in the list.

91
00:06:54,160 --> 00:06:57,200
Nice, go ahead and stop the app.

92
00:06:58,660 --> 00:07:01,216
If you're using GitHub,
let's commit our changes.

93
00:07:05,502 --> 00:07:12,820
Enter a commit message of Complete, Delete
page and click the Commit All button.

94
00:07:14,330 --> 00:07:18,170
Next, we'll wrap up work on the
FitnessFrog web app by seeing how we can

95
00:07:18,170 --> 00:07:23,340
use NVC feature to display a confirmation
message on the entries list page.

96
00:07:23,340 --> 00:07:27,070
After a user has added,
updated, or deleted an entry.