Concaténer 2 vue en 1

Bonsoir,

Je travaille sur Visual Studio 2017.

Grâce à EntityFramework, on peut générer automatiquement les controlleur et les vues (fonctionnalité CRUD) à partir d'un modèle,
ce que je cherche à faire, c'est avoir une page Create et Index sur une seule page avec 2 modèles (classe) différents.

J'ai cherché avec les partial view et l'ajax mais pas de solution qui a fonctionné.

En espérant que vous pourrez m'aider, passez une bonne soirée.

Guillaume JOLY

Citation:

---

Envoyé par guillaume000

ce que je cherche à faire, c'est avoir une page Create et Index sur une seule page avec 2 modèles (classe) différents.

---

Tu peux creer un Model / ViewModel specifique qui te permettra de passer les 2 modeles dont tu as besoin. Par exemple :

Code:

---

1 2 3 4 5 6

public class TonViewModel { public A TonCreateModel { get; set; }   public B TonIndexModel { get; set; } }

---

Ensuite dans ta page tu declares ton model en tant que TonViewModel, et tu utilises les proprietes Model.TonCreateModel ou Model.TonIndexModel au gre de tes besoins.

Bonsoir DotNetMatt, merci pour votre réponse,

J'avais déjà essayé cette méthode et j'ai ce problème :
"The model item passed into the dictionary is of type 'System.Collections.Generic.List"

Et je bloque sur ce point. Pour exprimer mon besoin autrement, j'ai 2 modèles différents, j'ai besoin d'avoir le Create de mon model B, et l'index du model A juste en dessous sur une seule page View.

Si j'ai bien compris la méthode que vous m'avez proposé, on peut seulement appeler des propriétés de chaque classe, moi j'ai besoin de concaténer 2 vues de 2 Modèles différents en 1.

En espérant avoir été suffisamment clair.

Guillaume

Citation:

---

Envoyé par guillaume000

J'avais déjà essayé cette méthode et j'ai ce problème :
"The model item passed into the dictionary is of type 'System.Collections.Generic.List"

---

C'est parce que tu as passe une liste d'objets au lieu de la classe attendue par ta vue.... On va reprendre les bases car tu n'a visiblement pas compris comment fonctionne MVC.

Donc tu as tes 2 modeles :

Code:

---

1 2 3 4 5 6

public class CreateViewModel { public int Id { get; set; }   public string Description { get; set; } }

---

et :

Code:

---

1 2 3 4 5 6 7

public class IndexViewModel { public Guid Id { get; set; } public string Name { get; set; }   public IList<string> UneListe { get; set; } }

---

Et finalement le modele qu'on va passer a la view :

Code:

---

1 2 3 4 5 6

public class TonViewModel { public IndexViewModel Index { get; set; }   public CreateViewModel Create { get; set; } }

---

Dans le Controller, on va instancier tout cela et l'injecter dans la vue :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

public IActionResult Index() { // Ici tu mets ton code pour initialiser ton view model... var tonViewModel = new TonViewModel { Create = new CreateViewModel { Id = 1, Description = "ABC" }, Index = new IndexViewModel { Id = Guid.NewGuid(), Name = "DEF", UneListe = new List<string> { "A", "B", "C" } } };   // Ici tu injectes le view model dans la vue return View(tonViewModel); }

---

Citation:

---

Envoyé par guillaume000

Si j'ai bien compris la méthode que vous m'avez proposé, on peut seulement appeler des propriétés de chaque classe, moi j'ai besoin de concaténer 2 vues de 2 Modèles différents en 1.

---

Il faut utiliser la methode donnee, puis se debrouiller avec soit une seule vue, soit utiliser des Partial Views. Pour cette seconde option, il te suffira de faire quelque chose comme suit, dans ta page CSHTML :

Code:

---

1 2	@Html.Partial("_PartialCreate", Model.Create) @Html.Partial("_PartialIndex", Model.Index)

---

Ou bien si tu utilises les Razor Tags :

Code:

---

1 2	<partial name="_PartialCreate" model="Model.Create" /> <partial name="_PartialIndex" model="Model.Index" />

---

Chaque Partial View est mappee sur leur model respectif. Pour _PartialCreate.cshtml :

Code:

---

1 2 3 4 5 6 7

@model CreateViewModel   @* Ici tu fais ce que tu veux avec ton CreateViewModel *@   <div>@Model.Id - @Model.Description</div>

---

Et pour _PartialIndex.cshtml :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

@model IndexViewModel @* Ici tu fais ce que tu veux avec ton IndexViewModel *@   <div>@Model.Id</div>   @foreach (var item in Model.UneListe) { <div>Value: @item</div> }

---

Il est recommande d'utiliser les partial views afin de clairement separer les comportements et pour la clarte du code. Cependant tu peux obtenir le meme resultat directement dans la vue CSHTML :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

@model TonViewModel   <div>@Model.Index.Id</div>   <div>@Model.Create.Id - @Model.Create.Description</div>   @foreach (var item in Model.Index.UneListe) { <div>Value: @item</div> }

---

En effet j'ai commencé le MVC que récemment.

Merci pour votre réponse, j'ai bien suivi votre démarche et c'est beaucoup + clair pour moi maintenant, j'arrive à utiliser les partials View avec Edit et Create de 2 modèles différents.

Dès que je veux rajouter la partial view Index, j'ai toujours la même erreur "The model item passed into the ViewDataDictionary is of type 'AMP40.Models.Chantier', but this ViewDataDictionary instance requires a model item of type 'System.Collections.Generic.IEnumerable".

Je pense que l'erreur vient de l'appelle de la page @model IEnumerable<AMP40.Models.Chantier> (du partial View Index).
En remplaçant par @model Chantier, j'ai l'erreur : "L'instruction foreach ne peut pas fonctionner sur des variables de type chantier, car chantier ne contient pas de définition d'instance publique pour GetEnumerator".

Je suis toujours bloqué.

Une idée de comment je pourrais faire ?

Merci encore,
Guillaume

Sans connaitre ton code difficile de t'aider precisement, mais ce qu'on peut dire de maniere generale :
1 - Le type que tu injectes dans ta view / partial view doit etre le meme que le type du model.
2 - Et pour le message a propos du foreach, il faut l'utiliser sur une propriete de type Liste (IList<T>, IEnumerable<T>...).

Bonjour DotNetMatt,

J'ai exactement suivi votre démarche, 2 model (chantier, Action),
code au niveau du controller Chantier :

Code:

---

1 2 3 4 5 6 7 8

public IActionResult ChantierAction() {   var ChantierAction = new ChantierAction();   return View(ChantierAction);   }

---

Et après j'ai générer les vues comme vous me l'avez conseillé.

Dans mes Vues:

type _PartialCreateAction : @model AMP40.Models.Action.
type _PartialIndexChantier : @model IEnumerable<AMP40.Models.Chantier>.

Vue globale ChantierAction :

Code:

---

1 2	<partial name="_PartialCreateAction" model="Model.Action" /> @Html.Partial("_PartialIndexChantier", new List<AMP40.Models.Chantier>())

---

La photo A correspond à l'index de la vue Chantier, dans la photo B j'ai réussi a réunir les partials vue Create de Action et l'index de Chantier mais il me manque mes données que vous pouvez voir sur la photo A.

Comment récupérer ces données ?

Merci encore,
Guillaume

Tu n'es pas loin du resultat ;) Dans ta vue partielle _PartialIndexChantier, ton model est de type IEnumerable<AMP40.Models.Chantier>.

Donc ton foreach doit s'appliquer sur le model directement. Exemple a mettre dans la vue partielle (en imaginant que ta classe Chantier contient une propriete Id) :

Code:

---

1 2 3 4

@foreach (var chantier in Model) { <div>Id: @chantier.Id</div> }

---

Merci beaucoup pour votre aide, j'ai bien avancé grâce à vous, mais le problème persiste.

Dans _PartialIndex :

Code:

---

1 2 3 4 5 6 7 8

@foreach(var item in Model) { <tr> <td> @item.ChantierNumero </td> </tr> }

---

J'ai également essayé avec la syntaxe générer automatiquement :

Code:

---

1 2 3

<td> @Html.DisplayFor(modelItem => item.ChantierNumero) </td>

---

Ne m'affiche aucune données =( également. Peut-être est-ce dans l'appel de page de vue global qu'il y a un problème ?

Code:

---

@Html.Partial("_PartialIndex", new List<AMP40.Models.Chantier>());

---

Ou dans le controller :

Code:

---

1 2 3 4 5 6 7 8 9 10

public IActionResult Index2() { var ActionChantier = new ActionChantier { Action = new Models.Action { ActionID = 1 }, Chantier = new Chantier { ChantierID = 2 } };   return View(ActionChantier); }

---

Désolé de vous déranger mais j'ai vraiment besoin d'aide sur ce sujet,
Guillaume

Citation:

---

Envoyé par guillaume000

Ne m'affiche aucune données =( également. Peut-être est-ce dans l'appel de page de vue global qu'il y a un problème ?

Code:

---

@Html.Partial("_PartialIndex", new List<AMP40.Models.Chantier>());

---

---

Ah ben c'est normal tu passes une liste initialisee mais vide en parametre: new List<AMP40.Models.Chantier>().

Citation:

---

Envoyé par guillaume000

Ou dans le controller :

Code:

---

1 2 3 4 5 6 7 8 9 10

public IActionResult Index2() { var ActionChantier = new ActionChantier { Action = new Models.Action { ActionID = 1 }, Chantier = new Chantier { ChantierID = 2 } };   return View(ActionChantier); }

---

---

Dans ta classe ActionChantier tu dois avoir une propriete de type IEnumerable<AMP40.Models.Chantier>, qui va contenir les elements a afficher dans le foreach. Ensuite dans le controller tu y mets les donnees.

Puis tu fais quelque chose du genre :

Code:

---

@Html.Partial("_PartialIndex", Model.TaNouvelleProprieteDeTypeIEnumerable);

---

Bonjour DotnetMatt,

Merci encore de m'avoir accompagné sur ce sujet,

Je suis arrivé à un résultat en faisant comme ceci :

Controller :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

public IActionResult Index() {   var ChantierAction = new ChantierAction() { Action = new Models.Action { ActionID = 3, ActionNom = "ABC" }, Chantier = new Chantier { ChantierID = 4, ChantierNature = "DEF" }, };   List<Chantier> ChantierAction2 = new List<Chantier>();   ChantierAction2 = _context.Chantier.ToList();   ViewData["ListeChantier"] = ChantierAction2;   // Ici tu injectes le view model dans la vue return View(ChantierAction); }

---

Et dans ma vue Global :

Code:

---

1 2 3

<partial name="_PartialCreateAction" model="Model.Action" />   @Html.Partial("_PartialIndexChantier", ViewData["ListeChantier"] as IEnumerable<AMP40.Models.Chantier>);

---

Je vous tiens au courant au fur et à mesure de l'avancée,
Guillaume

Ca marche aussi !

N'oublie pas de marquer le post en resolu, a l'aide du bouton Resolu tout en bas de la discussion (just apres le dernier message) ;)