How to get multiselected Dropdownlist values in asp.net mvc

Question

I have a problem to get multi select dropdown list values.can anyone suggest me how to get select multiple dropdownlist values as well as how to get them in controller.

My code is like this:-

Model

public string BusinessUnitSiteSafetyRepresentative { get; set; }

Controller

[HttpPost]
public ActionResult AddClientBusinessUnitSite(LocalAddClientBusinessUnitSite local)
{
 var query = from o in entitydb.systemusersorganizations.toList()
             from c in entitydb.contacts.toList()
             where o.orgId == clientId 
             select new SelectListItem
             {
                Text = c. Name;
                Value = c.OrgId.toString()                 
             }
 ViewBag.list1 = query.ToList();
}

Well, I can get if single value is selected & can save to DB.But how to select multiple values as well as to get them in Controller so as to save them.

Note: - I am retrieving the dropdownlist values from DB as shown above.

View

@Html.ListBoxFor(x => Model.BusinessUnitSiteSafetyRepresentative,new 
 MultiSelectList((IEnumerable<SelectListItem>)@Viewbag.list1) 

I have gone through some examples but none of them helped me.Please help me.

Answer 1

What I suggest is that your model needs to have a one to many relationship with the items in your multi select list.

An example is a Blog with multiple tags:

Your blog model may look like:

public class Blog
{
    public Blog()
    {
        Tags = new List<Tag>();
    }

    public string BlogTitle{ get; set; }
    public string Body{ get; set; }
    public virtual ICollection<Tag> Tags{ get; set; }
}

And your tag model like so:

    public int TagID{ get; set; }
    public string TagName{ get; set; }
    public virtual ICollection<Blog> Blogs{ get; set; }

Now I recommend you use a view model:

public class BlogViewModel
{
    public Blog blog{ get; set; }
    public List<int> SelectedTags { get; set; }

    public virtual List<Tag> Tags{ get; set; }

    public BlogViewModel()
    {

    }

    public BlogViewModel(Blog _blog, List<Tag> _Tags)
    {
        blog = _blog;
        Tags = _Tags;
        SelectedTags = new List<int>();
    }
}

And finally in your View (which inherits from the ViewModel);

@Html.ListBoxFor(m => m.SelectedTags,
new MultiSelectList(Model.Tags, "TagID", "Tag")
, null)

The JQuery Chosen plugin is excellent for this http://harvesthq.github.io/chosen/. You can use it by:

@Html.ListBoxFor(m => m.SelectedTags,
new MultiSelectList(Model.Tags, "TagID", "Tag")
, new { @class = "chzn-select", data_placeholder = "Tags..." })

Replace this with your own model and controllers and this should solve your problem. Also, this will work in your form for creating a new blog post, and for editing an existing post (adding and removing tags)

edit:

In your Blog Create controller action, you would populate this as:

    public ActionResult Create()
    {

        var blog = new Blog();
        var AllTags = from t in db.Tags
                           select t;
        BlogViewModel viewModel = new BlogViewModel(blog,
            Tags.ToList());

        return View(viewModel);

    }

    public ActionResult Create(BlogViewModel blogViewModel)
    {
        Blog blog = blogViewModel.blog;

        if (blogViewModel.SelectedTags != null)
        {
            foreach (var TagID in blogViewModel.SelectedTags)
            {
                Tag tag = db.Tags.Where(t => t.TagID == TagID).First();
                blog.Tags.Add(tag);
            }
        }
        db.Blog.Add(blog);
        db.SaveChanges();
    }