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

Try this https://www.codeproject.com/script/Membership/LogOn.aspx?rp=http%3a%2f%2fwww.codeproject.com%2fArticles%2f136730%2fASP-NET-MVC-Basics-Working-with-ListBoxes&download=true — NoWar, Jul 11 '14 at 13:25

Fenton · Answer 1 · 2014-09-12T09:37:23.383

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

edited Sep 12 '14 at 09:37

answered Aug 19 '11 at 14:30

Fenton

241,084
71
387
401

Yes okay, so when I have the studentsSelected, what should I do next? Append them to the second listbox? – Lorenzo Aug 19 '11 at 15:58
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. – Fenton Aug 23 '11 at 17:54
You can still grab the code from here (just view-source) - but I don't support any jQuery Plugins any more. http://www.stevefenton.co.uk/cmsfiles/assets/File/twosidedmultiselect.html – Fenton Sep 12 '14 at 09:35

score 0 · Answer 2 · answered Mar 05 '20 at 14:47

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>

score 0 · Answer 3 · edited May 23 '17 at 12:11

0

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

edited May 23 '17 at 12:11

Community

1
1

answered Aug 19 '11 at 14:22

Yogurt The Wise

4,379
4
34
42

Okay, so if I would write all the options to a hidden field? how can I do that? – Lorenzo Aug 19 '11 at 15:54

ASP.NET mvc: Moving items between two listboxes

3 Answers3

Linked