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