access tempdata in javascript in mvc4

Question

I am trying to access TempData in Javascript. but getting null value. I am making ajax call to Update the record and i want to display Record updated succesfully message. which will come from UpdateOperation action from the controller. but currently it will display null value. I also check with Firebug it shows as follows:

function onComplete(e) {

if (e.name == "update") {

alert('');

} 

Here is my code of controller

 public class OperationController : BaseController
    {
        /// <summary>
        /// Index action will return template view of the page without data
        /// </summary>
        /// <returns>Blank Action</returns>
        public ActionResult Index()
        {
            return this.View();
        }

        /// <summary>
        /// Get all Operation from System
        /// </summary>
        /// <returns>return action result</returns>
        [GridAction]
        public ActionResult SelectOperation()
        {
            IEnumerable<OperationEntity> operationList = OperationComponent.GetAll();
            return this.View(new GridModel(operationList));
        }

        /// <summary>
        /// Method for update operation
        /// </summary>
        /// <param name="entity">moduleViewModel to update Module</param>
        /// <returns>return action result</returns>
        [GridAction]
        public ActionResult UpdateOperation(OperationEntity entity)
        {
            if (ModelState.IsValid)
            {
                entity.Log = new BusinessCore.BusinessEntities.LogDetails();
                entity.Log.ModifiedBy = SessionHelper.UserId;
                Status status = OperationComponent.Update(entity);
                this.TempData["AlertMessage"] = status.Message;
                this.ViewData["_AlertMessage"] = status.Message;
                return this.View(new GridModel(OperationComponent.GetAll()));
            }
            else
            {
                return this.View(entity);
            }
        }
    }

In my view

@using Telerik.Web.Mvc.UI;
@{
    ViewBag.Title = "Operation List";
}

<h2>@ViewBag.Title</h2>
<script src="../../../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//    function onSave(e) {
//        alert('Record Save Succesfully');
//    }
    function onComplete(e) {
        if (e.name == "update") {
           alert('@TempData["AlertMessage"]');
            alert('@ViewData["_AlertMessage"]');
        }
        if (e.name == "insert") {
            alert("Operation Inserted Successfully");
        }
        if (e.name == "delete") {
            alert("Operation Deleted Successfully");
        }
    }
    function newAlert(type, message) {
    if (message != "" || message != null) {
        $("#alert-area").append($("<div class='alert alert-success " + type + " fade in' data-alert><p><b> " + message + " </b></p></div>"));
        $(".alert-success").delay(4000).fadeOut("slow", function () { $(this).remove(); });
    }
}
</script>

@(Html.Telerik().Grid<QuexstERP.BusinessCore.BusinessEntities.SysAdmin.OperationEntity>()
        .Name("Grid")
         .DataKeys(keys => 
        {
            keys.Add(p => p.Id);
        })
                    .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Image).ImageHtmlAttributes(new { style = "margin-left:0", title = "Add" }))
        .DataBinding(dataBinding =>
        {
            dataBinding.Ajax()
                .Select("SelectOperation", "Operation")
                .Insert("InsertOperation", "Operation")
                .Update("UpdateOperation", "Operation")
                .Delete("DeleteOperation", "Operation");
        })
        .Columns(columns =>
        {
            columns.Command(commands =>
            {
                commands.Edit().ButtonType(GridButtonType.Image).HtmlAttributes(new { title = "Edit" });
                commands.Delete().ButtonType(GridButtonType.Image).HtmlAttributes(new { title = "Delete" });
            }).Width(80).Title("Commands");
            columns.Bound(p => p.Name).Width(200).Title("Operation Name");
            columns.Bound(p => p.Description).Width(310).Title("Description");
        })
        .ClientEvents(events => events
                .OnComplete("onComplete")
                )
                    .Editable(editing => editing.Mode(GridEditMode.PopUp).InsertRowPosition(GridInsertRowPosition.Top))

        .Pageable()
        .Scrollable()
        .Sortable()
        .Filterable()        
)
@section HeadContent {
<style type="text/css">
    .field-validation-error
    {
        position: absolute;
        display: block;
    }

    * html .field-validation-error { position: relative; }
    *+html .field-validation-error { position: relative; }

    .field-validation-error span
    {
        position: relative;
        white-space: nowrap;
        color: red;
        padding: 10px 5px 3px;
        background: transparent url('@Url.Content("~/Content/Common/validation-error-message.png") ') no-repeat 0 0;
    }

    /* in-form editing */
    .t-edit-form-container
    {
        width: 480px;
        margin: 1em;
    }

    .t-edit-form-container .editor-label,
    .t-edit-form-container .editor-field
    {
        padding-bottom: 1em;
        float: left;
    }

    .t-edit-form-container .editor-label
    {
        width: 25%;
        text-align: right;
        padding-right: 3%;
        clear: left;
    }
    .t-edit-form-container .editor-field textarea
    {
    font-size:11px;
    width:80%;
}
    .t-edit-form-container .editor-field
    {
        width: 70%;
    }
</style>
}

Answer 1

I know it's an old question but I thought I'd answer as I was looking for the exact same solution and hopefully help some others out.

This solved it for me how-to-get-the-tempdata-in-javascript

Essentially, Your syntax is missing parenthesis

    //Your code
alert('@TempData["AlertMessage"]');

// Correct code
alert('@(TempData["AlertMessage"])');

The parenthesis after the @

Hope this helps the next searcher like me.

Answer 2

TempData used when redirect to action. Try ViewBag.

In controller:

ViewBag.AlertMessage = status.Message;

In view:

@{
    ViewBag.Title = "Operation List";
    string alert = "Your custom error message";

    if(ViewBag.AlertMessage != null)
    {
        alert = (string)ViewBag.AlertMessage;
    }        
}

and javascript

var jsAlert = '@alert';
alert(jsAlert );