Comment utiliser plusieurs models pour une seule vue

**jérémyp8** · 07/01/2015, 15h07

Bonjour à tous

J'ai plusieurs tables de données/Entities (ABRICOTS, BANANE, CITRON) dans le même EDMX et chaque table a plusieurs colonnes (Name, Quantité, Date, Tri)

Dans une vue, j'ai une liste déroulante (DropDownList) qui contient ("A","B" et "C")

Ce que je veux faire :

Dans ma liste déroulante :
Quand je sélectionne la valeur A j'affiche en bas de ma liste déroulante (dans la même vue) les données de la table ABRICOTS
Ou
Quand je sélectionne la valeur B j'affiche en bas de ma liste déroulante (dans la même vue) les données de la table BANANE
Ou
Quand je sélectionne la valeur C j'affiche en bas de ma liste déroulante (dans la même vue) les données de la table BANANE

Merci beaucoup pour votre aide
Jeremy

**yonpo** · 07/01/2015, 15h56

Bonjour,

En général, on rassemble les trois types dans une nouvelle class. Par exemple, FruitsViewModel.

**jérémyp8** · 07/01/2015, 16h01

Bonjour Yonpo

Merci de me répondre mais es ce que tu peux me donner un extrait de code cette classe, le controller et la vue ?

Désolé je suis un débutant !

Merci

**yonpo** · 07/01/2015, 16h24

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
public class FruitsViewModel
{
	public List<Abricot> Abricots { get; set; }
 
	public List<Banane> Bananes { get; set; }
 
	public List<Citron> Citrons { get; set; }
}

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
public ActionResult ActionController()
{
	var vm = new FruitsViewModel();
	vm.Abricots = // Récupère les abricots depuis la base de données
	vm.Bananes = // Récupère les bananes depuis la base de données
	vm.Citrons = // Récupère les citrons depuis la base de données
 
	return View(vm);
}

Code html :

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
@model namespace de FruitsViewModel
 
@foreach(var abricot in Model.Abricots)
{
	<!-- Affiche les propriétés d'un abricot -->
}
 
@foreach(var banane in Model.Bananes)
{
	<!-- Affiche les propriétés d'une banane -->
}
 
@foreach(var citron in Model.Citrons)
{
	<!-- Affiche les propriétés d'un citron -->
}

**jérémyp8** · 07/01/2015, 16h29

Re yonpo

Merci énormément pour votre aide

Mais ce qui manque dans le code c'est la partie la plus difficile pour moi c'est-à-dire comment faire quand :

j'ai une liste déroulante (DropDownList) qui contient ("A","B" et "C")

Quand Je sélectionne la valeur A j'affiche en bas de ma liste déroulante (dans la même vue) les données de la table ABRICOTS
Ou
Quand Je sélectionne la valeur B j'affiche en bas de ma liste déroulante (dans la même vue) les données de la table BANANE
Ou
Quand Je sélectionne la valeur C j'affiche en bas de ma liste déroulante (dans la même vue) les données de la table CITRON

Merc

**yonpo** · 07/01/2015, 17h03

Avec un peu de javascript, on devrait y arriver.
On écoute le changement d'élément de la liste qui contient A, B, C et fonction de l'élément sélectionné, on affiche la bonne liste.

On pourrait aussi allez plus loin, en utilisant de l'ajax qui récupèrerait les bons éléments en fonction de l'élément choisie.

**jérémyp8** · 07/01/2015, 17h08

Merci infiniment Yonpo de prendre un peu de temps pour me répondre

Je vais t’embêter une dernière, enfin j’espère

Je suis vraiment nul de chez nul en JS je n'ai jamais fait donc si tu peux me donner un extrait de code ça sera vraiment génial de ta part dans le cas contraire je comprendrai cra jusqu'à la tu as fait déjà beaucoup pour moi

Merci d'avance

**yonpo** · 07/01/2015, 17h24

J'ai modifié la vue :

Code html :

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
22
23
24
25
26
27
28
@model namespace de FruitsViewModel
 
<select id="select">
	<option>A</option>
	<option>B</option>
	<option>C</option>
</select>
 
@foreach(var abricot in Model.Abricots)
{
	<div id="abricots">
		<!-- Affiche les propriétés d'un abricot -->
	</div>	
}
 
@foreach(var banane in Model.Bananes)
{
	<div id="bananes">
		<!-- Affiche les propriétés d'une banane -->
	</div>
}
 
@foreach(var citron in Model.Citrons)
{
	<div id="citrons">
		<!-- Affiche les propriétés d'un citron -->
	</div>
}

Code javascript :

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
$("#select").change(function() {
	var $selectedItem = $(this).find(":selected"); // Obtient l'élément sélectionné		
	if ($selectedItem != null) {
		var value = $selectedItem.val(); // Obtient la valeur de l'élément sélectionné		
		if (value == "A") {
			$("#abricots").show();
			$("#bananes").hide();
			$("#citrons").hide();			
		} else if (value == "B") {
			$("#abricots").hide();
			$("#bananes").show();
			$("#citrons").hide();		
		} else if (value == "C") {
			$("#abricots").hide();
			$("#bananes").hide();
			$("#citrons").show();		
		}		
	}	
});

Fait vite fait mais tu as l'idée. Il te faut jquery comme lib javascript.

**jérémyp8** · 07/01/2015, 18h04

Yesssss ! tout fonctionne bien et comme je le voulais......... Bravo

Yonpo

Un grannnnnd

pour toi encore une fois

Bonne fin de journée

**jérémyp8** · 09/01/2015, 15h35

Bonjour yonpo

Désolé de te déranger encore une fois.

...promis ça sera pour la dernière fois cette fois

Enfaîte, Je pense que le plus dure reste a faire pour moi afin de compléter et boucler mon projet avec succès, c'est :

Comment modifier ou supprimer une ligne de donnée dans la table que je viens d'afficher ?

Je te remercie infiniment

**amall515** · 09/07/2020, 14h44

Dans ce cas Comment je peux modifier des donnés de l'un des vues qui inclut dans la vue mère

**amall515** · 09/07/2020, 23h22

Envoyé par yonpo

J'ai modifié la vue :

Code html :

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
22
23
24
25
26
27
28
@model namespace de FruitsViewModel
 
<select id="select">
	<option>A</option>
	<option>B</option>
	<option>C</option>
</select>
 
@foreach(var abricot in Model.Abricots)
{
	<div id="abricots">
		<!-- Affiche les propriétés d'un abricot -->
	</div>	
}
 
@foreach(var banane in Model.Bananes)
{
	<div id="bananes">
		<!-- Affiche les propriétés d'une banane -->
	</div>
}
 
@foreach(var citron in Model.Citrons)
{
	<div id="citrons">
		<!-- Affiche les propriétés d'un citron -->
	</div>
}

Code javascript :

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
$("#select").change(function() {
	var $selectedItem = $(this).find(":selected"); // Obtient l'élément sélectionné		
	if ($selectedItem != null) {
		var value = $selectedItem.val(); // Obtient la valeur de l'élément sélectionné		
		if (value == "A") {
			$("#abricots").show();
			$("#bananes").hide();
			$("#citrons").hide();			
		} else if (value == "B") {
			$("#abricots").hide();
			$("#bananes").show();
			$("#citrons").hide();		
		} else if (value == "C") {
			$("#abricots").hide();
			$("#bananes").hide();
			$("#citrons").show();		
		}		
	}	
});

Fait vite fait mais tu as l'idée. Il te faut jquery comme lib javascript.

Bonjour yonopo

SVP je voulais savoir comment faire des modification ou suppression sur la vue FruitViewModel par edit async si je veux modifier le modele abricot ;svp aidez moi

Comment utiliser plusieurs models pour une seule vue

ASP.NET MVC

Discussions similaires

Partager

Partager