Discussion :

[Julien698]

Bonjour,

J'ai besoin pour l'une des pages de mon site web de mettre en place un formulaire un peu spécifique. Le formulaire sur est composé d'une en-tête, et d'un tableau avec plusieurs lignes. L'utilisateur renseigne l'en-tête, puis les lignes du tableau avec des valeurs différentes. Ce que je souhaite obtenir en httppost est un objet composé de l’en-tête et d'une liste avec toutes les entrées saisies dans le tableau ou une collection d'objets qui ont en commun seulement l'en-tête et une ligne du tableau.
J'ai essayé de traduire ceci en modèle, mais je n'obtient pas ce que je souhaite lors du submit du formulaire et peut-être que je fais fausse route.
Voici ce que j'ai essayé.

Un modèle objet total avec toutes les propriétés :

Code :

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

1
2
3
4
5
6
7
8
public class ObjetTotal
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public string Numero { get; set; }
        public string Value { get; set; }
    }

Puis je l'ai scindé en deux objets :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
public class MainObjet
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
}
 
public class Numbers
{
    public string Numero { get; set; }
    public string Value { get; set; }
}

Pour ensuite passer comme modèle à ma vue cet objet :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
public class Mix
{
    public MainObjet obj { get; set; }
    public List<Numbers> num { get; set; }
 
    public Mix()
    {
       obj = new MainObjet();
       num = new List<Numbers>();
    }
}

j'ai ensuite affiché le modèle comme ceci :

Code :

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
29
30
31
32
33
34
35
@model App.Models.Mix
@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
 
<fieldset>
    <legend>Mix</legend>
 
    <h3>First Properties</h3>
    <div>
        @Html.TextBoxFor(model => model.obj.Id);
        @Html.TextBoxFor(model => model.obj.Name);
        @Html.TextBoxFor(model => model.obj.Description);
    </div>
    <div>
        <table>
            @for (int i = 0; i < 5; i++)
            { 
                <tr>
                    <td>
                        @Html.TextBoxFor(model => model.num[i].Numero)
                    </td>
                    <td>
                        @Html.TextBoxFor(model => model.num[i].Value)
                    </td>
                </tr>
            }
        </table>
    </div>
 
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
}

Ce qui donne comme UI : (Ne pas faire attention au design c'est juste un test )



Je souhaite ensuite récupérer les valeurs du formulaire dans cette méthode :

Code :

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

1
2
3
4
5
[HttpPost]
public ActionResult Test(Mix obj)
{
    return View();
}

Mais j'obtiens un objet vide en retour, et je ne comprends pas pourquoi.... Je ne sais pas si la façon dont je veux afficher mon formulaire est une bonne pratique...
Avez-vous une idée pour afficher ce formulaire et récupérer les données en httppost ?

Je suis toujours en recherche, j'ai vu qu'il y avait moyen de passer par deux objets différent et des partials view, je vais tenter cette solution également !

Merci

[soazig]

Bonjour,
Ce que tu veux faire est possible mais pour que le post fasse ce que tu veux il faut que tes objets soient nommés correctement.
Par exemple pour ta liste il faudrait que tes textbox aient comme propriété name num[0].Numero , num[0].Value, num[1].Numero, num[1].Value, et ainsi de suite. Attention pour les listes il ne faut pas de trou dans les indices ce qui pose problème lors des suppression de ligne.

De même pour MainObject mais là je te conseillerai de mette les propriétés directement dans Mix et d'ajouter ta liste dans Mix, sinon il faudra que tes texbox s'appelle obj.Id obj.Name.
Attention n'oublie pas les constructeurs vide de tes classes.

Cordialement
Soazig

[Julien698]

Salut Soazig,

Finalement j,'ai trouvé une solution pour afficher mon formulaire :

J'ai conservé, mes trois objets MainObjet, Numbers et Mix en appliquant un nommage correct et en mettant les constructeurs. Coté vue, dans la mesure ou ma liste de "Numbers" peut avoir x entrées, j'ai mis en place une fonction JS qui ajoute/supprime des champs de saisie sur L'UI avec les propriété name et id adéquate, et qui recalcule les id en conséquence (S'il y a un "trou" dans les Id j,'ai remarqué que seuls les premiers qui se suivent sont pris en compte). Puis remplacé le "for" de la vue par un foreach, je suis en contrepartie obligé d'envoyer un objet initialisé dans la vue lors du get, mais il est beaucoup facile de conserver les données en cas d'un affichage de la vue avec les formulaires complétés depuis la fonction httppost si le modelstate n'est pas valide.

J'ai ajouté un td contenant un bouton dans chacune des tr de la table pour la suppression de ligne. L'ajout de ligne se fait via un tab depuis la deuxième textbox de la dernière ligne.

Code :

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
 $('#tableSEN').on('keydown', 'input', function (e) {
            var keyCode = e.keyCode;
            if (keyCode !== 9) return;
            var $this = $(this),
                $lastTr = $('tr:last', $('#tableSEN')),
                $lastTd = $('td:nth-child(2)', $lastTr);
 
            if (($(e.target).closest('td')).is($lastTd)) {
                $('#tableSEN > tbody:last-child').append($lastTr.clone().find('input').val('').end());           
            }
 
            reAssignId();            
        });
 
        function reAssignId() {            
            $('#tableSEN tr').each(function (i) {              
                var textinput = $(this).find('input');
                textinput.eq(0).attr('name', 'SecondForm[' + i + '].NumeroObjet');
                textinput.eq(0).attr('id', 'SecondForm[' + i + '].NumeroObjet');
                textinput.eq(1).attr('name', 'SecondForm[' + i + '].ExpediteurExterne');
                textinput.eq(1).attr('id', 'SecondForm[' + i + '].ExpediteurExterne');                
            })
        }
 
        $('#tableSEN').on("click", ".removeRow", function (event) {
            $(this).closest("tr").remove();
            reAssignId();
        })