using MultiSelectList in ASP.NET MVC

Question

I'm trying to create the edit form for book (with id 1), I want the selection list to select the existing author which retrieved from database. That book with id 1 has an author with id 1, but the HTML does not show selected author with id 1 for that book.

I feel like there is something wrong with the argument ViewData["SelectedAuthors"] as IEnumerable at MultiSelectList function at Book.ascx source file

Another problem is, how can I use MultiSelectList to combine both "first_name" and "last_name" for text display ? I can only select "first_name"

StoreManagerViewModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using BookStore.Models;

namespace BookStore.ViewModels
{
    public class StoreManagerViewModel
    {
        public book Book { get; set; }
        public List<author> Authors { get; set; }
        public List<category> Categories { get; set; }
        public List<int> SelectedAuthors { get; set; }
    }
}

StoreManagerController.cs

using System;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using BookStore.Models;
using BookStore.ViewModels;

namespace BookStore.Controllers
{
    public class StoreManagerController : Controller
    {
        BookStoreEntities storeDB = new BookStoreEntities();

        //
        // GET: /StoreManager/Edit/5

        public ActionResult Edit(int id)
        {
            var viewModel = new StoreManagerViewModel
            {
                Book = storeDB.books.Single(a => a.book_id == id),
                Categories = storeDB.categories.ToList(),
                Authors = storeDB.authors.ToList(),
                SelectedAuthors = (from a in storeDB.books.Single(b => b.book_id == id).authors
                                    select a.author_id
                                  ).ToList()
            };

            //I have debug and have seen that the SelectedAuthors list has one author_id as 1

            return View(viewModel);
        }

    }
}

Book.ascx (partial view) for the 'edit' method of StoreManagerController

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<BookStore.Models.book>" %>

    <% using (Html.BeginForm()) {%>
        <%: Html.ValidationSummary(true) %>


            <div class="editor-label">
                <%: Html.LabelFor(model => model.authors) %>
            </div>
            <div class="editor-field">
                <%: Html.ListBox("author_id", new MultiSelectList(ViewData["authors"] as IEnumerable, "author_id", "first_name", ViewData["SelectedAuthors"] as IEnumerable))%>
            </div>

    <% } %>

HTML result for the Book.ascx partial view

<select id="Book_author_id" multiple="multiple" name="Book.author_id">
<option value="1">Bikkhu</option>
<option value="2">Buddha</option>
<option value="3">William</option>
<option value="4">Anthony</option>
</select>

Answer 1

You are using a multi-select list you need to bind to a model property that is a collection. In your case you are binding to "author_id" which can harbor only a single selected item id. Also you are using ViewData["authors"] and ViewData["SelectedAuthors"] in your partial but in your controller action it is not clear how are those properties populated.

Answer 2

It's solved, I didn't provide the "SelectedAuthors" at the "edit.aspx" view to the partial view of "Book.ascx"

<%: Html.EditorFor(model => model.Book, new { Authors = Model.Authors, Categories = Model.Categories, SelectedAuthors = Model.SelectedAuthors}) %>