MultiSelectList does not highlight previously sele

Question

In a ASP.NET MVC (Razor) project, I'm using a ListBox with Multi Select option in a Edit View,

CONTROLLER

    public ActionResult Edit(int id)
    {
        Post post = db.Posts.Find(id);
        string selectedValues = post.Tags; //This contains Selected values list (Eg: "AA,BB")
        ViewBag.Tagslist = GetTags(selectedValues.Split(','));
        return View(post);
    }

    private MultiSelectList GetTags(string[] selectedValues)
    {
        var tagsQuery = from d in db.Tags
                        orderby d.Name
                        select d;
        return new MultiSelectList(tagsQuery, "Name", "Name", selectedValues);

    }

HTML

    <div class="editor-field">
        @Html.ListBox("Tags", ViewBag.Tagslist as MultiSelectList)
    </div>

This loads the items (Tag List) in to ListBox, but does not highlight the items in the Selected Values list.

How to fix this issue?

Thanks in advance.

Answer 1

I suspect that your Post class (to which your view is strongly typed) has a property called Tags. You also use Tags as first argument of the ListBox helper. This means that the helper will look into this property first and ignore the selected values you passed to the MultiSelectList. So the correct way to set a selected value is the following:

public ActionResult Edit(int id)
{
    Post post = db.Posts.Find(id);
    ViewBag.Tagslist = GetTags();
    return View(post);
}

private MultiSelectList GetTags()
{
    var tagsQuery = from d in db.Tags
                    orderby d.Name
                    select d;
    return new MultiSelectList(tagsQuery, "Name", "Name");

}

and in the view:

<div class="editor-field">
    @Html.ListBoxFor(x => x.Tags, ViewBag.Tagslist as MultiSelectList)
</div>

---

And here's a full example that should illustrate:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var post = new Post
        {
            Tags = new[] { "AA", "BB" }
        };
        var allTags = new[]
        {
            new { Name = "AA" }, new { Name = "BB" }, new { Name = "CC" },
        };
        ViewBag.Tagslist = new MultiSelectList(allTags, "Name", "Name");
        return View(post);
    }
}

Also I would recommend you using view models instead of passing your domain entities to the view. So in your PostViewModel you will have a property called AllTags of type MultiSelectList. This way you will be able to get rid of the weak typed ViewBag.