Question

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

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

enter image description here

以下是表单部分的代码：

<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会对一个返回包含更新的PartialView的Action进行Ajax调用该列表框的版本？然后使用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，并用接收的数据替换它的内容。

可能有一种更好的方法可以解决这个问题，但这是我脑海中浮现的第一件事。

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

1 个答案: