Ajout d'élément dynamique dans la vue

Version imprimable

15/07/2019, 02h33
touftouf57

Ajout d'élément dynamique dans la vue

Bonjour,

Je suis différents tutoriels sur le web concernant ASP.Net MVC.
En parallèle, je me suis fait un petit projet juste pour mettre cela en pratique.
Ce petit projet serait de gérer des personnages de jeux de rôle.

Donc un personnage possède différentes propriétés propres (race, nom, classe,.....).
Maintenant, la ou cela se complique c'est concernant les compétences.
Une compétence possède: un nom, un descriptif,..

En base de données, cela nous donne 3 tables:
Joueur(idJoueur (Identity), nom,....)
Competence(idCompetence (identity), nom, descriptif,.....)
CompetenceJoueur( idJoueur, idCompetence)

La table CompetenceJoueur ne sert qu'a faire une liaison entre un joueur et une compétence. Bien entendu, un même joueur ne peut pas avoir 2 fois la même compétence, donc {IdCompetence, IdJoueur} est la clé primaire de cette table.

Lorsque je créer un joueur, certes je remplis ces propriétés propres, mais pour les compétences je ne sais pas comment gérer le nombre variable de compétences.
Un joueur peut en avoir 0 alors qu'un autre peut en avoir 5. C'est uniquement lorsque je valide le formulaire, via submit, que je crée tout en DB (enregistrement dans la table Joueur + enregistrements dans la table CompetenceJoueur).

D'accord, je passe un ViewModel à ma vue pour qu'elle puisse avoir la collection des compétences qu'elle mettra dans une liste de choix, mais comment faites vous pour pouvoir afficher une nouvelle compétence à un joueur sans faire de Submit? Un peu comme on le ferait dans une grille Winforms, ou on aurait un bouton + (ajouter ligne competence).
Je suppose que cela devrait plutôt se faire coté client (il n'y a pas besoin de contacter le serveur pour cela), donc dans du script, mais vous faite cela comment? Avec une vue partielle? autre chose?

L'idée serait la même dans le cas d'une édition de joueur, dans le cas ou je me serais rendu compte que j'avais oublié de lui attribuer une compétence ou qu'il en aurait acquis une nouvelle grâce à ses différents faits d'armes.

Je suis preneur de tout exemple, parce que les tutos que je suis sont plutôt simplistes de ce point de vue.

Merci d'avance.
21/07/2019, 02h29
touftouf57

Bonjour,

Je suis surpris de ne pas avoir de réponse à cette question vu le nombre de vues.

Est-ce que ma question n'est pas claire?
Est-ce que c'est trop complexe?
Est-ce que c'est tellement simple qu'il faudrait que je cherche mieux sur le web?

Merci
21/07/2019, 22h24
DotNetMatt

Citation:

Envoyé par touftouf57

Je suis surpris de ne pas avoir de réponse à cette question vu le nombre de vues.

Il est probablement bon de rappeler que chacun visite le forum sur son temps libre, et donc chacun est libre de repondre ou non, comme il le souhaite !

Citation:

Envoyé par touftouf57

D'accord, je passe un ViewModel à ma vue pour qu'elle puisse avoir la collection des compétences qu'elle mettra dans une liste de choix, mais comment faites vous pour pouvoir afficher une nouvelle compétence à un joueur sans faire de Submit? Un peu comme on le ferait dans une grille Winforms, ou on aurait un bouton + (ajouter ligne competence).
Je suppose que cela devrait plutôt se faire coté client (il n'y a pas besoin de contacter le serveur pour cela), donc dans du script, mais vous faite cela comment? Avec une vue partielle? autre chose?

En general c'est un cas qui est assez chiant a gerer, ce qui explique probablement l'absence de reponse ! :aie:

Tu peux gerer ca cote client et/ou cote serveur.

Cote client en jQuery par exemple. Tu peux soit avoir une sorte de template "statique" dans ton code JS, ou bien tu peux faire appel a une vue partielle a la demande pour te retourner le template. Le 2nd cas (appel a une vue partielle) est l'artillerie lourde, je dirais que ce n'est a utiliser que si tu as besoin de faire des traitements complexes (genre un appel a une DB / web service ou autre). Dans la plupart des cas un template statique avec un peu de logique JS suffit.

A noter, il est possible d'utiliser des frameworks JS dynamiques tels que Angular, Backbone ou encore Knockout (il en existe d'autres). Mais ce n'est pas forcement une mince affaire....

Un exemple simpliste avec jQuery : ASP.NET MVC: Proper model binding with dynamic form.

Cote serveur, il existe par exemple la librairie FormFactory qui peut te permettre de generer le code HTML du formulaire dynamiquement. Dans ton cas, la solution cote serveur necessitera egalement du cote cote client, donc pas forcement ce que tu cherches.
22/07/2019, 22h39
touftouf57

Bonjour,

Mon dernier message n'était pas une attaque, ni une critique.
Si cela a été pris de la sorte, je m'en excuse platement.

Je me demandais si c'était moi qui avait mal formulé la question ou si j'avais très mal cherché sur le web.

En tout cas, je te remercie dotNetMatt pour les différentes pistes. Je vais y jeter un oeil.

Je tiens à remercier DotNetMatt pour ces différents liens.

Cela n'a pas été facile, mais j'y suis arrivé.
Voici le code en place.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script type="text/javascript"> $(document).ready(function () { $(".addRow").click(function () { var rowCount = $('.CompetenceRow').length; $("#tableauCompetences").append('<div class="CompetenceRow"><a href="javascript:void(0);" class="remRow">Supprimer</a><select name="Competences[' + rowCount + ']" class="CompetenceType">@foreach (Competence item in Model.SelectableCompetences){<option value="@item.Id">@item.Nom</option>}<a href="javascript:void(0);" class="remRow">Supprimer</a></div>'); }); $("#tableauCompetences").on('click', '.remRow', function () { $(this).closest('.CompetenceRow').remove(); }) }); </script>
Code:

1 2 3 4 5 6 7 8 9 10 11 <div id="tableauCompetences"> @for (int i = 0; i < Model.Competences.Count; i++) { <div class="CompetenceRow"> <a href="javascript:void(0);" class="remRow">Supprimer</a> @Html.DropDownListFor(o => o.Competences[i], new SelectList(Model.SelectableCompetences, "Id", "Nom", Model.Competences[i])) </div> } </div> <a href="javascript:void(0);" class="addRow">Ajouter compétence</a>
La difficulté que j'ai rencontré et qu'au départ j'avais tenté ceci:

Code:

@Html.DropDownListFor(o => o.Competences[i], Model.SelectList))

Bien que Model.SelectList soit une SelectList, lors de l'édition, je n'avais jamais l'item correspondant de sélectionner. Alors que si j'affichais la valeur de Model.Competences[i] correspondant, j'avais bien l'identifiant de compétence.
En regardant le code Html généré, j'ai constaté qu'il n'y avais jamais de Selected sur les <Option>.

J'ai cherché et j'ai trouvé ceci pour que ça fonctionne.

Code:

new SelectList(Model.SelectableCompetences, "Id", "Nom", Model.Competences[i])

Ou bien y a-t-il une autre solution moins tricky?