[MVC 2]Ajouter une ligne dynamiquement dans un tablean

Version imprimable

Bonjour tout le monde,

Alors depuis toutes la journée, je me creuse la tête et la toile aussi pour trouver une solution à mon problème.

Sous WebForms pas de soucis pour ce genre de choses, mes pas MVC XD.

Alors tous simplement je crée mon model contenant plusieurs parmètres et dont des listes pointant vers une autre classes, par exemple: Personne(Nom, prenom, ListAdresses<Adresse>) - Adresse(Rue, numéro, ...);

Alors j'affiche ma liste:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <table> <tr> <td>Rue</td> <td>Numéro</td> </tr> <% foreach (var line in Model.ListeAdresse) {%> <tr> <td> <%:Html.TextBox("Rue" + line.Id.ToString(), line.Rue%> </td> <td> <%:Html.TextBox("Numero" + line.Id.ToString(), line.Numero)%> </td> </tr> <%}%> </table>
Donc pas de soucis si j'initialise la liste avant d'envoyer le model.

Mais j'aimerai qu'a la demande de l'utilisateur, il puisse ajouter une ligne à partir d'un bouton dans le tableau pour qu'il puisse la remplir avant le submit...

J'ai essayé un peu de tout sans trop m'y connaitre... Notamanent Ajax, Jquery....

Tout en sachant que j'aimerai gardé ce que l'utilisateur aura déjà rentré comme son nom et prénom.

Merci tout le monde,

Cordialement

20/10/2013, 17h53
dkmix

Bonjour,
En MVC il faut penser une vue = un model. Pour ajouter une adresse, il faut une vue avec le formulaire de creation.

La vue peut être partielle ou complète.

Vue complète : anchre de lien vers une nouvelle page pour créer une entrée. Après validation du formulaire, redirection vers page précédente.

Vue partielle : possibilité d'utiliser la vue partielle comme une partie de la page en cours. Apres validation la page est rechargée. Il est possible également d'utiliser du javascript ( popup pour la création d'adresse, ajax)
20/10/2013, 18h08
John.BE

Merci pour ta réponse ;),

Je vais essayer de trouver des explication sur ce fonctionnement, si tu as des bon liens pour m'ouvrir les yeux je suis preneur ^^.

PS: Dite-moi si je me trompe ->

Je crée une vue partiel contenant mon affichage de mes toutes mes adresses déjà enregistré.
Je rajoute une dernière ligne permettant de récupérer les données, si le client veut encore ajouter une ligne.

Si oui, il remplit et clique sur un bouton ajouter, ce qui déclanche un script JQuery qui fait appelle à AJAx pour renvoyer le contenue de la dernière ligne et la traité.

Une fois le retour effectué la vue partiel s'actualise seul...

Si je me trompe pas, je vais chercher de ce côtés là.
21/10/2013, 15h04
John.BE

Re-bonjour,

J'ai fait plusieurs recherche et de test mais rien n'y fait....

Est-ce que c'est possible de mettre un Form pour le formulaire entier et un deuxième(type Ajax.beginForm) à l'intérieur permettant de ré-actualiser mon tableau avec de nouvelle donnée? Car pour l'instant si je mets deux bouton submit, il enclenche le Html.beginForm principale.. :/.

Est-ce que l'on peut choisis quels boutons enclenches tel événement?
Aussi tout en manipulant le même model ;).

Bonsoir

J'ai peut-être une solution pour toi.

Je prends un cas simple : une liste de noms et de n° de téléphone. Mon modèle de base sera le suivant :
Code:

1 2 3 4 5 6 public class EntreeRepertoireModel { public string Nom { get;set;} public string Telephone { get;set;} }
Une vue ne peut recevoir qu'un seul modèle de donnée en entrée. Or j'ai besoin qu'elle affiche une liste de numéros et qu'elle donne la possibilité d'en enregistrer un. Donc il me faut un modèle englobant :
Code:

1 2 3 4 5 6 public class RepertoireModel { public List<EntreeRepertoireModel> Entrees { get;set;} public EntreeRepertoireModel Entree { get;set;} }
Dans mon contrôleur RepertoireControleur j'ai une première action Index :
Code:

1 2 3 4 5 6 7 public ActionResult Index() { RepertoireModel repertoire = new RepertoireModel(); // Là je remplie la propriété Entrees avec la liste des données présentes en BDD (par exemple). return View(repertoire); }
Ensuite la liste de mes entrées dans ma vue :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 @model RepertoireModel <table> <tr> <th>Nom</th> <th>Telephone</th> </tr> @foreach(var item in model.Entrees){ <tr> <td>@Html.DisplayFor(modelItem => item.Nom)</td> <td>@Html.DisplayFor(modelItem => item.Telephone)</td> </tr> } </table>
Pour gérer une nouvelle entrée je peux modifier ma vue ainsi :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 @model RepertoireModel <table> <tr> <th>Nom</th> <th>Téléphone</th> <th></th> </tr> @foreach (var item in model.Entrees){ <tr> <td>@Html.DisplayFor(modelItem => item.Nom)</td> <td>@Html.DisplayFor(modelItem => item.Telephone)</td> <td></td> </tr> } @using (Html.BeginForm("AjouterEntree")) { <tr> <td>@Html.EditorFor(model => model.Entree.Nom)</td> <td>@Html.EditorFor(model => model.Entree.Telephone)</td> <td><input type="submit" value="Enregistrer"/></td> </tr> } </table>
Enfin dans le contrôler je rajoute l'action :
Code:

1 2 3 4 5 6 7 8 9 public ActionResult AjouterEntree(RepertoireModel model) { if(ModelState.IsValid()) { // je peux récupérer les données saisies dans model.Entree } return RedirectToAction("Index"); }
Bon, je viens de taper ça vite fait mais le principe est là. Ça devrait fonctionner.

+++

Bonjour à toi et merci,

l'ennuie, c'est que le code que tu me proposes se retrouve encapsulé dans un autre Html.beginForm du genre :
Code:

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 29 30 31 32 @using (Html.BeginForm("AjouterTout")){ @Html.EditorFor(model => model.NomPropritaire)<br/> @Html.EditorFor(model => model.PrenomPropritaire)<br/> @model PersonneModel <table> <tr> <th>Nom</th> <th>Téléphone</th> <th></th> </tr> @foreach (var item in model.RepertoireModel.Entrees){ <tr> <td>@Html.DisplayFor(modelItem => item.Nom)</td> <td>@Html.DisplayFor(modelItem => item.Telephone)</td> <td></td> </tr> } @using (Html.BeginForm("AjouterEntree")) { <tr> <td>@Html.EditorFor(model => model.RepertoireModel .Entree.Nom) </td> <td>@Html.EditorFor(model => model.RepertoireModel .Entree.Telephone)</td> <td><input type="submit" value="Enregistrer une ligne"/></td> </tr> } </table> <td><input type="submit" value="Tout enregistrer"/></td> }
et quand je clique sur le submit AjouterEntrée il prend l'action principale...:/. Meme si cela est dans une vue partielle.

Donc voilà en gros ce que j'essaye de réaliser, je voudrais pouvoir actualiser le tableau quand l'utilisateur rentre une entrée dans le répertoire, cela se réactualise (soit seulement tbl(vue partielle) soit toute la page), mais en gardant les données déjà rentrées dans les texteditiors nom et prénom du propriétaire du répertoire et quand on enregistre tout(dernier submit), pouvoir récupérer tout le tableau et les données propriétaire.

Edit : solution tout séparer... si dans la même vue, je peux peut-être jouer avec les événements pour garder les données selon le submit clické....

23/10/2013, 09h40
dkmix

John,
Ce n'est pas un souci ASP MVC, en Html et/ou XHtml, un <form /> ne peut pas inclure un autre <form />
Info W3C
23/10/2013, 09h51
John.BE

Citation:

Envoyé par dkmix

John,
Ce n'est pas un souci ASP MVC, en Html et/ou XHtml, un <form /> ne peut pas inclure un autre <form />
Info W3C

Et là j'ai ma réponse ^^.

J'avais des souvenir pourtant O.o.

Sinon est-ce que ce type de problème est réalisable via JQuery et Ajax, par exemple? Juste pour initialiser le tableau?

il est possible de mettre le formulaire d'ajout dans une fenêtre modal pour l'insertion.

Au chargement de la page le formulaire est masqué, lorsque l'on clic sur un bouton, le formulaire s'ouvre (modal dialog). Ex avec Jquery UI

Bout de code sans fenêtre modal (div masquée, qui apparait) pour l'ajout de notes à un dossier

Vue partielle formulaire de création : NoteCreate.vbhtml

Code:

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
29
 
@ModelType MonModel
 
@Using Html.BeginForm("NoteAdd", "MonControler")
    @Html.ValidationSummary(True)
    @<fieldset>
        <legend>Create Note</legend>
 
        <div class="editor-label">
            @Html.LabelFor(Function(model) model.Description)
        </div>
        <div class="editor-field inline">
            @Html.EditorFor(Function(model) model.Description)
            @Html.ValidationMessageFor(Function(model) model.Description)
        </div>
        <br />
         <div class="editor-label">
            @Html.LabelFor(Function(model) model.Content)
        </div>
        <div class="editor-field inline">
            @Html.EditorFor(Function(model) model.Content)
            @Html.ValidationMessageFor(Function(model) model.Content)
        </div>
        <br />
        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>
End Using

Vue principale

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
....
<a class="btn-note-add-32 btn32" href="#" id="btn-note-add" >Add note</a>        
...
 <div id="detail-panel" title="" class="Hidden"></div>
...
<script type="text/javascript">
    $(function () {
 
        $.ajaxSetup ({  
            // Disable caching of AJAX responses  
            cache: false  
        });
 
 
       $("#btn-note-add").click(function () {
            $("#detail-panel")
            .load("NoteAdd?Code=@Server.UrlEncode(MaVariable)", function () {
                $("#detail-panel").fadeIn('slow');
            });
        });
</script>

Controler

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
  <HttpGet()> _
   Function NoteAdd(ByVal Code As String) As ActionResult
   ....
   Return PartialView("NoteCreate", noteForm)
 
End Function
 
 <HttpPost()> _
  Function NoteAdd(ByVal note As RmaNoteModel) As ActionResult
  ... 
  //enregistrement de la note en base
  ...
 Return View("index", MonModel)
 End Function

23/10/2013, 11h28
John.BE

Re,

Oui, j'avais bien des choses dans ce genre la.

je vais potasser tout cela ma fois ;).

Merci à toi.