Question

我正在创建一个Razor页面，它将显示一个数据网格。

其中一列需要具有下拉菜单。该下拉菜单的内容需要来自另一个表。

示例

数据网格视图

OrderID  |  Customer Name  |  Product Name

123      |  John Doe       |  Bag of Chips

“客户名称”和“产品名称”必须是来自“客户”和“产品”表的下拉列表

订单表

OrderID   |   Customer ID    |   Product ID

123        |   1              |   1

客户表

Customer ID    |   Customer Name
1              |   John Doe
2              |   Jane Doe

产品表

Product ID   |   Product Name
1            |   Bag of Chips
2            |   Can of Pop

客户名称和产品名称必须是来自客户和产品表的下拉列表。我该如何实现？

到目前为止尝试过：

public class OrderViewModel
{
    public int OrderID { get; set; }
    public string CustomerName { get; set;}
    public string ProductName { get; set; }
}

查看：

<dt>
            @Html.DisplayNameFor(model => model.orderID)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.OrderID)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.CustomerName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.CustomerName)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.ProductName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.ProductName)
        </dd>

控制器

public ActionResult OrderView()
{
    return View();
}

我刚接触MVC。我知道Controller会加载数据，但是我不确定如何为具有多个模型的视图模型加载控制器。

Answer 1

我认为在这种特殊情况下拥有下拉列表将最终变得草率，除非您为jQuery Datatables Editor之类的第三方库付费。否则它将是一个ajax解决方案，有时可能会草率地使用。我建议只在每行旁边有一个“编辑”链接，然后让用户单击该链接来编辑他们想要的任何记录。

但是，要使页面显示所需的值，首先需要在控制器中进行设置。到目前为止，您还没有将任何内容返回视图。因此，为什么它是空白的。这是它的外观：

控制器

public ActionResult OrderView()
{
    var lstOfOrderVms = db.Orders
        .Select(x => new OrderViewModel()
                {   OrderId = x.Id, 
                    CustomerName = db.Customers.Find(x.CustomerId).CustomerName,
                    ProductName = db.Products.Find(x.ProductId).ProductName
                })
        .ToList();


    return View(lstOfOrderVms);
}

查看

我建议使用table元素，而不要使用列表。我认为它更干净，并且有免费的javascript库，您可以使用它们来对表进行排序，搜索和过滤，例如jQuery Datatables。此外，这还假设您正在使用Bootstrap进行样式设置。

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Order Number</th>
      <th>Customer Name</th>
      <th>Product Name</th>
      <th></th>
    </tr>

  </thead>
  <tbody>
    @foreach(var item in Model)
    {
      <tr>
        <td>@Html.DisplayFor(model => item.OrderId)</td>
        <td>@Html.DisplayFor(model => item.CustomerName)</td>
        <td>@Html.DisplayFor(model => item.ProductName)</td>
        <td>@Html.ActionLink("Edit", "Orders", new{id = item.OrderId}</td>
      </tr>
    }
  </tbody>
</table>

让我知道这是否有帮助！

从另一个表mvc5的视图中下拉列表

1 个答案: