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:

---

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.

Pièce jointe 663248

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:

---

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:

---

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

Je viens documenter la résolution du problème.

Le script de la vue principale :

Code:

---

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:

---

1 2 3

<div id="VendeurPartialView"> </div>

---

Dans le contrôleur (deux menus gérés pour démo) :

Code:

---

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:

---

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:

---

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