jQuery MVC: Move Listbox Items From One Listbox to Another With jQuery And Detect At Controller End

This article will show you how you can mode item from one listbox to another listbox using jquery without page refresh in mvc6 and on postback how to detect all the selected item of listbox at controller end.

Now for this article first we will create a new asp.net mvc application and add a new model class file in model folder.

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcApplication1.Models {     public class CountryModel     {         public List<Country> CountyUnSelectedList { get; set; }         public List<Country> CountySelectedList { get; set; }         public int[] SelectedCountryID { get; set; }     }     public class Country     {         public int CountryId { get; set; }         public string CountryName { get; set; }     } }

In above mode class file I have created o list of country one for selected and other for unselected, and taken a variable of int type array for all the selected listbox items.

Now lets check the controller end code.

[HttpGet]         public ActionResult Index()         {             CountryModel _countrymodel = new CountryModel();             _countrymodel.CountyUnSelectedList = new List<Country>();             _countrymodel.CountySelectedList = new List<Country>();             _countrymodel.CountyUnSelectedList = GetCountryData();             return View(_countrymodel);         }         public List<Country> GetCountryData()         {             List<Country> _country = new List<Country>();             _country.Add(new Country { CountryId = 1, CountryName = "India" });             _country.Add(new Country { CountryId = 2, CountryName = "Pakistan" });             _country.Add(new Country { CountryId = 3, CountryName = "Nepal" });             _country.Add(new Country { CountryId = 4, CountryName = "United States" });             return _country;         }     } }

In above code I have create a list of all the country list for data and after that in httpget action method I have assign it to the unselected list.

Now lets create the view and add the below code.

@model MvcApplication1.Models.CountryModel @{     ViewBag.Title = "Home Page"; } <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script>     function MoveListBoxItem(fromId, toId) {         $("#" + fromId + " option:selected").remove().appendTo("#" + toId);     } </script> @using (Html.BeginForm("Index", "Home")) {     <table width="100%" border="0">         <tr>             <td style="width:48%">Un-Selected</td>             <td rowspan="2" style="width:4%">                 <input type="button" value=">>" onclick="javascript: MoveListBoxItem('UnSelectedItem', 'SelectedCountryID')" /><br />                 <input type="button" value="<<" onclick="javascript: MoveListBoxItem('SelectedCountryID', 'UnSelectedItem')" />             </td>             <td>Selected</td>         </tr>         <tr>             <td>                 @Html.ListBox("UnSelectedItem", new SelectList(Model.CountyUnSelectedList, "CountryId", "CountryName"), new { @style = "width:100%" })             </td>             <td>@Html.ListBoxFor(m => m.SelectedCountryID, new SelectList(Model.CountySelectedList, "CountryId", "CountryName"), new { @style = "width:100%" })</td>         </tr>         <tr>             <td colspan="2">                 <input type="submit" value="Submit" />             </td>         </tr>         <tr>             <td colspan="2">                 Selected Country: @ViewBag.SelectedCountryId             </td>         </tr>     </table> }

In above code I have bind the listbox control and then written a javascript function to move the item from one list to another list.

Now lets check the post method.

[HttpPost]         public ActionResult Index(CountryModel _countrymodel)         {             //Process your request for each country and again pass the list             _countrymodel.CountyUnSelectedList = GetCountryData().Where(m => !_countrymodel.SelectedCountryID.Contains(m.CountryId)).ToList();             _countrymodel.CountySelectedList = GetCountryData().Where(m => _countrymodel.SelectedCountryID.Contains(m.CountryId)).ToList();             string selectedCountryId = "";             foreach (int item in _countrymodel.SelectedCountryID)             {                 selectedCountryId = selectedCountryId + item + ",";             }             ViewBag.SelectedCountryId = selectedCountryId;             return View(_countrymodel);         }

In above code we will get the selected item in the array  list. So have make a string and assign it to viewbag to display it.

Now we have done run the application to check the output.