Updating Our “Delete” View7:27 with James Churchill
Let’s turn our attention to the “Delete” view.
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
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>
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.
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 up