connectseekers.com

Tuesday, 8 November 2016

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

11/08/2016 - By Pranav Singh 0

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.




About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top