Showing a toast notification on form submission

Question

I am new to ASP.NET MVC 5. I am having trouble displaying a toast notification when I submit a form in MVC 5. It does not display on the page after I click submit. This is the code:

Controller

        [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Contact(ContactData formdata)
    {

        //what is supposed to happen when form is successful and there are no validation errors
        if (ModelState.IsValid)
        {
            var data = new ContactData
            {
                FirstName = formdata.FirstName,
                LastName = formdata.LastName,
                Email = formdata.Email,
                Message = formdata.Message

            };

            //add the message to the messages table and then save the changes
            _dbContext.Messages.Add(data);
            _dbContext.SaveChanges();
            TempData["Success"] = "Success";
            return RedirectToAction("Contact","Home");
        }
        return View(formdata); //else re display the form showing the validation errors
    }

This is the JavaScript in the View:

@section Scripts{

    <script>
        $(document).ready(function () {

            if (TempData.ContainsKey("Success")) {
                toastr.success("Message Sent Successfully");
            }

        }

    </script>
}

Note: I have implemented the form using HTML helper methods rather than JQuery. This is my form:

  @using (Html.BeginForm("Contact", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
    {
        <br /><br />
        @Html.AntiForgeryToken()
        @Html.ValidationSummary() <!--shows a list of the validation errors-->
        <div class="row col-sm-12 col-md-12 col-lg-12">

            <div class="col-sm-4 col-md-4 col-lg-4">
                <strong>Leave a Message:</strong>
            </div>

            <span class="clearfix"></span> <!--makes the content go to the left-->
            <div class="form-group col-sm-4 col-md-4 col-lg-4" style="margin-left:4px;">
                @Html.LabelFor(t => t.FirstName)
                @Html.TextBoxFor(t => t.FirstName, new { @class = "form-control" })
                @Html.ValidationMessageFor(t => t.FirstName, String.Empty, new { @style = "color:red;!important" })
            </div>
            <span class="clearfix"></span>

            <div class="form-group col-sm-4 col-md-4 col-lg-4" style="margin-left:4px;">
                @Html.LabelFor(t => t.LastName)
                @Html.TextBoxFor(t => t.LastName, new { @class = "form-control" })
                @Html.ValidationMessageFor(t => t.LastName, String.Empty, new { @style = "color:red;!important" })
            </div>
            <span class="clearfix"></span>

            <div class="form-group col-sm-4 col-md-4 col-lg-4" style="margin-left:10px;">
                @Html.LabelFor(m => m.Email)
                @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.Email, String.Empty, new { @style = "color:red;!important" })
            </div>
            <span class="clearfix"></span>

            <div class="form-group col-sm-4 col-md-4 col-lg-4" style="margin-left:10px;">
                @Html.LabelFor(m => m.Message)
                @Html.TextAreaFor(m => m.Message, new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.Message, String.Empty, new { @style = "color:red;!important" })
            </div>
            <span class="clearfix"></span>


            <div class="form-group col-sm-4 col-md-4 col-lg-4" style="margin-left:10px;">
                <input id="btnRegister" type="submit" class="btn btn-success" value="Submit" />
            </div>

        </div>
    }

I don't know what I am doing wrong. Thank you.

Answer 1

The expression TempData is server side code, So you should prefix it with @.

I like to render the script inside an if condition so that if TempData.ContainsKey("Success") returns false, the script will not be even rendered to the page (less script to compile and parse)

$(document).ready(function ()
{
    @if(TempData.ContainsKey("Success"))
    {
        @:toastr.success("Message Sent Successfully");
    }
});

Answer 2

I believe the problem is that TempData is in your Controller, and would need to be handled in your View as a part of the Model, or, if you have access to to TempData in your view, you'd need to define it in a Razor block like this:

<script>
    var jsTempDataSuccess = '@TempData["Success"]';
</script>

And then in your document ready, you can do this:

<script>
    $(document).ready(function () {

        if (jsTempDataSuccess && jsTempDataSuccess == "Success") {
            toastr.success("Message Sent Successfully");
        }
    }

</script>