envoi d'une valeur d'un textbox et l'id du modèle au controller

**Swifa** · 23/05/2017, 19h09

Salut tout le monde,
je suis en cours de réalisation d'un panier asp.net mvc c#
J'essaie d'envoyer une valeur "quantité" d'un textbox qui n'appartient à mon modèle "produit" au controller

j'ai essayé avec ajax mais rien ne se passe . au faite mon script ne s'exécute pas et mon panier se rempli avec le produit sans la quantité qui reste nulle.

voila mon view

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<script>
    $('.Sendparams').click(function (e) {
        e.preventDefault();
        debugger;
        var produitId = $(this).val();
        var quant = $("#quant").val();
        $.ajax({
            type: 'GET',
            url: '/ShoppingCart/AddToCart',
            data:{ "Id": produitId , "quant": quant },
        success: function (response) {
                $("#mainContainerCenter").html(response); } });});
</script>
@model testingtemplate.Models.Categorie
@{
    ViewBag.Title = "Browse Produits";
    Layout = "~/Views/Shared/_Layout2.cshtml";
}
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h3>@Model.Nom_categorie </h3>
    </section>
    <!-- Main content -->
    <section class="content">
      <!-- Small boxes (Stat box) -->
        <div class="row">    
      <ul>     @foreach (var album in Model.Produits)
      {
 
                            <div class="col-lg-3 col-xs-6">
 
                                <li>@album.Nom_Produit</li>
                                <li>@album.Categorie.Nom_categorie</li>
                                <li>@String.Format("{0:F}", album.Prix)</li>
                                <li>@Html.TextBox("quant")</li>
                                <li>@Html.Hidden("produitId", album)</li>
                                <li>
                                <p class="button">
          @Html.ActionLink("voila","AddToCart","ShoppingCart", new { id = album.ProduitId }, new { @class = "Sendparams"})
                                    </p>
                                </li>
                                  </div> }
 
</ul>
         </div>
</section>
  </div>

ainsi que mon controller

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
       public ActionResult AddToCart(int id , string quant)
        {
            // Retrieve the album from the database
            var addedAlbum = storeDB.Produits
                .Single(album => album.ProduitId == id);
 
            // Add it to the shopping cart
            var cart = ShoppingCart.GetCart(this.HttpContext);
 
            cart.AddToCart(addedAlbum,quant);
 
            // Go back to the main store page for more shopping
            return RedirectToAction("Index");
        }

Je sais que je looupe quelque chose mais je ne sais pas quoi vraiment

**Dokho1000** · 24/05/2017, 11h00

As tu une route valide avec les paramètres id & quant ?
Montre nous ton routeconfig.cs...

**François DORIN** · 24/05/2017, 13h00

Bonjour,

Dans l'immédiat, je ne vois pas d'erreur flagrante.

Il y a par contre la possibilité qu'au moment où le script javascript s'exécute, le DOM ne soit pas chargée. Du coup, l'ajout d'un gestionnaire sur l'événement click n'est pas posé !

Essai ainsi, afin d'exécuter ton code une fois que le DOM est complètement chargé.

Code C# :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    $(document).ready(function() {
     $('.Sendparams').click(function (e) {
        e.preventDefault();
        debugger;
        var produitId = $(this).val();
        var quant = $("#quant").val();
        $.ajax({
            type: 'GET',
            url: '/ShoppingCart/AddToCart',
            data:{ "Id": produitId , "quant": quant },
        success: function (response) {
                $("#mainContainerCenter").html(response); } });});
});
</script>

**Swifa** · 24/05/2017, 19h20

Envoyé par François DORIN

Bonjour,

Dans l'immédiat, je ne vois pas d'erreur flagrante.

Il y a par contre la possibilité qu'au moment où le script javascript s'exécute, le DOM ne soit pas chargée. Du coup, l'ajout d'un gestionnaire sur l'événement click n'est pas posé !

Essai ainsi, afin d'exécuter ton code une fois que le DOM est complètement chargé.

Code C# :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    $(document).ready(function() {
     $('.Sendparams').click(function (e) {
        e.preventDefault();
        debugger;
        var produitId = $(this).val();
        var quant = $("#quant").val();
        $.ajax({
            type: 'GET',
            url: '/ShoppingCart/AddToCart',
            data:{ "Id": produitId , "quant": quant },
        success: function (response) {
                $("#mainContainerCenter").html(response); } });});
});
</script>

voila l'erreur:

Code :

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

1
2
The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult AddToCart(Int32, System.String)' in 'testingtemplate.Controllers.ShoppingCartController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Nom du paramètre : parameters

**Swifa** · 24/05/2017, 19h23

Envoyé par Dokho1000

As tu une route valide avec les paramètres id & quant ?
Montre nous ton routeconfig.cs...

je ne sais pas vraiment ou je peux trouver le routeconfig.cs

**François DORIN** · 24/05/2017, 20h17

Envoyé par Swifa

voila l'erreur:

Code :

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

1
2
The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult AddToCart(Int32, System.String)' in 'testingtemplate.Controllers.ShoppingCartController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Nom du paramètre : parameters

On progresse ! L'erreur vient du fait que tu accès à ta textbox "quant" par son id dans le code javascript. Mais il n'en a pas ! Il n'a qu'un nom. Soit tu lui rajoutes un id, soit tu le récupères via son nom.

**Swifa** · 25/05/2017, 00h31

Envoyé par François DORIN

On progresse ! L'erreur vient du fait que tu accès à ta textbox "quant" par son id dans le code javascript. Mais il n'en a pas ! Il n'a qu'un nom. Soit tu lui rajoutes un id, soit tu le récupères via son nom.

j'ai essayé de changer mon textbox en

Code :

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

   <li>@Html.TextBox("quant", null,new { id = "quant" })</li>

mais j'ai recu l'erreur suivante

Code :

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

1
2
The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult AddToCart(Int32, System.String)' in 'testingtemplate.Controllers.ShoppingCartController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Nom du paramètre : parameter

j'essaie d'envoyer deux valeurs l'id du produit que j'ai cliqué dessus et la valeur de la quantité saisie dans la textbox. je pense que l'id dont ils parlent est celui du produit nnn ?

**François DORIN** · 25/05/2017, 08h24

Envoyé par Swifa

j'essaie d'envoyer deux valeurs l'id du produit que j'ai cliqué dessus et la valeur de la quantité saisie dans la textbox. je pense que l'id dont ils parlent est celui du produit nnn ?

Oui, c'est l'id du produit qui n'est pas correctement envoyé.

via jquery, val() te retourne la valeur d'un champ input (ou textarea). Il ne permet pas de récupérer l'id de l'élément. C'est pour cela que ton code ne fonctionne pas.

Tu peux donc au choix :

remplacer var produitId = $(this).val(); par var produitId = $(this).attr('id');
ajouter un id à ton champ hidden, et récupérer ensuite la valeur de ce champ de la même manière que tu le fais pour la quantité.

**Swifa** · 25/05/2017, 16h25

Envoyé par François DORIN

Oui, c'est l'id du produit qui n'est pas correctement envoyé.

via jquery, val() te retourne la valeur d'un champ input (ou textarea). Il ne permet pas de récupérer l'id de l'élément. C'est pour cela que ton code ne fonctionne pas.

Tu peux donc au choix :

remplacer var produitId = $(this).val(); par var produitId = $(this).attr('id');
ajouter un id à ton champ hidden, et récupérer ensuite la valeur de ce champ de la même manière que tu le fais pour la quantité.

J'ai appliqué le premier choix mais je reçois toujours la même erreur

**François DORIN** · 25/05/2017, 17h11

J'ai l'impression que tu attends qu'on te donne un code tout fait qui marche ! Je t'ai proposé deux solutions, tu reviens dès la première erreur, sans plus d'investigation et sans même avoir testé la seconde !

Pour l'erreur, il faut investiguer un peu. Dans le code HTML généré, le lien dispose-t-il bien d'un attribut "id" avec la bonne valeur ? Car si ce n'est pas le cas, le code javascript ne va pas "inventé" de valeur tout seul...

**Swifa** · 26/05/2017, 12h42

Envoyé par François DORIN

Pour l'erreur, il faut investiguer un peu. Dans le code HTML généré, le lien dispose-t-il bien d'un attribut "id" avec la bonne valeur ? Car si ce n'est pas le cas, le code javascript ne va pas "inventé" de valeur tout seul...

J'a essayé le deuxième choix aussi mais rien ne se passe en utilisant un @html.hidden et un input de typpe hidden.
Pour le lien html qui s généére il m'envoie ceci :

Code :

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

http://localhost:15548/ShoppingCart/AddToCart?class=Sendparams

ce que j'ai pu comprendre c'est qu'il accède à l'action et le controlleur du :

Code :

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

1
2
 
 @Html.ActionLink("voila", "AddToCart", "ShoppingCart", new { @class = "Sendparams" }, new { id = album.ProduitId })

et il n'exécute pas le script !! et honnêtement je ne sais pas comment le faire

**François DORIN** · 26/05/2017, 13h39

Envoyé par Swifa

Pour le lien html qui s généére il m'envoie ceci :

Code :

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

http://localhost:15548/ShoppingCart/AddToCart?class=Sendparams

Ce n'est pas le lien qu'il faut, mais la balise <a> pour vérifier que cette balise contient bien un attribut "id" avec la bonne valeur.

Envoyé par Swifa

J'a essayé le deuxième choix aussi mais rien ne se passe en utilisant un @html.hidden et un input de typpe hidden.

La encore, quel est le code HTML correspondant ?

Le fait qu'aucune des solutions proposées ne fonctionne me fait penser à un problème au niveau des ID...

**Swifa** · 26/05/2017, 15h01

Envoyé par François DORIN

Ce n'est pas le lien qu'il faut, mais la balise <a> pour vérifier que cette balise contient bien un attribut "id" avec la bonne valeur.

La encore, quel est le code HTML correspondant ?

Le fait qu'aucune des solutions proposées ne fonctionne me fait penser à un problème au niveau des ID...

La balise <a > générée est comme ceci :

Code :

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

<a href="/ShoppingCart/AddToCart?class=Sendparams" id="2">voila</a>

cela c 'est avant de cliquer sur le bouton.

**François DORIN** · 26/05/2017, 15h09

Bon, je crois que j'ai trouvé. Le truc "con" : le nom du paramètre dans l'appel ajax est "Id". Hors, le controlleur attend le paramètre "id" (avec un i minuscule). Il faut harmoniser la casse et cela devrait aller beaucoup mieux !

**Swifa** · 26/05/2017, 16h12

Envoyé par François DORIN

Bon, je crois que j'ai trouvé. Le truc "con" : le nom du paramètre dans l'appel ajax est "Id". Hors, le controlleur attend le paramètre "id" (avec un i minuscule). Il faut harmoniser la casse et cela devrait aller beaucoup mieux !

Ouii Voila ça a marché enfinn

Merci Merci Merci

envoi d'une valeur d'un textbox et l'id du modèle au controller

ASP.NET

Discussions similaires

Partager

Partager