Как добавить объект в список, нажав на флажок?

Question

У меня есть форма со списком флажков и списком.

Мне нужно, чтобы при установке или снятии флажка он изменял список в спискеBox путем добавления или удаления объекта в списке. Вот как это выглядит:

Вот код для той части формы:

<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

Не уверен, что это хорошее решение, но что, если вы поместите свой список в частичный вид (строго типизированный), а затем ваш JavaScript-проект AjouterFonction() сделает вызов Ajax для Action, который возвращает 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() ищет div с классом «span9» и заменяет его содержимое принятыми данными.

Возможно, это лучший способ решить это, но это было первое, что появилось у меня в голове.