How can I check if TempData is null through integration with jQuery?

Question

I would like to show a toastr (aka a popup) if TempData isn't null. However, I'm having trouble integrating the jQuery and Razor syntax together. This is my current javascript:

$(document).ready(function() {
        if (@TempData["SuccessMessage"] != null) {
            toastr.options = {
                "closeButton": true,
                "positionClass": "toast-bottom-right"
            }
            toastr.success("This is a test!");
        }
});

However, the toastr isn't displaying. I'm already checking TempData further up to also display text to the user.

@if (TempData["SuccessMessage"] != null)
{
    <div class="success-message">
        @Html.Raw(@TempData["SuccessMessage"].ToString())
    </div>
}

I'm wondering if an alternative would be to somehow use the above markup and just check if this div exists, and if so, show the toastr? Or perhaps I can integrate the two checks into one? Suggestions?

have you looked at the generated markup? my guess is that you have `if ( != null) {`, which is obviously invalid. — Tsahi Asher, May 05 '15 at 16:05

score 6 · Accepted Answer · edited May 23 '17 at 12:33

6

I was able to get it working with the following code:

$(document).ready(function() {
    var success = @((TempData["SuccessMessage"] != null).ToString().ToLower());

    if (success == true) {
        toastr.options = {
            "closeButton": true,
            "positionClass": "toast-bottom-right"
        }
        toastr.success("Success!  You're now registered for Lose A Ton!");
    }
});

For anyone curious, I had to call ToLower() because TempData would always return True or False, rather than true or false. The reasons for this are explained here.

edited May 23 '17 at 12:33

Community

1
1

answered May 12 '15 at 12:03

The Vanilla Thrilla

1,915
10
30
49

Just for reference, you can set the options of a specific toast by suppling the options as the third argument of the toast.success function. – Tim Ferrell Jun 05 '15 at 04:07

Tsahi Asher · Answer 2 · 2015-05-06T14:30:26.280

4

you should do something like

if (@(TempData["SuccessMessage"] == null ? "null" : ('"' + TempData["SuccessMessage"] + '"')) != null) {

so that the generated markup in case TempDate is null will be

if (null != null) {

edited May 06 '15 at 14:30

answered May 05 '15 at 16:07

Tsahi Asher

1,767
15
28

@JacobRoberts how? `null != null` is false, and `"foo" != null` is true. he would actually have to surround the TempData[] expression with quotes so it's a string in client code. fixing. – Tsahi Asher May 06 '15 at 14:26
You are right `null != null` is false but your statement with the ternary operator is always going to make that statement true becuase `"null" != null` is true and `TempData["SuccessMessage"] != null` is always going to be true as well because if it was null, you are setting it to `"null"` with the ternary. – Jacob Roberts May 06 '15 at 15:17
@JacobRoberts the ternary doesn't set TempData, it only reads it. What I tried to achieve here (haven't run it of course) is to print `null` to the client if `TempData["SuccessMessage"]` is null and the value of `TempData["SuccessMessage"]` as a string if it isn't. – Tsahi Asher May 10 '15 at 07:33

score 1 · Answer 3 · edited Jun 13 '16 at 19:41

1

TempData Value in Jquery shown below.

$(document).ready(function () {
    var tempdataval = '@TempData["Value"]';
    if (tempdataval != null && tempdataval != '') {
        alert(tempdataval);
    }
});

edited Jun 13 '16 at 19:41

Kara

6,115
16
50
57

answered Nov 23 '15 at 11:49

kavitha Reddy

3,303
24
14

Jacob Roberts · Answer 4 · 2015-05-05T16:20:34.227

You can wrap your java in <text></text> to tell Razor that it isn't c#, but inside a c# block

@if (TempData["SuccessMessage"] != null)
{
<text>
toastr.options = {
            "closeButton": true,
            "positionClass": "toast-bottom-right"
        }
        toastr.success("This is a test!");
</text>
}

You can also convert @(TempData["SuccessMessage"] != null) into a javascript bool and then use a javascript if statement, like so...

var hasSuccessMsg = @(TempData["SuccessMessage"] != null) === 'true';
if (hasSuccessMsg) {
    //do your work here.
}

score 0 · Answer 5 · edited Jun 28 '20 at 01:03

0

@if (TempData["SuccessMessage"] != null) {
    <script>
       $(document).ready(function() {
            toastr.options = {
                "closeButton": true,
                "positionClass": "toast-bottom-right"
            }
            toastr.success("This is a test!");     
      });
   </script>
 }

edited Jun 28 '20 at 01:03

MarredCheese

17,541
8
92
91

answered May 05 '15 at 16:37

Harry

1
2

How can I check if TempData is null through integration with jQuery?

5 Answers5

Linked