ASP.NET mvc: Moving items between two listboxes

Question

Currently I have 2 listboxes binding data from a database on my view... I've used a custom Viewmodel and it is not strongly-typed. Here's the code:

 <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"  Inherits="System.Web.Mvc.ViewPage<ProjectenII.Models.Domain.StudentModel>"%>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    IndexStudents
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>IndexStudents</h2>

  <div class="editor-field">
    <%: Html.ListBox("IndexStudentsNormal", Model.NormalStudentsList)%>
  </div>

  <input type="submit" name="add" 
                          id="add" value=">>" />
  <br />
  <input type="submit" name="remove" 
                          id="remove" value="<<" />

  <div class="editor-field">
    <%: Html.ListBox("IndexStudentsNoClass", Model.StudentsNoClassList)%>
  </div>

  <input type="submit" name="apply" id="apply" value="Save!" />
</asp:Content>

Well, now I want to move items between those two listboxes using two buttons (>>) and (<<) And when the user clicks the apply button, the changes must be recorded in the database.

StudentModel:

namespace ProjectenII.Models.Domain
{
    public class StudentModel
    {
        public IEnumerable<SelectListItem> NormalStudentsList { get; set; }
        public IEnumerable<SelectListItem> StudentsNoClassList { get; set; }
    }
}

Controller:

public ActionResult IndexStudents(Docent docent, int id, int klasgroepid)
        {
            var studentModel = new StudentModel
            {
               NormalStudentsList = docent.GeefStudentenNormaalList(id, klasgroepid),
               StudentsNoClassList = docent.GeefStudentenNoClassList(id, klasgroepid)
            };

            return View(studentModel);
        }

So how can I get the selected value of one listbox and save it to the other one? And afterwards, the changes must be written down in the database. So UPDATE the database. Can I make use of modelstate to update the values in the database?

I'm not very good at asp.net mvc, so I hope you understood me...

Thanks in advance!!

Answer 1

There was an article about using the jQuery Two Sided Multi Select List (which does the two-box moving items between boxes stuff). It no longer exists, but the essence of it is below (based on my two sided multi-select plugin example, which is not a piece of supported software)...

It describes the Model, including obtaining the selected values, the Controller and the View in simple terms.

You would need a property on the model that could accept the selected values, which would be sent back as a string, rather than as a SelectListItem (i.e. the value from the options that are selected: <option value="student1" selected>Mr Student One</option>

public class StudentModel
{
    public IEnumerable<SelectListItem> NormalStudentsList { get; set; }
    public IEnumerable<SelectListItem> StudentsNoClassList { get; set; }
    public IEnumerable<string> StudentsSelected { get; set; }
}

And then make the ListBox apply to this property

<%= Html.ListBox("StudentsSelected", ...

Answer 2

Saving it in MVC, the post back does not send all the options, only the selected. 1. You could use ajax/json to report back that amove was made. Send the option and to what list it was moved to, and then you can update the database on each move. 2. You could write all the options(on submit) to a hidden field string(comma delim), then have the Post function handle saving the 2 lists.

Heres some help with the jquery part. Moving items in Dual Listboxes