Populating multiselect list with data MVC 3 .NET

Question

I have been searching a lot on Google and Stackoverflow for soltuions on how to Populate a Multiselect box with values that can be selected. But no luck.

public class PriceObj
{
    public int ID { get; set; }
    public decimal Price { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public virtual ICollection<PriceGroupObj> PriceGroup {get; set;}
}

public class PriceGroupObj
{
   public int ID { get; set; }
   public string Name { get; set; }
}


public class PriceDatabaseContext : DbContext
{
    public DbSet<PriceObj> PriceObjs { get; set; }
    public DbSet<PriceGroupObj> PriceGroupObjs { get; set; }

    protected override void OnModelCreating(DbModelBuilder modelBuilder)
    {
        base.OnModelCreating(modelBuilder);
        modelBuilder.Conventions.Remove<System.Data.Entity.ModelConfiguration.Conventions.PluralizingTableNameConvention>();

        modelBuilder.Entity<PriceObj>()
            .HasMany(g => g.PriceGroup)
            .WithMany()
            .Map(t => t.MapLeftKey("GroupID").MapRightKey("PriceID").ToTable("PriceGroup"));
    }


}

Then I want in to be able to choose all appropriated price groups for a price in the edit view of the price objects. But I do not get it working, it is not populating all the already created groups in the MultiSelect box.

This is the code I am using in the Razor veiw:

@Html.ListBoxFor(model => model.PriceGroup, Model.PriceGroup.Select(pg => new SelectListItem { Text = pg.Name, Value = pg.ID.ToString() }), new { Multiple = "multiple" })

The select element shows up on the website, but no values are to select from.

Please help me sort out, where my chain is falling of.

score 11 · Accepted Answer · edited Sep 26 '12 at 11:15

11

Use a view model that is adapted to the requirements of your view:

public class PriceViewModel
{
    public int[] SelectedPriceIds { get; set; }
    public IEnumerable<SelectListItem> Prices { get; set; }
}

A ListBoxFor requires 2 properties on your view model:

A collection property of a primitive type (string[], id[], Guid[], ...) that will hold the ids of the selected elements
An IEnumerable<SelectListItem> property that will hold the list of all items

and then in the view:

@Html.ListBoxFor(x => x.SelectedPriceIds, Model.Prices)

Now your controller actions will pass this view model to the view instead of your domain objects which simply are not adapted to what you are trying to achieve. It is inside the controller actions that you will populate this view model from your domain models.

edited Sep 26 '12 at 11:15

Manatherin

4,169
5
36
52

answered Sep 26 '12 at 10:41

Darin Dimitrov

1,023,142
271
3,287
2,928

So I should not be using this: public virtual ICollection PriceGroup { get; set; } – Gunnar Sep 26 '12 at 10:48
No, this is your domain model. Keep it as it is. Define a new view model and have your controller action populate this view model from the properties of your domain models. – Darin Dimitrov Sep 26 '12 at 10:51
I've found this doesn't work if you have validation errors elsewhere in your model, `Prices` will get stripped off :/ Any suggestions on how to resolve that? Seems like you almost need two separate models – bc3tech Oct 14 '22 at 22:02

Rajpurohit · Answer 2 · 2012-09-26T11:19:41.833

i can select multiple value in your listbox so i will suggest to do this in another type

you can use like this below....

you use this js file..

<script type="text/javascript" src="@Url.Content("~/jquery-1.6.4.min.js")"></script>

    <script type="text/javascript" src="@Url.Content("~/chosen.jquery.js")"></script> 

<link href="@Url.Content("~/CSS/chosen.css")" rel="stylesheet" type="text/css" />

and this use in your view

<script type="text/javascript">
        $(document).ready(function() {
            $('.chzn-select').chosen();

        });
 </script>

@Html.ListBoxFor(model => model.CountryId,Model.Countries, new { @class = "chzn-select",data-placeholder="Choose a Country...", Style = "width: 150px;" })

you just bind your listbox and select your multiple value like this. see more for jquery choosen ... http://davidwalsh.name/jquery-chosen

enter image description here

i think this will help you..

If your going to suggest the use of a 3rd party JS library you should really include a link to it — Manatherin, Sep 26 '12 at 11:10
@Rajpurohit, I write like this. Difference is that, i use a string variable instead of "model => model.CountryId". But doesnt work. data-placeholder attribute not known. — Jeyhun Rahimov, Dec 08 '12 at 16:43

Populating multiselect list with data MVC 3 .NET

2 Answers2

Linked