IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

ASP.NET Discussion :

Changement de vue partielle selon un menu


Sujet :

ASP.NET

  1. #1
    Membre confirmé
    Homme Profil pro
    autre
    Inscrit en
    Janvier 2015
    Messages
    211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Morbihan (Bretagne)

    Informations professionnelles :
    Activité : autre

    Informations forums :
    Inscription : Janvier 2015
    Messages : 211
    Par défaut Changement de vue partielle selon un menu
    Bonjour,

    J'ai intégré une vue partielle dans ma vue (à l'intérieur d'une div).
    Ça fonctionne sans souci.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
        <div id="VendeurPartialView">
             @await Html.PartialAsync("_ArticlesListPartial")
       </div>
    Maintenant, je souhaite que cette vue partielle soit remplacée par une autre quand l'utilisateur clique sur une entrée de menu.
    De manière à ne pas devoir charger la page entière à chaque fois.

    Nom : vue_partielle.png
Affichages : 50
Taille : 3,5 Ko

    Il y a probablement du javascript et/ou Ajax là-dessous, mais je ne trouve rien qui me mettrait sur la voie.
    Une chose comme :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
            function AfficheList() {
     
                    $("#VendeurPartialView").load("@(Url.Action("_ArticlesListPartial","Articles"))");
            };
    Tente bien de charger la vue partielle mais pas dans la div, sur la page entière, et de manière totalement incomplète (il n'y a qu'une phrase d'affichée).

    En fait, au chargement de la page, la vue devrait déjà interroger une fonction pour savoir quelle vue partielle afficher par défaut.

    J'intercepte déjà les informations du menu qui me permettraient de fournir les argument à une fonction qui dirait quelle vue partielle afficher.
    J'obtiens l'attribut 'name' du menu cliqué.

    Ce que je ne sais pas faire c'est remplacer la vue partielle par une autre.

    Mon contrôleur (rien de spécial, je crois):
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
            public async Task<IActionResult> _ArticlesListPartial()
            {
                var articles = from s in await _repo.GetArticles()
                               select s;
                return PartialView(articles);
            }
    Merci pour votre aide

  2. #2
    Membre confirmé
    Homme Profil pro
    autre
    Inscrit en
    Janvier 2015
    Messages
    211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Morbihan (Bretagne)

    Informations professionnelles :
    Activité : autre

    Informations forums :
    Inscription : Janvier 2015
    Messages : 211
    Par défaut
    Je viens documenter la résolution du problème.

    Le script de la vue principale :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
     
            function LoadDetailPartialView(MenuName) {
                if (typeof MenuName == 'undefined') MenuName = 'ListArticles';
                $.ajax({
                    url: '@Url.Action("ChangeVendeurPartial", "Articles")',
                    type: 'GET',
                    cache: false,
                    data: { Menu: MenuName }
                }).done(function (result) {
                    if (result.redirectTo)
                        do{
                            // Attend que la valeur de 'result' soit chargée, car 'ChangeVendeurPartial' est asynchrone.
                        } while(result.lenght < 1);
     
                    MainPartial.innerHTML = result;
     
                });
            }
    J'ai rencontré un problème supplémentaire avec la méthode asynchrone 'ChangeVendeurPartial' de mon contrôleur dans cette fonction.
    Cela fonctionnait uniquement si je plaçais 'debugger;' au dessus de 'MainPartial.innerHTML = result;'.
    Sans 'debugger;' 'result' était tout le temps vide (la fonction continuait de manière synchrone uniquement sur la promesse reçue)
    D'où la boucle 'do while' (en incrémentant un i, il ne compte même pas, i=0, mais cela suffit quand même à faire que 'result' soit chargé avant de continuer).
    Je ne sais pas si c'est la meilleure façon de faire, mais ça fonctionne.

    Dans la vue cshtml principale, une simple 'div' :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
        <div id="VendeurPartialView">
        </div>
    Dans le contrôleur (deux menus gérés pour démo) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
     
            [HttpGet]
            public async Task<IActionResult> ChangeVendeurPartial(string Menu)
            {
                var articles = from s in await _repo.GetArticles() select s;
                switch (Menu)
                {
                    case "ListArticles":
     
                        return PartialView("_ArticlesListPartial", articles);
     
                    case "Soldes":
                         articles = from s in await _repo.GetArticlesSoldes() select s;
                        return PartialView("_SoldesPartial", articles);
     
                    default:
     
                        return PartialView("_ArticlesListPartial", articles);
     
                }
            }
    Ensuite, j'appelle la fonction au chargement de la page (avant la fonction 'LoadDetailPartialView') :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
            var MainPartial = document.getElementById('VendeurPartialView');
            LoadDetailPartialView();
    J'ai été obligé d'extraire la variable 'MainPartial' de la fonction Ajax, car le résultat de 'getElementById' en son sein était tout le temps 'undefined'.
    Le cas 'MenuName' undefined est traité au début de la fonction.

    Voici, pour finir, le code appelant normal de la fonction, sur 'click' d'un menu.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
            var btnContainer = document.getElementById("myDIV");
    
            // Get all buttons with class="btn" inside the container
            var btns = btnContainer.getElementsByClassName("tab_vendeur");
            // Loop through the buttons and add the active class to the current/clicked button
            for (var i = 0; i < btns.length; i++) {
               
                btns[i].addEventListener("click", function () {
                    var current = document.getElementsByClassName("active");
                    current[0].className = current[0].className.replace(" active", "");
                    
                    var MenuName = this.name;
                    if (typeof MenuName !== 'undefined') LoadDetailPartialView(MenuName);
    
                    this.className += " active";
                });
            }
    Je transmets en paramètre le Name du menu de ma vue partielle.

    Ce code sert à définir la classe du menu cliqué sur 'active' (pour css), et retire cette classe des autres.
    Je récupère à un endroit le Name du menu et le transmets à la fonction.

    À présent, mon menu (qui est aussi une vue partielle), rafraîchit uniquement la vue partielle principale, sans recharger toute la page.

    Mais j'ai maintenant un tout autre problème, pour lequel j'ouvrirai une nouvelle discussion : Le script présent en entête de ma vue partielle ne s'exécute plus.

    Merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Menu - Vue partielle - Treeview
    Par antrax2013 dans le forum ASP.NET MVC
    Réponses: 2
    Dernier message: 09/11/2010, 15h35
  2. changement de vue
    Par moi89 dans le forum MFC
    Réponses: 11
    Dernier message: 27/04/2007, 11h13
  3. Application SWING / changement de vue
    Par herbert8 dans le forum AWT/Swing
    Réponses: 14
    Dernier message: 22/02/2007, 01h36
  4. Réponses: 8
    Dernier message: 19/01/2006, 11h57
  5. Réponses: 9
    Dernier message: 14/09/2004, 21h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo