Move data from one listbox to another on button click in asp.net mvc

Question

i am new in ASP.net MVC. I have two listbox one listbox contain data from db and wanted to move data into another listbox and save into database.. i have done the following code to display the two listbox.. InstituteInformation.cs

public class InstituteInformation
    {
         public int Id { get; set; }
        public string InstituteName { get; set; }
    }

Fetch the name of institute name into listbox1

MemberAccessRights.cs

 public class MemberAccessRights
 {
    public int Id { get; set; }

    public List<InstituteInformation> AvailableNames { get; set; }
    public int[] AvailableSelected { get; set; }

    public List<InstituteInformation> RequestedNames { get; set; }
    public string[] RequestedSelected { get; set; }

    public string SavedRequested { get; set; }
}

Wrapper.cs

 public class Wrapper
{
    public InstituteInformation II { get; set; }
}

Wrapper1.cs

public class Wrapper1
{
    public MemberAccessRights MAR { get; set; }
}

WrapperDB.cs

public class WrapperDB : DbContext
{
  public DbSet<InstituteInformation> IIDBS { get; set; }
  public DbSet<MemberAccessRights> MARDBS { get; set; }
}

In controller

    [NonAction]
    public List<InstituteInformation> getAllInstituteNameList()
    {
        var name=(from i in db.IIDBS select i).ToList();
        return name;
    }


    //
    // GET: /MemberDetails/Create

    public ActionResult Create()
    {
        Wrapper1 MD = new Wrapper1();
        MD.MAR = new MemberAccessRights { AvailableNames = getAllInstituteNameList(), RequestedNames = new List<InstituteInformation>() };
        return View(MD);
    }

View

     List of Financial Institute

     <%:Html.ListBoxFor(model=>model.MAR.AvailableSelected,new MultiSelectList(Model.MAR.AvailableNames,"Id","InstituteName",Model.MAR.AvailableSelected)) %>

     <div>

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

     </div>


    <%:Html.ListBoxFor(m=>m.MAR.RequestedSelected,new MultiSelectList(Model.MAR.RequestedNames,"Id","Name",Model.MAR.RequestedSelected)) %>

now i wanted to move data from listbox1 to listbox2 and i dont have any idea how to do this can anyone sugesst me about this ...

Answer 1

<script  type="text/javascript">
$(document).ready(function () {

    $("#ShiftRight,#ShiftLeft").click(function (event) {
        var ID = $(event.target).attr("ID");
        var ChooseFrom = ID == "ShiftRight" ? "#ChooseLeft" : "#ChooseRight";
        var moveTo = ID == "ShiftRight" ? "#ChooseRight" : "#ChooseLeft";
        var SelectData = $(ChooseFrom + " :selected").toArray();
        $(moveTo).append(SelectData);
        SelectData.remove;

        var list = new Array();
        list = $(moveTo).val();

        $.ajax({
            type: 'POST',
            url: '@(Url.Action("ActionResultName", "Controller"))',                
            data: { List: list' },
                dataType: "json",
                traditional: true,
                success: function (data, textStatus, XMLHttpRequest) {

                }
         });                                  
    });
});