I want to display notifications whenever a user click on the "Add to Cart" button using the Toastr plugin. Basically, when a user click on the button, it executes the action "AddToCart" then redirects to the index page. When the page shows up, it checks the TempData value, then shows the notification.

This is the controller:

public ActionResult AddToCart(int id)
    {


        TempData["message"] = "Added";
        return RedirectToAction("Index");
    }

and the view:

@if (TempData["message"] != null)
{

    <script type="text/javascript">
        $(document).ready(function () {   
            toastr.success('Added')
        })
    </script>                                 
}

Update it worked according to @Exception's answer. However, if I use ajax such as:

@Ajax.ActionLink("Add to cart", "AddToCart", "Home", new { id = item.ProductId }, new AjaxOptions { UpdateTargetId="abc"})

it doesnt work. That may be because of the line:

$(document).ready(function ()

as the page is not reloaded. How can I fix it?

But this doesnt work. Please help. Thanks in advance!

I want to display notifications whenever a user click on the "Add to Cart" button using the Toastr plugin. Basically, when a user click on the button, it executes the action "AddToCart" then redirects to the index page. When the page shows up, it checks the TempData value, then shows the notification.

This is the controller:

public ActionResult AddToCart(int id)
    {


        TempData["message"] = "Added";
        return RedirectToAction("Index");
    }

and the view:

@if (TempData["message"] != null)
{

    <script type="text/javascript">
        $(document).ready(function () {   
            toastr.success('Added')
        })
    </script>                                 
}

Update it worked according to @Exception's answer. However, if I use ajax such as:

@Ajax.ActionLink("Add to cart", "AddToCart", "Home", new { id = item.ProductId }, new AjaxOptions { UpdateTargetId="abc"})

it doesnt work. That may be because of the line:

$(document).ready(function ()

as the page is not reloaded. How can I fix it?

But this doesnt work. Please help. Thanks in advance!

• javascript
• jquery
• asp.net-mvc-4
• toastr

• see any console errors.. – Kartikeya Khosla Commented Aug 14, 2014 at 5:23
• There is no console error – Tung Pham Commented Aug 14, 2014 at 5:27
• i will recomment you to take html.actionlink..then your problem will be solved.. – Kartikeya Khosla Commented Aug 14, 2014 at 6:08
• Html.Actionlink is ok, but I want to use Ajax so that the page doesnt have to be reloaded like other websites. – Tung Pham Commented Aug 14, 2014 at 6:12
• as per your question in AddToCart action it is redirecting to index then also page will be reloaded.. – Kartikeya Khosla Commented Aug 14, 2014 at 6:16

4 Answers 4

Answer 1:

<script type="text/javascript">
    $(document).ready(function () { 
       if('@TempData["message"]' == "Added"){
          toastr.success('Added');
       }
       else{ }
    });
</script> 

Answer 2:

Although TempData retain its value on one redirect but sometimes it creates problem(and it is recommended to avoid using TempData) in that case you can do as:

public ActionResult AddToCart(int id)
{
    .........
    return RedirectToAction("Index", new { message="Added" });  //Send Object Route//
}

public ActionResult Index(string message)
{
    .........
    if(!string.IsNullOrEmpty(message)) {
       Viewbag.message=message;
    }
    return View();
}

<script type="text/javascript">
    $(document).ready(function () { 
       if('@Viewbag.message' == "Added") {
          toastr.success('Added');
       }
       else{ }
    });
</script>

Try to add in Index Method the ViewBag statement, which contains a TempData variable:

....
ViewBag.message = TempData["message"];
....
return View();

Index.cshtml:

@if (ViewBag.message != null)

{

<script type="text/javascript">
    $(document).ready(function () {   
        toastr.success('Added')
    })
</script>                                 

}

This link might help: https://github.com/fatihBulbul/toastr.Net

Server Side:

public ActionResult Index()
    {
        ViewBag.Message =  Notification.Show("Hello World", position: Position.BottomCenter, type: ToastType.Error, timeOut: 7000);
        return View();
    }

Client Side :

    <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />

     @Html.Raw(ViewBag.Message)

Controller

TempData["message"] = "Added";

View

    @section scripts
{
        <script >
            $(document).ready(function () {
                if ('@TempData["message"]' == "Added") {
                    toastr.success('Action successfully changed....', 'ActionName');
                }
                else { }
            });
    </script>
}