如何通过单击复选框将对象添加到列表框？

Question

我有一个带有复选框列表和列表框的表单。

我需要当您选中或取消选中复选框时，它会通过添加或删除列表中的对象来修改列表框中的列表。看起来是这样的：

这是表单中该部分的代码：

<div class="row-fluid">
                                <div class="span3">
                                     <label>Fonction(s):</label>
                                </div>
                                <div class="span9">                                        
                                    @Html.ListBoxFor(contact => contact.SelectedFonctionIds, Model.ListeFonctionsSelectList, new { disabled = "disabled" })                                
                                </div>
                            </div>


                            <div class="row-fluid">
                                <div class="span5 offset3">
                                    <div class="fonctions_container">
                                            @foreach (extranetClient.Models.Classes.FonctionContact fonction in ViewBag.Fonctions)
                                            {
                                                string coche = "";
                                                if ((@Model.ListeFonctions).Any(c => c.IdFonction == fonction.IdFonction))
                                                {
                                                    coche = "checked";
                                                }

                                                <input type="checkbox" @coche id="@fonction.LibelleFonction" onclick="javascript:AjouterFonction();" value="@fonction.IdFonction" />@fonction.LibelleFonction <br />
                                            }
                                    </div> 
                                </div>
                            </div>

有人知道怎么做吗？

我在考虑 Ajax，但问题是它是一个强类型视图，所有数据都与一个模型相关联。

Answer 1

不确定这是否是一个好的解决方案，但如果您将列表框放入部分视图（也为强类型），然后您的 AjouterFonction() JavaScript 将对 Action 进行 Ajax 调用，该操作返回包含更新的 PartialView该列表框的版本？然后使用 jQuery 将之前的列表框替换为新的列表框。

控制器动作：

public PartialViewResult ActionName(<whatever you need here>)
{
    // Whatever logic you may need: which item was clicked, what should be added to the model object, etc....
    return PartialView("ListBoxPartial", yourModelObject);
}

局部视图 ListBoxPartial：

@model YourModel
@Html.ListBoxFor(contact => contact.SelectedFonctionIds, Model.ListeFonctionsSelectList, new {disabled = "disabled" })

在您的视图中，而不是

<div class="span9">                                        
    @Html.ListBoxFor(contact => contact.SelectedFonctionIds, Model.ListeFonctionsSelectList, new { disabled = "disabled" })                                
</div>

你会：

<div class="span9">                                        
   @Html.Partial("ListBoxPartial", Model)                        
</div>

你的 AjouterFonction()，在接收到新的列表框后，AjouterFonction() 会搜索类为“span9”的 div 并将其内容替换为接收到的数据。

可能有更好的方法来解决这个问题，但这是我想到的第一件事。