How can I pass an array from JavaScript to my action method

Question

I have the following View inside my ASP.Net mvc 3 web application:-

@model IEnumerable<MvcApplication4.Models.Account>

@{
    ViewBag.Title = "customer";
}

<h3>Customers Info</h3>


    <script  type="text/javascript">

        $(function() {

            $("#MoveRight,#MoveLeft").click(function(event) {

                var id = $(event.target).attr("id");

                var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";

                var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";



                var selectedItems = $(selectFrom + " :selected").toArray();

                $(moveTo).append(selectedItems);

                selectedItems.remove;

            });

        });

    </script>  

      <select id="SelectLeft" multiple="multiple">
 @foreach (var item2 in Model.OrderBy(a=>a.ORG_NAME)) {
            <option value = "@item2.ORG_ID" >@item2.ORG_NAME</option>




}
      </select>      

    <input id="MoveRight" type="button" value=" Add >> " />

  <input id="MoveLeft" type="button" value=" << Remove " /> 

      <select id="SelectRight" multiple="multiple">           

      </select>
 @Html.ActionLink("Next Page", "CustomersDetials", "Home", new {  }, null)//for testing only

But I am facing a problem in that I need to pass all the records which are inside the moveTo to the customersDetials action method by clicking on the "Next Page" action link. so can anyone suggest an approach which I can use to pass the items which are inside the moveto from my above view to my action method using the html.actionlink.

:::UPDATE:::

I have added the following to the view:-

@using (Html.BeginForm("CustomersDetials", "Home"))
{

      <select id="SelectLeft" multiple="multiple">
 @foreach (var item2 in Model.OrderBy(a=>a.ORG_NAME)) {
            <option value = "@item2.ORG_ID" >@item2.ORG_NAME</option>


}
      </select>      

    <input id="MoveRight" type="button" value=" Add >> " />

  <input id="MoveLeft" type="button" value=" << Remove " /> 



      <select id="SelectRight" name="SelectRight" multiple="multiple">           

      </select>
    <p>
<button type="submit">Next Page</button></p>

}

And then i have created the folloiwng ViewModel class to hole the values of the selected customers:-

public class SelectedCustomers
{
    public IEnumerable<Account> Info { get; set; }
}

then i added the folloiwng action method:-

   public ActionResult CustomersDetials(string[] SelectRight)
        {
             foreach (var item in SelectRight) {

                // how to assign the values of the array to my viewmodel object       
        }

But i can not determine how i can assign the values of the array to the viewmodel object inside my action method.

:::UPDATE2:::

Here what i have ended up with. the action method looks like this:-

    public ActionResult CustomersDetails(string[] SelectRight)
        {
            var selectedCustomers = new SelectedCustomers
            {
                Info = SelectRight.Select(GetAccount)
            };


        return View(selectedCustomers);

    }
    private Account GetAccount(string id)
    {


        return entities.Account.Find(id);
    }
}

And the folloiwng view:-

@model MvcApplication4.Models.SelectedCustomers

@{
    ViewBag.Title = "CustomerDetials";
}

<h2>CustomerDetials</h2>
//code goes here

@foreach (var item in Model.Info) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.ORG_ID)
        </td>

but when i run the application i got the folloiwng error :-

The type of one of the primary key values did not match the type defined in the entity. See inner exception for details.

On the:-

return entities.Account.Find(id);

::Solved:: i changed the string to be long in both the action method and GETAccount function.

Answer 1

You could make the Next link a submit button of the form. Then when the form is submitted it will automatically send the selected items of the select lists to the server. It's the solution I would recommend you. Just put the select lists into a form and also don't forget to give your select lists names because that's what you will use in your controller action to retrieve the selected values:

@using (Html.BeginForm("CustomersDetials", "Home"))
{
    <select id="SelectLeft" name="SelectLeft" multiple="multiple">
        @foreach (var item2 in Model.OrderBy(a => a.ORG_NAME)) 
        {
            <option value="@item2.ORG_ID">@item2.ORG_NAME</option>
        }
    </select>

    <select id="SelectRight" name="SelectRight" multiple="multiple">           
    </select>

    <button type="submit">Next Page</button>
}

And by the way instead of doing those horrible foreach loops in your view to generate those multiple selectboxes you could use the built-in Html.ListBoxFor helper.

Now your controller action could look like this:

[HttpPost]
public ActionResult CustomersDetials(string[] selectRight)
{
    ... the selectRight parameter will contain the selected values in the 
        corresponding select list
}

---

Another possibility to handle this case is to use AJAX:

@Html.ActionLink("Next Page", "CustomersDetials", "Home", null, new { id = "next" })

and then:

$('#next').click(function() {
    $.ajax({
        url: this.href,
        type: 'POST',
        contentType: 'application/json;charset=utf-8',
        data: JSON.stringify(selectedItems),
        success: function(data) {

        }
    });
    return false;
});

Of course you need to make selectedItems a global variable, because right now you have declared it inside the click handler of the MoveRight, MoveLeft buttons. Otherwise this variable won't be accessible within the click event of the next link.

---

UPDATE 1:

Based on your update you could populate your view model like this:

public ActionResult CustomersDetials(string[] selectRight)
{
    var selectedCustomers = new SelectedCustomers
    {
        Info = selectRight.Select(GetAccount)
    };
    ... use your view model here
}

private Account GetAccount(string id)
{
    // TODO: given the selected ID go and fetch the corresponding
    // Account instance and return it here:

    return new Account
    {
        Id = id
    };
}