Wählen Sie Daten basierend auf Dropdownlist ausgewählte Element in Asp.net MVC 5

Question

ich eine Anwendung entwickle mit Asp.net MVC 5 und Entity Framework 6, die ein Produktmodell enthält wie folgt:

[Key,DatabaseGenerated(DatabaseGeneratedOption.Identity)] 
     public int ProductId { get; set; } 
     public string Name { get; set; } 
     public float Stock { get; set; } 

In meinem Controller I bin bevölkern die Liste der Artikel:

DemoDBContext db = new DemoDBContext(); 
public ActionResult Index() 
    { 
     var productList = db.Products.ToList(); 
     ViewBag.Products = productList; 
     return View(); 
    } 

und meine Ansicht:

@{ 
    ViewBag.Title = "Home Page"; 
    var productList = ViewBag.Products; 
} 
<td> 
    @Html.DropDownList("Products", new SelectList(productList, "ProductId", "Name"), "-- Select Product --", new { @class = "form-control" }) 
       <span class="error">Item name required</span> 
    </td> 

Was ich bin tryin g zu erreichen ist, wenn ich ein Produkt von Dropdownlist wählen, die entsprechenden Auf dieses Produkt in einer wird htmltextinput gezeigt. Jede Art von Hilfe wird geschätzt.

Answer 1

In Ihrem Controler, können Sie für die ProductId warten:

public ActionResult Index(int ProductId = 0) 
    { 
     var productList = db.Products.ToList(); 
     ViewBag.Products = productList; 
     if(ProductId!=0) 
     { 
      //do the logic to get the stock 
     } 
     return View(); 
    } 

In der Ansicht, es ist in Ordnung, fügen Sie einfach das Skript, das die ProductId als Abfrage-String-Parameter sendet:

<td> 
@Html.DropDownList("Products", new SelectList(productList, "ProductId", "Name"), "-- Select Product --", new { @class = "form-control" }) 
      <span class="error">Item name required</span> 

<script> 
$(function() { 
      $('#Products').change(function() { 
       window.location = "Index?ProductId=" + $(this).val(); 
      }); 
     }); 
</script> 

ich würde verwenden personaly ein Ansichtsmodell wie:

public class Product 
    { 
     [Display(Name="Choose product:")] 
     public int Product { get; set; } 
     [Display(Name="Stock:")] 
     public string Stock { get; set; } 
     public List<Products> Products { get; set; } 
    } 

Und der Controller wie:

public ActionResult Index(int ProductId = 0) 
     { 
      var model = new Product 
      { 
       Products = db.Products.ToList(), 
       Stock = ProductId != 0 ? db.Products.Where(x=>x.ProductId == ProductId).FirstOrDefault().Stock : null 
      }; 
      return View(model); 
     } 

Und schließlich die Ansicht wie:.

@model Models.Product 
@{ 
    ViewBag.Title = "Home Page"; 
} 
<table> 
    <tr> 
    <td> 
      @Html.LabelFor(m => m.Product) 
      @Html.DropDownListFor(m => m.Product, new SelectList(Model.Products, "ProductId", "Name"), "-- Select Product --", new { onchange = "return ToggleViewItems();" }) 
      @Html.ValidationMessageFor(m => m.Product, string.Empty, new { @class = "" }) 
    </td> 
    <td> 
      @Html.LabelFor(m => m.Stock) 
      @Html.TextBoxFor(m => m.Stock) 
    </td> 
    </tr> 
</table> 
<script> 
    $(function() { 
     $('#Product').change(function() { 
       window.location = "Index?ProductId=" + $(this).val(); 
     }); 
    }); 
</script> 

Answer 2

Sie sollten Jquery verwenden, um die DropDownList-Ereignisse zu verarbeiten. Siehe Beispiel für onChange Listener. Jquery OnChange

Dann können Sie eine Async-Anfrage an den Server senden, um einige Daten zu erhalten oder einige clientseitige Aufgaben mit Jquery oder nativem Javascript auszuführen.