Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Let’s see how we can use TempData to add notifications to the “Entries” list page.
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.5 -b using-tempdata
Code
Here’s the HTML markup that our designer provided for our “Entries” list page notification messages.
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span></button>
Your entry was successfully added!
</div>
Additional Learning
For more information about Bootstrap’s dismissible alerts, see this page on their documentation website.
-
0:00
Currently, after we add, update, or
-
0:02
delete an entry we're redirected to the entries list page, but
-
0:06
there's no visual indication or message that the action successfully completed.
-
0:11
Let's see how we can use TempData to resolve this issue.
-
0:15
TempData can be used to pass data from a controller to a view.
-
0:19
On its own, that's not that unique.
-
0:22
ViewBag as we've seen in this course and
-
0:24
ViewData as we'll see in future Treehouse content, can both be used in the same way.
-
0:30
What makes TempData unique is that while ViewBag and viewdata must be used within
-
0:34
the same request TempData survives to the next request and then expires.
-
0:40
This allows us to set a TempData value on a request, redirect the user, and
-
0:45
display that value as part of the new request.
-
0:48
Let's see an example of TempData in action by updating the add entry page
-
0:52
to display a confirmation message on the entries list page.
-
0:56
Go ahead and stop the app and open our controller.
-
1:06
In the controllers add post action method, we need to add a line of code to set our
-
1:11
TempData value right before the call to the redirect to action method.
-
1:21
TempData["Message"] = and
-
1:26
then our message.
-
1:29
Your entry was successfully added.
-
1:36
Now open the view for the entries list page.
-
1:39
The index CSHTML file in the Views Entries folder.
-
1:44
We need to add an if statement to this view to check if the few data message key
-
1:48
has a value.
-
1:49
And if it does render it to the view @if (
-
1:54
TempData [ "Message"] != null) then
-
2:00
a div containing @TempData ["Message"].
-
2:06
Let's test our changes by pressing F5 to run the app.
-
2:16
Browse to the ad entry page.
-
2:19
Provide values for the entry and duration fields and save the form.
-
2:24
And here's our confirmation message at the top of the entries list page.
-
2:29
If we refresh the page we can see that the message will disappear demonstrating
-
2:34
that the temp data message value didn't survive past the next request.
-
2:39
Go ahead and stop the app so
-
2:40
we can add two more confirmation messages to our controller.
-
2:43
One when users update an entry and one when they delete an entry.
-
2:48
Starting with the edit post action method, let's set the temp data message value
-
2:52
right before the call to the redirect to action method.
-
3:00
TempData ["Message"] = "Your
-
3:05
entry was successfully updated!" and
-
3:10
then in the delete post action method.
-
3:22
TempData ["Message"] = "Your
-
3:26
entry was successfully deleted!".
-
3:31
Now let's make one more change to our view.
-
3:38
When our project's designer heard that we were planning on adding
-
3:41
confirmation messages to the entry's list page, they sent me the following HTML.
-
3:46
If you're following along, you could find this markup in the teacher's notes.
-
3:50
I'll select and copy this markup to the clipboard.
-
3:53
Switch back to Visual Studio and paste from the clipboard into our view
-
3:59
replacing the contents of our if statement.
-
4:02
Don't forget to replace the static message text here with our TempData message value.
-
4:07
@TempData ["Message"].
-
4:14
The HTML that our designer provided to us is based on Bootstrap dismissible alerts.
-
4:20
For more information about that Bootstrap feature see the teacher's notes.
-
4:23
Now let's run and test our app again.
-
4:27
Browse to the add entry page provide the required values and save the form.
-
4:34
And here's a confirmation message with its improved style.
-
4:39
Notice that we can click the X on the right to dismiss the message.
-
4:44
Now let's test updating and deleting an entry.
-
4:47
First updating.
-
4:48
Click on the first entries Edit button.
-
4:52
Change the activity field value, then save the form.
-
4:58
And here's our confirmation message that the entry was successfully updated.
-
5:02
Now deleting.
-
5:04
Click the Delete button on our new entry and confirm the deletion.
-
5:10
And here's our confirmation message that the entry was successfully deleted.
-
5:15
Everything seems to work as expected.
-
5:18
Go ahead and stop the app.
-
5:21
If you're using GitHub, let's commit our changes.
-
5:28
Enter a commit message of Added confirmation messages and
-
5:33
click the Commit All button.
-
5:38
Let's also sync with the remote server.
-
5:40
Navigate to the synchronization panel, and click the Push link.
-
5:46
After the break, we'll review the section and wrap up the course.
You need to sign up for Treehouse in order to download course files.
Sign up