MVC View Won't Update After JQuery Call

Question

I'm building an MVC 5 web application. In the layout template there is a drop down list which contains a list of user names. As this drop down is in the layout template, it is accessible within all the Views which inherit from the template.

When a user logs into the site and passes authentication, they are directed to the Index method in a Controller. This method accepts a nullable ID of type int. When a user logs in, the id passed to the Index method is always null. I then get the logged in users ID and do a query to get their details (see below).

    public ActionResult Index(int? id)
    {
        DashboardViewModel model = new DashboardViewModel();

        if(id == null || id == 0)
        {
            User user = _userService.GetUserByID(Convert.ToInt32(User.Identity.GetUserId()));
            model.SelectedUser = user;
        }
        else
        {
            model.SelectedUser = _userService.GetUserByID(id.Value);
        }

        return View(model);
    }

I pass their details into a ViewModel and then to a View which then writes their email address to the UI.

@model MyApp.UI.ViewModels.DashboardViewModel

<h1>@Model.SelectedUser.email</h1>

Once the user views the UI, they can then select other users from the drop down list. When they do so, the selected users email address should replace theirs on the UI.

The process works like this. The user selects a name from the drop down list, a JQuery function is called

$(document).ready(function () {

    $("#UserID").change(GetUser);

    function GetUser() {

        $.ajax({
            type: "GET",
            url: '/Dashboard/Index/',
            data: { id: $(this).val() },
            error: function () {
                alert("An error occurred.");
            },
            success: function () {
                alert("success");
            }
        });
    }
});

This function passes the ID from the drop down list back into the Index method in the Controller. The Index method, this time, realises the id is NOT NULL, and therefore, performs a query to get the selected users details, based on their id (see Index method above).

The details are again put into a ViewModel and passed to the View. The model passed to the View contains the selected users details and should then write their email address to the UI

@model MyApp.UI.ViewModels.DashboardViewModel

<h1>@Model.SelectedUser.email</h1>

However, this is where my problem is. Although I can step through my code seeing everything work as expected, no matter what user I select from the drop down list, it never changes the email address which is written to the UI.

This is strange because I can see the selected users details being passed into the ViewModel, however, the UI never updates the email address.

Apologies for the long post but I wanted to give as much detail as possible in an attempt to fix this as i've been working on this for over a day now without any success.

Any help would be really appreciated.

Thanks.

Answer 1

As far as I can see you are not using your $.ajax call result anywhere. You just show Alert and it's done. You need to use the data in result, but as you are returning whole View and not just a PartialView it's probably better to just redirect on changing dropdown:

$("#UserID").change(function()
    window.location.href = "/Dashboard/Index/" + $(this).val();
);

You can also use @Url.Action("Index", "Dashboard") to avoid hardcoding url.