ListBoxFor各オプション要素にデータ属性を追加

Question

私は現在私のビューでListBoxForを作成するために使用しているMultiSelectListを持っています。私のViewModelには、クライアント側の操作のためにHTMLに公開したいリストの各項目に追加のプロパティがあります。

このリストの上にチェックボックスがあります。ユーザーがこのチェックボックスをクリックすると、data-x="true"アイテムのみがこのリストに表示されます。ユーザーがチェックボックスをクリックしないと、すべての項目が表示されます（data-x="true"およびdata-x="false"）。このロジックは、チェックボックスが変更されるたびにクライアント側で実行されます。

これは、各オプション要素にdata- *属性を追加するのが最善の方法であると想定しています。どのように私はこれを行うに行くだろうか？私は、HTMLHelperメソッドは、ListBoxforの機能を拡張する必要があると思っていますが、私はどこから始めるべきかわからない、またはこれもこれについて行く最善の方法ですか？

Answer 1

がdata=*属性を持つ<option>要素を生成できるようにするために、あなたは属性の追加のプロパティを持つSelectListItemに基づいてクラスを所有して作成する必要があり、その後、あなたはSystem.Web.Mvc.SelectExtensionsクラスのコードに基づいてHtmlHelperの拡張メソッドを所有して生成されます。これを処理する

はるかに簡単な方法は、あなたが、ビューにSelectListを構築javascript配列に代入して、チェックボックス.click()イベントを処理し、オプションのリストを再構築するためのjavascript/jqueryのを使用するために使用するコレクションを渡すことであろう<select>要素にあります。あなたのケースでは、単にチェックボックスの値に基づいて項目を隠す/表示する場合があります。あなたが唯一の地元で作られた製品にその選択を制限するために、製品を選択して、チェックボックスを含めるようにビューを持っている場合

たとえば、あなたのモデルは

public class MyViewModel 
{ 
    public bool UseLocalProductOnly { get; set } 
    public int SelectedProduct{ get; set; } 
    public IEnumerable<SelectListItem> ProductList { get; set; } 
    public IEnumerable<int> LocalProducts { get; set; } 
} 
public class Product 
{ 
    public int ID { get; set; } 
    public string Name { get; set; } 
    public bool IsLocalProduct { get; set; } 
} 

とコントローラであるかもしれない

var products = db.Products; 
MyViewModel model = new MyViewModel() 
{ 
    ProductList = new SelectList(products, "ID", "Name"), 
    LocalProducts = products.Where(x => x.IsLocalProduct).Select(x => x.ID) 
} 
return View(model); 

とビューの

@Html.CheckBoxFor(m => m.UseLocalProductOnly) 
@Html.DropDownListFor(m => m.SelectedProduct, Model.ProductList) 

<script> 
    var localProducts = @Html.Raw(Json.Encode(Model.LocalProducts)) 
    var select = $('#SelectedProduct'); 
    var options = select.children('option'); 
    $('#UseLocalProductOnly').click(function() { 
     if ($(this).is(':checked')) { 
      // reset the selected option if it would otherwise be hidden 
      if ($.inArray(Number(select.val()), localProducts) === -1) { 
       select.val(localProducts[0]); 
      } 
      // hide options that are not local products 
      $.each(options, function() { 
       if ($.inArray(Number($(this).val()), localProducts) === -1) { 
        $(this).hide(); 
       } 
      }); 
     } else { 
      // show all options 
      productOptions.show(); 
     } 
    }); 
</script> 

代わりにあなたはを使用することができます（またはfalse）を使用すると、オプションを有効または無効にすることができます。