This course will be retired on July 14, 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
Well done!
You have completed ASP.NET MVC Forms!
You have completed ASP.NET MVC Forms!
Preview
Let’s turn our attention to the “Delete” view.
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.4 -b updating-our-delete-view
Code
Here’s the HTML markup that our designer provided for our “Delete” view.
<div class="alert alert-danger">
Are you sure you want to delete the following entry?
</div>
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-xs-4 col-sm-3">
<label>Date</label>
</div>
<div class="col-xs-8 col-sm-9">
1/1/2016
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-3">
<label>Activity</label>
</div>
<div class="col-xs-8 col-sm-9">
Basketball
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-3">
<label>Duration</label>
</div>
<div class="col-xs-8 col-sm-9">
23.4
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-3">
<label>Intensity</label>
</div>
<div class="col-xs-8 col-sm-9">
Medium
</div>
</div>
<form method="post">
<div class="pad-top">
<button type="submit" class="btn btn-danger btn-lg margin-right">
<span class="glyphicon glyphicon-trash"></span> Delete
</button>
<a href="/" class="btn btn-warning btn-lg">
<span class="glyphicon glyphicon-remove"></span> Cancel
</a>
</div>
</form>
</div>
</div>
Additional Learning
For more information about creating responsive layouts, see this Treehouse course.
For more information about Bootstrap’s grid system, see this page on Bootstrap’s documentation website.
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
Now let's turn our attention
to the delete view.
0:00
Earlier, I gave a heads up to our
project designer to let them know
0:03
that we needed the market for
our delete view.
0:07
Here's the HTML that they sent.
0:09
If you're following along you can find
this markup in the teacher's notes.
0:12
I'll select and
copy this markup to the clipboard.
0:16
Now let's switch back to Visual Studio and
open the delete view.
0:20
Paste the clipboard into our
view right below our heading.
0:30
First, we need to make our views strongly
typed by adding a model directive
0:34
to the top of the view.
0:38
@model
0:39
Treehouse.FitnessFrog.Models.Entry.
0:41
Next, let's review the markup and
replace any static text or
0:51
values that we find with
calls to HTML helper methods.
0:55
Looks like our designer use the bootstrap
row and col-lg-6 CSS classes
0:59
to create a column that'll use half of
the available 12 columns on large screens.
1:05
That's what the lg part of
the col-lg-6 CSS class indicates.
1:10
Use six columns on large screens then
inside of that column are four rows.
1:16
One for each of the entry fields that
were displaying to our users, so
1:22
that they can confirm the deletion.
1:26
Each field in turn, is a set of bootstrap
columns that displays a label, and
1:28
a value side by side.
1:34
Each column has two bootstraps
CSS classes col-xs and col-sm.
1:36
Defining multiple bootstrap
CSS column classes
1:43
allows you to change the ratio between
the columns depending on the screen size.
1:46
So with these particular CSS classes,
our columns will have a four to
1:51
eight split on extra small screens and
a three to nine split on small screens.
1:55
For more information about
responsive layouts and
2:00
how the bootstrap grid system works,
see the teacher's notes.
2:03
Let's replace the static labels and
2:07
values in each of our fields with
calls to HTML helper methods.
2:08
For the date label we can
make a call to the label for
2:13
method passing in a lambda for
the models date property
2:16
@html.LabelFor(m=> m.date).
2:19
For the value, we can just write
the models date value to the view,
2:28
using the DateTime.ToShortDateString
method to render just the date portion of
2:32
the value @model.Date.ToShortDateString.
2:36
Remember, if we don't format the date,
2:43
either by using one of
the DateTime.ToString convenience methods,
2:45
like we're doing here, or using
a daytime format string, the date value
2:50
would display with both a date and
time portion, which is not what we want.
2:54
Now let's update the other three fields.
2:59
First, the activity field.
3:08
@Html.LabelFor(m =>
3:11
m.ActivityId).
3:17
Then for the value @Model.Activity.Name.
3:21
For the duration field
3:34
@Html.labelFor(m => m.Duration).
3:38
And for the value, @Model.Duration and
3:46
lastly for the intensity field,
3:51
@Html LabelFor(m => m.Intensity) and
3:58
for the value @Model.Intensity.
4:05
Further down there's a form element
containing a button and an anchor element.
4:11
Clicking on the button
will post the form and
4:16
since we haven't specified in action
attribute on the form element
4:19
the form a post back to the same URL that
was used in the original GET request.
4:23
This will work fine as our Delete,
Get, and
4:28
Post action methods both
use the same name, Delete.
4:31
The anchor's href attribute is set to /,
which is the root of our web app.
4:35
That will work fine as the root of our
web app will use our default route,
4:40
which is configured to be
the entry's list page.
4:44
Let's start with replacing the form
element with a call to the begin form HTML
4:47
helper method.
4:52
@using Html.BeginForm(),
then a set of curly braces.
4:55
Remember, if we place this method
call inside of a using statement,
5:03
the closing form element
will be rendered for us.
5:07
Then cut and paste the form
content into our using statement.
5:10
And remove the old form element.
5:18
Lastly, let's replace the encrypt
element static reference to the root
5:24
of our web app with a call
to the URL action method.
5:28
@Url.Action("Index").
5:34
Remember, we can't use
the ActionLink HTML helper method,
5:39
as the anchor element
contains a span element.
5:43
And the ActionLink method doesn't allow
you to provide markup for the link text.
5:46
That completes our view.
5:51
Press F5 to run the app so
that we can test our changes.
5:52
And we got a bad request error.
5:57
That's by design, remember in our
controllers delete action method we return
5:59
a bad request status code when the request
doesn't include an ID parameter value.
6:04
Let's click in the address bar and
remove the URL path so
6:10
that we're requesting
the root of the web app.
6:13
And here's our entries list page.
6:19
Click on the first entry's delete
button to navigate to the Delete page.
6:21
That looks good.
6:29
Click on the Cancel button to see if
we're returned to the entries page.
6:30
So far so good.
6:34
Click the Delete button again, This time,
6:36
click the Delete button on our
delete page to delete the entry.
6:41
Now we're back on our entries list page,
but
6:47
this time our entry is
no longer in the list.
6:49
Nice, go ahead and stop the app.
6:54
If you're using GitHub,
let's commit our changes.
6:58
Enter a commit message of Complete, Delete
page and click the Commit All button.
7:05
Next, we'll wrap up work on the
FitnessFrog web app by seeing how we can
7:14
use NVC feature to display a confirmation
message on the entries list page.
7:18
After a user has added,
updated, or deleted an entry.
7:23
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