CODEWITHSUNDEEP
asp.net-mvcdatagridviewdropdown
Procrastinating Programmer
Procrastinating Programmer

Reputation: 314

Drop down list in a view from another table mvc5

I am creating a Razor Page that will display a data grid.

One of the columns needs to have drop downs. The contents of this drop down need to come from another table.

Example

Data grid View

OrderID  |  Customer Name  |  Product Name

123      |  John Doe       |  Bag of Chips

Customer Name and Product Name need to be a drop down list coming from the customer and product tables

Order Table

OrderID   |   Customer ID    |   Product ID

123        |   1              |   1

Customer Table

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

Product Table

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

Customer Name and Product Name need to be a drop down from customer and product table. How do I achieve this?

So far tried:

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

View:

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

Controller

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

I'm fairly new to MVC. I know that the Controller loads the data, but I'm not sure how to load a controller for a view model that has many models.

Upvotes: 0

Views: 211

Answers (1)

Grizzly
Grizzly

Reputation: 5943

I think having dropdownlists in this particular situation will end up being sloppy unless if you pay for some 3rd party library like jQuery Datatables Editor. Otherwise it's going to be an ajax solution, which can be sloppy at times. I would suggest just to have an "Edit" link next to each row, and let the user click on that link to edit whichever record they want.

However in reference to getting your page to display the values you want, you first need to set it up in the controller. As of now, you aren't returning anything to the view.. hence why it's blank. Here is how it should look:

Controller

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

View

I would suggest using a table element instead of using lists. In my opinion it's cleaner, and there are free javascript libraries that you can use to sort, search, and filter the table like jQuery Datatables. Also, this assumes you're using Bootstrap for styling.

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

Let me know if this helps!

Upvotes: 2

Related Questions