2 Listboxes exchange items in MVC3

I have 2 list boxes which exchange items between them. I am doing this using javascript. Im adding the items of the first listbox from the view. If I want to bind it from the model, what should I do? I have these properties in my model

    public List<ICode> UnAssignedStates { get; set; }
    public List<ICode> AssignedStates { get; set; }

where ICode is as below

    public interface ICode
{
    int Id { get; set; }
    ICodeGroup CodeGroup { get; set; }
    string ShortDescription { get; set; }
    string LongDescription { get; set; }
}

My view is as below

<table style="width:90%;  text-align:center">
        <thead>
            <tr>
                <th>Unassigned State:</th>
                <th></th>
                <th>Assigned State:</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td valign="top">
                    <select id="box1View" multiple="multiple" style="height:100px;width:250px;">
                        <option value="501649">Item1</option>
                        <option value="501497">Item2</option>
                        <option value="501053">Item3</option>
                        <option value="500001">Item4</option>
                        <option value="501227">Item5</option>
                        <option value="501610">Item6</option>
                    </select><br/>
                     <span id="box1Counter" class="countLabel"></span>
                   <select id="box1Storage">
                    </select>
                </td>
                <td valign="top">
                <button style=" color:White; height:22px; width:50px; background-image: url('@Url.Content("~/Content/Images/BlueButton.gif")');" id="to2" type="button">&nbsp;>&nbsp;</button><br />
               开发者_如何学Go <button style=" color:White; height:22px; width:50px; background-image: url('@Url.Content("~/Content/Images/BlueButton.gif")');" id="allTo2" type="button">&nbsp;>>&nbsp;</button><br />

                <button style=" color:White; height:22px; width:50px; background-image: url('@Url.Content("~/Content/Images/BlueButton.gif")');" id="allTo1" type="button">&nbsp;<<&nbsp;</button><br />
                <button style=" color:White; height:22px; width:50px; background-image: url('@Url.Content("~/Content/Images/BlueButton.gif")');" id="to1" type="button">&nbsp;<&nbsp;</button>
                </td>
                <td valign="top">
                <select id="box2View" multiple="multiple" style="height:100px;width:250px;">

                </select><br/>
                <span id="box2Counter" class="countLabel"></span>
                <select id="box2Storage">
                </select>
                </td>
            </tr>
        </tbody>
      </table>

Assuming you are using Razor for your view engine replace the following

<select id="box1View" multiple="multiple" style="height:100px;width:250px;">
                        <option value="501649">Item1</option>
                        <option value="501497">Item2</option>
                        <option value="501053">Item3</option>
                        <option value="500001">Item4</option>
                        <option value="501227">Item5</option>
                        <option value="501610">Item6</option>
</select>

with:

@Html.ListBox("box1View", new SelectList(Model.UnAssignedStates, "Id", "ShortDescription"), new {style = "height:100px;width:250px;"})

and replace

<select id="box2View" multiple="multiple" style="height:100px;width:250px;"></select>

with:

@Html.ListBox("box2View", new SelectList(Model.AssignedStates, "Id", "ShortDescription"), new {style = "height:100px;width:250px;"})