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

ekad · Accepted Answer · 2014-05-21 04:51:00Z

1

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>

edited May 21, 2014 at 4:51

answered May 21, 2014 at 4:23

ekad

14.7k26 gold badges46 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Arch_interpreter Over a year ago

when i follow this guide i get a lot of errors in my View "@model <Produkti.Models.ProductModel>" interface member declaration error

Arch_interpreter Over a year ago

also changed to this model.ProductsDropdownItems.Add(new SelectListItem() { Text = p.Title, Value = p.ID.ToString() }); but i got an error in View now @Html.DisplayNameFor(model => model.Title)

ekad Over a year ago

please see the whole view code above, I changed @Html.DisplayNameFor(model => model.Title) to Title. The same goes for Quantity and Price.

Arch_interpreter Over a year ago

finnaly done it thanks i need to examine now what you made thanks a lot

Matt Bodily · Accepted Answer · 2014-05-21 02:53:23Z

1

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

answered May 21, 2014 at 2:53

Matt Bodily

6,4134 gold badges32 silver badges51 bronze badges

3 Comments

Arch_interpreter Over a year ago

when i add List to the model after run i get an error no keys defined

Ehsan Sajjad Over a year ago

instead of looping use new SelectList(db.Products,"ProductID","ProductName")

Arch_interpreter Over a year ago

@EhsanSajjad can you write the whole code and where should i put it please i dont know what you mean

Ehsan Sajjad · Accepted Answer · 2014-05-21 04:19:50Z

0

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

answered May 21, 2014 at 4:19

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

2 Comments

Arch_interpreter Over a year ago

model.SelectedProduct seems to has no reference

Ehsan Sajjad Over a year ago

add SelectProduct Property by making a copy of your model as ViewModel

Ishtiaq · Accepted Answer · 2014-05-21 10:49:30Z

0

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

In View Just write the statement.

@Html.DropDownList("Products");

answered May 21, 2014 at 10:49

Ishtiaq

1,0782 gold badges7 silver badges21 bronze badges

Collectives™ on Stack Overflow

Populate DropDownList in ASP.NET MVC

4 Answers 4

4 Comments

3 Comments

Approach 1:

Approach 2:

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

Approach 1:

Approach 2:

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related