ASP.NETコアの動的非表示と表示オンチッチ

Question

私はASP.NETコアが新しく、フィールド値の変更に基づいて要素を表示/非表示する最も簡単な方法を理解しようとしています。私は、次のを持っている場合たとえば、：

<select id="SelectDiv"> 
    <option value="">-- choose --</option> 
    <option value="Div1">Show Div1</option> 
    <option value="Div2">Show Div2</option> 
</select> 
<div id="DivContainer"> 
    <div id="Div1" class="hidden">I'm Div1!</div> 
    <div id="Div2" class="hidden">I'm Div2!</div> 
</div> 

と、私は「ショー路Div1」を選択し、私はDivContainerを「リフレッシュ」とSelectDivドロップダウンで選択に基づいてスタイルクラスを更新したいです。

このロジックはサーバー側またはクライアント側で行われますか。モデルにアプローチする方法が変わると、データはモデルにバインドされます。私はアプリケーションを通してこれらのタイプの操作の多くを行う必要があり、私は物事を構成する最良の方法を理解しようとしています。

Answer 1

これは、jqueryを使用したユーザー操作に対する迅速な対応のためにクライアント側で行う必要があります。 jQueryのでそれを行うには

<script> 
 
    $("#SelectDiv").change(function(){ 
 
    $("#DivContainer div").addClass("hidden"); 
 
    var selectedDiv = $("#SelectDiv").val(); 
 
    
 
    $("#"+selectedDiv).removeClass("hidden"); 
 
    }); 
 
</script>

.hidden { 
 
    display:none; 
 
}

<select id="SelectDiv"> 
 
    <option value="">-- choose --</option> 
 
    <option value="Div1">Show Div1</option> 
 
    <option value="Div2">Show Div2</option> 
 
</select> 
 
<div id="DivContainer"> 
 
    <div id="Div1" class="hidden">I'm Div1!</div> 
 
    <div id="Div2" class="hidden">I'm Div2!</div> 
 
</div>