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

我想要完成的是，每当我从 dropdownlist 中选择一个 Product 时，该产品的相应 Stock 将显示在html文本输入。任何形式的帮助将不胜感激。

Answer 1

在你的控制器中，你可以等待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>

Answer 2

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

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