ViewData isn't being displayed via Jquery

Question

I'm having a mind blank and can't seem to find the solution but I am sure it is pretty simple.

I have a controller which has 6 ViewData 's, this action is called from a jquery ajax request, I then want to input these items into various textboxes .

JQuery

$("#tableid").click(function () {                
      ///EXTRACT DATA FROM TABLE ROW
                var insertText = $(this).text();
                $.ajax({
                    url: '@Url.Action("UserDetails", "Home")',
                    data: { 'userLogin': insertText },
                    type: "post",
                    cache: false,
                    success: function () { <===== PROBLEM SOMEWHERE IN THIS FUNCTION
                        var userID = ViewData["userID"];
                        var userName = ViewData["userName"];
                        var userFName = ViewData["userFName"];
                        var userSName = ViewData["userSName"];
                        var userEmail = ViewData["userEmail"];
                        var userActive = ViewData["userActive"];
                        $('#txtUL').empty().append(userID)
                        $('#txtUI').empty().append(userName)
                        $('#txtFN').empty().append(userFName)
                        $('#txtSN').empty().append(userSName)
                        $('#txtE').empty().append(userEmail)
                        $('#txtA').empty().append(userActive)
                    }
                });
            });
    });

Controller

public ActionResult UserDetails(string userLogin)
        {
            if (userLogin != null)
            {
                Manager manager = new Manager();
                var details = manager.GetUserData(userLogin);
                var userID = details.Id;
                var userName = details.Login;
                var userFName = details.FirstName;
                var userSName = details.Surname;
                var userEmail = details.Email;
                var userActive = details.Active;

                ViewData["userID"] = userID;
                ViewData["userName"] = userName;
                ViewData["userFName"] = userFName;
                ViewData["userSName"] = userSName;
                ViewData["userEmail"] = userEmail;
                ViewData["userActive"] = userActive;
            }

            return View("Index");
        }

When debugging the ViewData fields are all populated in the controller so it must be the Jquery, thanks and please ask if you have any questions. (I've shortened some of the code where appropriate.

Answer 1

jQuery is doing a Ajax call so you don't have access to the ViewData object.
Why don't you return a json object from your controller?

public JsonResult UserDetails(string userLogin)
{
    if (string.IsNullOrEmpty(userLogin))
    {
    return Json(new {});
    }

    Manager manager = new Manager();
    var details = manager.GetUserData(userLogin);

    if (details != null)
    {
       return Json(new {userID = details.Id, userName = details.Login, userFName = details.FirstName, userSName = details.Surname, userEmail = details.Email = details.Active});
    }

    return Json(new {});

}

As you can see the controller now returns a JsonResult

Your javascript should look like this:

$.ajax({
    url: '@Url.Action("UserDetails", "Home")',
    data: { 'userLogin': insertText },
    type: "POST",
    dataType: 'json',
    cache: false,
    success: function (data) { 
        if (!jQuery.isEmptyObject(data)) {
            $('#txtUL').empty().append(data.userID)
            $('#txtUI').empty().append(data.userName)
            $('#txtFN').empty().append(data.userFName)
            $('#txtSN').empty().append(data.userSName)
            $('#txtE').empty().append(data.userEmail)
            $('#txtA').empty().append(data.userActive)
        }
    }
})

I've added dataType: 'json' since you're expecting a json object. My controller returns an empty object in case something goes wrong. You can check it using jQuery.isEmptyObject(data) .

Now, your success callback should receive the object your controller is returning.