Populate DropDownList in ASP.NET MVC

Question

So basically I'm trying to make a website that can do stuff like the programs in the super markets database with products / Views where sellers work , Views to add new products and receipt note model.So I have a class

public class Product
{
    public int ID { get; set; }
    public string Title { get; set; }
    public int Quantity { get; set; }
    public decimal Price { get; set; }
}

public class ProduktiDBContext : DbContext
{
    public DbSet<Product> Products { get; set; }
}

and a controller

public class ProduktiController : Controller
{
    private ProduktiDBContext db = new ProduktiDBContext();

    public ActionResult Index()
    {
        return View(db.Products.ToList());
    }

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

    [HttpPost]
    public ActionResult Create(Product product)
    {
        if (ModelState.IsValid)
        {
            db.Products.Add(product);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(product);
    }
}

and in the Index View I want to add a DropDownList with all the titles of the products from the database

@model IEnumerable<Produkti.Models.Product>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Quantity)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Price)
        </th>

    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Quantity)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ID })
        </td>
    </tr>
}


<hr />
    @foreach (var item in Model) {
    <tr>
        <td>
            //I'd like to put the dropdownlist here i dont know if this for loop is necessary
        </td>
       <td>

       </td>
    </tr>
}

</table>

I was wondering if I need to pass a List with all the titles from the controller to the View or the return View(db.Products.ToList()); from the Index Method already pass the data that I need, and how to pass data from this DropDownList

Answer 1

public ActionResult Index()
 {
  ViewBag.Products = new SelectList(db.Products,"ProductID","ProductName");
  return View();
  }

In View Just write the statement.

@Html.DropDownList("Products");

Answer 2

Instead of using IEnumerable<Produkti.Models.Product> as the model, I'd suggest creating a new model class that contains List<Product> and List<SelectListItem>. Let's say the class name is ProductModel and below is what the class definition will look like

public class ProductModel
{
    public ProductModel()
    {
        this.Products = new List<Product>();
        this.ProductsDropdownItems = new List<SelectListItem>();
    }

    public List<Product> Products { get; set; }
    public int SelectedProductID { get; set; }
    public List<SelectListItem> ProductsDropdownItems { get; set; }
}

Change your controller action method to this

public class ProduktiController : Controller
{
    private ProduktiDBContext db = new ProduktiDBContext();

    public ActionResult Index()
    {
        ProductModel model = new ProductModel();
        model.Products = db.Products.ToList();

        foreach(var p in db.Products)
        {
            model.ProductsDropdownItems.Add(new SelectListItem() { Text = p.Title, Value = p.ID.ToString() });
        }

        return View(model);
    }
}

then change your view code

@model Produkti.Models.ProductModel
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            Title
        </th>

        <th>
            Quantity
        </th>

        <th>
            Price
        </th>

    </tr>

@foreach (var item in Model.Products) {
    <tr>
        <td>
            @item.Title
        </td>
        <td>
            @item.Quantity
        </td>
        <td>
            @item.Price
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ID })
        </td>
    </tr>
}


<hr />
    <tr>
        <td>
            @Html.DropDownListFor(m => m.SelectedProductID, Model.ProductsDropdownItems)
        </td>
       <td>

       </td>
    </tr>
</table>

Answer 3

Approach 1:

In your action do like this:

public ActionResult YourAction()
{

ViewBag.DDLProducts = new SelectList(db.Products,"ProductID","ProductName");

return View();

}

In View:

@Html.DropDownListFor(model => model.SelectedProduct,  (List<SelectListItem>)ViewBag.DDLProducts, "Select One")

Approach 2:

Another Way around can be if you don't need to change action or model:

public ActionResult YourAction()
    {


    return View();

    }

In View:

@Html.DropDownListFor(model => model.SelectedProduct,new SelectList(db.Products,"ProductID","ProductName"), "Select One")

Answer 4

add a list to your model

public List<SelectListItem> Products { get; set; }

then on your controller, populate that list

foreach(var temp in db.Products){
    model.Products.Add(new SelectListItem() { Text = temp.ProductName, Value = temp.ProductID });
}

then on your view

@Html.DropDownListFor(x => x.SelectedProduct, model.Products)

you can set the drop down by setting model.SelectedProduct on the get and that value will be populated with the selected value on post