Listelenebilir tıklanabilir (açma/kapama durumu) html öğeleri nasıl oluşturulur <SelectItem>

Question

İki durumlu büyük tıklanabilir html öğeleri oluşturmam gerekir: puched/unpushed. Bu büyük kütlede sadece bir eleman itme durumunda olabilir. RadioButtonList'e benzer. Ayrıca seçilen (itilmiş) öğe değerini ViewModel'deki SelectedValueId öğesine bağlamalıyım. Bu konuyla ilgili herhangi bir yardım takdir edilir! Teşekkürler!

<div class="content-right"> 
       @foreach (var item in Model.AvailablePrivacyStatuses) 
       { 
        <a onclick="doTheJob(@item.Value)" href="#">@item.Text</a> 
       } 
      </div> 

Ama nasıl doTheJob gelen değeri elde etmek (item.Value @) içine:

Bugüne dek var olan tek şey böyle kitlesel heperlinks: İşte bunun tasarımdır ViewModel?

Answer 1

<div class="content-right"> 
@Html.HiddenFor(m => m.SelectedPrivacyStatusId)      
@foreach (var item in Model.AvailablePrivacyStatuses) 
        { 
         <a data-id="@item.Value" class="selectable-button" id="status-link-@item.Value" href="#">@item.Text</a> 
        } 
       </div> 
       <script> 
        jQuery('div.content-right a') 
         .click(function() { 
          $(this).addClass('active'); 
          $('div.content-right a').not(this).removeClass('active'); 
          var id = this.getAttribute('data-id'); 
          document.getElementById('SelectedPrivacyStatusId').value = id; 
         }); 


       </script>