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

Question

我正在使用Asp.net MVC 5和Entity Framework 6开发包含以下产品模型的应用程序：

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

在控制器中，我正在填充产品列表：

DemoDBContext db = new DemoDBContext();
public ActionResult Index()
    {
        var productList = db.Products.ToList();
        ViewBag.Products = productList;
        return 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>

我要完成的工作是，每当我从下拉列表中选择一个产品时，该产品的相应库存将显示在htmltextinput中 。 任何帮助将不胜感激。

Answer 1

您应该使用Jquery处理DropdownList事件。 请参见onChange侦听器示例。 jQuery OnChange

然后，您可以将异步请求发送到服务器以获取一些数据或使用Jquery或本机Javascript执行一些客户端任务。

Answer 2

在您的控制器中，您可以等待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();
    }

在视图中，可以，只需添加脚本，该脚本将ProductId作为查询字符串参数发送：

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

我个人会使用像这样的ViewModel：

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

和控制器一样：

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

最后，视图像：

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