Many to many relationship and drop down list

Question

I have a dropdownlist as follows

<div class="form-group">
    @Html.LabelFor(m => m.Categories, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.DropDownListFor(m => m.Categories, new SelectList(Model.CategoriesDropDownList), "Choose a category", new { @class = "form-control" })
    </div>
    @Html.ValidationMessageFor(m => m.Categories)
</div>

However, I get an invalid error for validation when I check if the model state is valid or not.

My product form view model is as follows

using LaptopMart.Models;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace LaptopMart.ViewModels
{
public class ProductFormViewModel
{

    public int Id { get; set; }

    [Required]
    public string Name { get; set; }

    [Required]
    public decimal? Price { get; set; }

    [Required]
    [DisplayName("Stock")]
    public int? StockQuantity { get; set; }

    [Required]
    public string Description { get; set; }

    [Required]
    [Display(Name="Category")]
    public ICollection<Category> Categories { get; set; }


    public string Image { get; set; }

    public IEnumerable<Category> CategoriesDropDownList { get; set; }

}
}

I have a many to many relationship between category and product. When I want to fill up the form for product, I wish to choose a category from CategoriesDropDownList into Categories. How do I go about doing that?

You cannot bind a dropdownlist to a collection of complex object (which is what `Categories` is) - a dropdownlists bind to and posts back a simple value — , Feb 02 '18 at 10:57
And your `new SelectList(Model.CategoriesDropDownList)` would never work! - suggest you refer [this Q/A](https://stackoverflow.com/questions/34366305/the-viewdata-item-that-has-the-key-xxx-is-of-type-system-int32-but-must-be-o) for the code to generate a dropdownlist — , Feb 02 '18 at 10:59

score 0 · Answer 1 · answered Feb 02 '18 at 10:58

You have specified wrong model type to your @Html.DropDownListFor. What i mean to say is type of the Categories properties should not be ICollection<Category>. When you use DropDownListFor - the first parameter is the property where your selected value is stored once you submit the form. So, in your case, it should be CategoryId which should be of type int. So after modification your code look like this -

@Html.DropDownListFor(m => m.CategoryId, new SelectList(Model.CategoriesDropDownList, "CategoryId", "CategoryName"), "Choose a category", new { @class = "form-control" })

and your model -

[Required]
[Display(Name="Category")]
public int CategoryId { get; set; }

I am new asp.net. So, what if a product can belong to multiple categories? — AP123, Feb 02 '18 at 11:07

score 0 · Answer 2 · answered Feb 05 '18 at 11:50

You can use DropDownList for one to one, and you can you ListBox for one to many.

I dont know your DB model but firstly you need change your ProductFormViewModel class. Because public ICollection<Category> Categories { get; set; } and public IEnumerable<Category> CategoriesDropDownList { get; set; } are same.

It could be such as below

public class ProductFormViewModel
{

    public int Id { get; set; }

    [Required]
    public string Name { get; set; }

    [Required]
    public decimal? Price { get; set; }

    [Required]
    [DisplayName("Stock")]
    public int? StockQuantity { get; set; }

    [Required]
    public string Description { get; set; }

    [Required]
    [Display(Name="Category")]
    public ICollection<Category> Categories { get; set; }


    public string Image { get; set; }
    //one to one
    public int CategoryID { get; set; }
    //one to many
    public IEnumerable<int> CategoryIDS { get; set; }

}

Category class such as

public class Category{
    public int CategoryId { get; set; }
    public string CategoryName { get; set; }
}

DropdownList example

@Html.DropDownListFor(m => m.CategoryID, new SelectList(Model.Categories , "CategoryId", "CategoryName"), "Choose a category", new { @class = "form-control" })

Listbox example

@Html.ListBoxFor(model => model.CategoryIDs, new SelectList(Model.Categories , "CategoryId", "CategoryName"), "Choose a category", new { @class = "form-control" })

Many to many relationship and drop down list

2 Answers2