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!!

Caseose

Try this codeproject.com/script/Membership/… – Ampere

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", ...

Silverstein

Yes okay, so when I have the studentsSelected, what should I do next? Append them to the second listbox? – Caseose

That's what the jQuery plugin does - when the page loads it takes all the selected items in the first box and moves them into the second box. Everything in the second box gets submitted as being the selected options. – Silverstein

You can still grab the code from here (just view-source) - but I don't support any jQuery Plugins any more. stevefenton.co.uk/cmsfiles/assets/File/twosidedmultiselect.html – Silverstein

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

Dorthea

Okay, so if I would write all the options to a hidden field? how can I do that? – Caseose

Answer 3

Came this question and finally this is what I did to achieve the results..

<script>
    function SwitchListBoxItems(sourceListItem, targetListItem) 
    {
        var src = document.getElementById(sourceListItem);
        var dest = document.getElementById(targetListItem);
        if (dest != null && src != null) 
        {
            while ( src.options.selectedIndex >= 0 ) 
            {
                var lstItemNew = new Option(); // Create a new instance of ListItem
                lstItemNew.text = src.options[src.options.selectedIndex].text;
                lstItemNew.value = src.options[src.options.selectedIndex].value;
                dest.options[dest.length] = lstItemNew;
                src.remove(src.options.selectedIndex); 
            }
        }
    }
</script>

HTML Code:

<div class="ml-auto mt-1 mr-3">
        @Html.ListBoxFor(m => Model.SelectedItems, Model.AllItems, new { @id = "lstIncludedItems"})
        <input onclick="Javascript:MoveItem('lstIncludedItems', 'lstExcludedItems');" type="button" value="->" />
        <input onclick="Javascript:MoveItem('lstExcludedItems', 'lstIncludedItems');" type="button" value="<-" />
        @Html.ListBoxFor(m => Model.SelectedItems, Model.AllItems, new { @id = "lstExcludedItems"})
</div>

Vilberg