how to move data from one listbox to another listbox in MVC4

See more:

ASP.NET

(prob is that- when i click to submit button mine output is going to some other page but i want on the same page ,i need a jscript functn in view so that it holds the data of 2nd listbox nd return it be4 the load of page(with popup would help me more..))

My Code is as follows:-




//Model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;



namespace Listbox2.Models
{
    public class namesviewmodel
    {
        public IEnumerable<SelectListItem> Names { get; set; }
        public IEnumerable<string> SelectedNames { get; set; }
    }
}

//HomeController
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Listbox2.Models;
using System.Text;

namespace Listbox2.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        [HttpGet]
        public ActionResult Index()
        {
            odaEntities1 db = new odaEntities1();
                    
            List<SelectListItem> listSelectListItem = new List<SelectListItem>();
            foreach (Names name in db.Names)
            {
                SelectListItem selectListItem = new SelectListItem()
                {
                    Text = name.Fname,
                    //Value = name.noid.ToString(),

                };
                listSelectListItem.Add(selectListItem);
            }
            namesviewmodel Namesviewmodel = new namesviewmodel();
            Namesviewmodel.Names = listSelectListItem;
            return View(Namesviewmodel);
        }


        [HttpPost]
        public string Index(IEnumerable<string>Names)
             //public string Index(IEnumerable<string> SelectedNames, IEnumerable<string> Names)
        {
            if (Names == null)
            {
               return "you did not selected any name";
                         
            }
            else
            {
                StringBuilder sb = new StringBuilder();
                sb.Append("You Selected - " + string.Join(",", Names));
                return sb.ToString();
                //return"You Selected - "+ string.Join(",",Names);
               

              }
            
        }
    }
}

and view is:-

@model Listbox2.Models.namesviewmodel
@{
    ViewBag.Title = "Index";


<script language="javascript" type="text/javascript">

    function MoveItem() 
    {
       
            $("#SelectedNames option:selected").appendTo("#Names");

    }
    function MoveBackItem() {
        $("#Names option:selected").appendTo("#SelectedNames");

    }
   

</script>
}

Names

<div style="font-family:Arial">

@using (@Html.BeginForm())
{
     @Html.ListBoxFor(x => x.SelectedNames, Model.Names)
<input id="btnAdd" type="button" value=" >> " onclick="MoveItem();" />
<input id="btnBack" type="button" value=" << " onclick="MoveBackItem();" />
    // @Html.ListBoxFor(m => m.SelectedNames, new MultiSelectList(Model.Names))

@Html.ListBoxFor(model => model.Names, new MultiSelectList(""))
<br />
<input id="SelectedNames" type="submit"value="Submit"/>
    
}
</div></string></string></string>