ASP.NET MVC: Comment afficher la valeur d'une étiquette à partir de l'élément Liste déroulante sélectionné?

Question

J'essaie d'afficher une valeur de l'élément Liste déroulante sélectionné dans une étiquette. J'ai réussi à faire ce travail avec Web Forms mais avec MVC je suis totalement perdu. Mon index ressemble à ceci:

[...] 
    <% using (Html.BeginForm()) { %> 
     <table> 
      <tr> 
      <td>Processor</td> 
      <td><%= Html.DropDownList("lstProcessor1", new SelectList((IEnumerable)ViewData["Processor1List"], "product_price", "product_description")) %></td> 
      </tr> 
      <tr> 
      <td>Total Amount</td> 
      <td>0,00 €</td> 
      </tr> 
     </table> 
     <input type="submit" value="Submit" /> 
    <% } %> 
    [...] 

Et mon HomeController commence par:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using System.Web.Mvc.Ajax; 
using MvcApplication1.Models; 

namespace MvcApplication1.Controllers 
{ 
    [HandleError] 
    public class HomeController : Controller 
    { 
     // Connect database 
     DB50DataContext _ctx = new DB50DataContext(); 

     // GET: /Home/ 
     public ActionResult Index() 
     { 
      // Search: Processors 
      var products = from prod in _ctx.products 
          where prod.product_searchcode == "processor1" 
          select prod; 

      ViewData["Processort1List"] = products; 

      return View(); 
     } 

Je voudrais que le PRODUCT_PRICE à afficher sur la deuxième ligne de la table, où il est dit maintenant 0,00 €. Il devrait également mettre à jour le prix automatiquement quand l'article de la liste déroulante est changé. Je suppose que je devrais utiliser JQuery mais je n'ai aucune idée de comment. Est-ce que quelqu'un pourrait me donner quelques conseils pour le faire?

Answer 1

Vous pouvez le faire avec jQuery:

Ajouter un identifiant pour votre cellulaire totale:

... 
      <td>Total Amount</td> 
      <td id="total">0,00 €</td> 
... 

Ensuite, ajoutez un peu de JavaScript qui se déclenche lorsque les changements de sélection:

<script type="text/javascript" src="jquery-1.4.1.js"></script> 
<script type="text/javascript"> 

$(function() { 
    // Update total when the page loads. 
    $('#total').html($('#lstProcessor1').val()); 

    // Update total when the selection changes. 
    $('#lstProcessor1').change(function() { 
     $('#total').html($(this).val()); 
    }); 
}); 

</script> 

Bien sûr, vous pouvez optimiser ce code afin qu'il ne soit pas répétitif (DRY), et vous voudrez probablement le déplacer dans un fichier JS externe. J'espère que ça aide.

Answer 2

Modifiez votre action pour placer un IEnumerable<SelectListItem> dans les données d'affichage au lieu des éléments du produit réel. Changez ensuite votre vue pour utiliser simplement cette liste.

public ActionResult Index() 
{ 
    // Search: Processors 
    var products = from prod in _ctx.products 
        where prod.product_searchcode == "processor1" 
        select new SelectListItem { Text = prod.product_description, Value = prod.product_price }; 

    ViewData["Processort1List"] = products; 

    return View(); 
} 

Maintenant pour la forme. Changez-le pour utiliser la liste que vous avez créée dans l'action sans le code supplémentaire (et une sélection par défaut). Ajoutez un identifiant au TD qui doit être mis à jour - notez que la valeur va provenir du select lorsque vous l'affichez, et non du TD.

Processeur ) ViewData [ "Processor1List"] "" Sélectionner un produit ")%> Montant total 0,00 €

Maintenant, ajoutez un peu de javascript pour mettre à jour le TD lorsque la sélection change

<script type="javascript"> 
    $(function() { 
     $('#lstProcessor1').change(function() { 
      ('#price').html($(this).val()); 
     }); 
    }); 
</script> 

Answer 3

Je vous suggère d'ajouter une nouvelle action sur votre contrôleur qui va retourner le prix d'un produit donné l'identifiant du produit. L'identifiant du produit doit représenter la valeur de la liste déroulante:

public ActionResult Price(int? productId) 
{ 
    decimal price = 0; 
    var product = _ctx.products 
     .Where(prod => prod.id == productId) 
     .FirstOrDefault(); 
    if (product != null) 
    { 
     price = product.Price; 
    } 
    return Json(new { price = price }); 
} 

Cette action sera alors invoquée lorsque vous modifiez la valeur de la liste déroulante:

$(function() { 
    $('#lstProcessor1').change(function() { 
     var productId = $(this).val(); 
     $.getJSON('/controller/price', { productId: productId }, function(json) { 
      $('#total').html(json.price); 
     }); 
    }); 
}); 

Answer 4

Je suis d'accord avec tous ces gars-là. Cependant, il y a 2 choses importantes que vous devriez regarder:

1) Vous devez nommer votre objet ViewData avec le même nom de clé que le contrôle dans votre vue. De cette façon, vous n'aurez pas besoin de spécifier dans votre View l'objet "ViewData" réel, car le moteur MVC le trouvera.

2) Oui, vous pouvez persister vos recherches de prix dans un objet JSON sur le côté client. Mais, cela pourrait obtenir un grand, complexe et indisciplinés. Je suggère faire un appel asynchrone avec jQuery. Regardez dans la jQuery fonction « .getJSON $ », et de l'utiliser conjointement avec le MVC JsonResult.

Faites-moi savoir si vous voulez plus de détails :)

Answer 5

Si vous voulez saisir le prix ou toute autre donnée, à partir du serveur, vous pouvez utiliser jquery et faire Lla:

$(lstProcessor1).change(function (product) { 
    $.getJSON('/products/getproduct', { id: $(this).val() }, function(product) { 
     $('#product-total').val(product); // or use .html() if it's not an input element 
    }) 
}) 

Dans votre contrôleur il vous suffit de retourner un prodcut sérialisé JSON avec return Json(product)