Question

我有2个列表框，用于在它们之间交换项目。我是用javascript做的。我从视图中添加第一个列表框的项目。如果我想从模型中绑定它，我该怎么办？我的模型中有这些属性

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

其中ICode如下

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

我的观点如下

<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 />
                <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>

Answer 1

假设您正在使用Razor作为视图引擎，请替换以下

<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>

使用：

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

并替换

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

使用：

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

2列表框在MVC3中交换项目

1 个答案: