根据下拉列表中Asp.net MVC 5中的所选项目选择数据

Question

I am developing an application using Asp.net MVC 5 and Entity Framework 6 which contains a Product Model as follows:

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

In my controller I am populating the list of Product:

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

and my view:

@{
    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>

What i am trying to accomplish is whenever i select a Product from dropdownlist , the corresponding Stock of that product will be shown in a htmltextinput . Any kind of help will be appreciated.

Answer 1

You should use Jquery to handle the DropdownList events. See sample for onChange listener. Jquery OnChange

Then, you can send Async request to server to get some data or do some client-side tasks using Jquery or native Javascript.

Answer 2

In your controler, you can wait for the ProductId:

 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 the view, it is ok, just add the script, that sends the ProductId as a query string parameter:

<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>

I would personaly use a ViewModel like:

 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; }
    }

And the controller like:

 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);
        }

And last, the view like:

@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>