La vue MVC ne sera pas mise à jour après l'appel JQuery

Question

Je construis une application Web MVC 5.Dans le modèle de mise en page, il existe une liste déroulante contenant une liste de noms d'utilisateurs.Comme cette liste déroulante se trouve dans le modèle de mise en page, elle est accessible dans toutes les vues qui héritent du modèle.

Lorsqu'un utilisateur se connecte au site et réussit l'authentification, il est dirigé vers la méthode Index dans un contrôleur.Cette méthode accepte un ID nullable de type int.Lorsqu'un utilisateur se connecte, l'identifiant transmis à la méthode Index est toujours nul.J'obtiens ensuite l'ID de l'utilisateur connecté et j'effectue une requête pour obtenir ses coordonnées (voir ci-dessous).

    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);
    }

Je transmets leurs coordonnées dans un ViewModel puis dans une View qui écrit ensuite leur adresse e-mail dans l'interface utilisateur.

@model MyApp.UI.ViewModels.DashboardViewModel

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

Une fois que l'utilisateur consulte l'interface utilisateur, il peut sélectionner d'autres utilisateurs dans la liste déroulante.Lorsqu’ils le font, l’adresse e-mail de l’utilisateur sélectionné doit remplacer la leur sur l’interface utilisateur.

Le processus fonctionne comme ceci.L'utilisateur sélectionne un nom dans la liste déroulante, une fonction JQuery est appelée

$(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");
            }
        });
    }
});

Cette fonction transmet l'ID de la liste déroulante à la méthode Index du contrôleur.La méthode Index, cette fois, réalise que l'identifiant n'est PAS NULL et exécute donc une requête pour obtenir les détails des utilisateurs sélectionnés, en fonction de leur identifiant (voir la méthode Index ci-dessus).

Les détails sont à nouveau placés dans un ViewModel et transmis à la View.Le modèle transmis à la vue contient les détails des utilisateurs sélectionnés et doit ensuite écrire leur adresse e-mail dans l'interface utilisateur

@model MyApp.UI.ViewModels.DashboardViewModel

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

Cependant, c'est là que réside mon problème.Bien que je puisse parcourir mon code et voir que tout fonctionne comme prévu, quel que soit l'utilisateur que je sélectionne dans la liste déroulante, cela ne modifie jamais l'adresse e-mail écrite dans l'interface utilisateur.

C'est étrange car je peux voir les détails des utilisateurs sélectionnés transmis au ViewModel. Cependant, l'interface utilisateur ne met jamais à jour l'adresse e-mail.

Désolé pour le long message, mais je voulais donner autant de détails que possible pour tenter de résoudre ce problème, car je travaille dessus depuis plus d'une journée maintenant sans aucun succès.

Toute aide sera grandement appréciée.

Merci.

Answer 1

D'après ce que je vois, vous n'utilisez pas votre $.ajax résultat de l'appel n'importe où.Vous montrez simplement Alert et c'est fait.Vous devez utiliser les données dans le résultat, mais comme vous renvoyez l'intégralité View et pas seulement un PartialView il est probablement préférable de simplement rediriger en modifiant la liste déroulante :

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

Vous pouvez aussi utiliser @Url.Action("Index", "Dashboard") pour éviter de coder en dur l'URL.