MVCビューでカスケードドロップダウンajaxなしで？

Question

2つのエンティティで1つのビューモデルを作成しました。このビューモデルをMVC Razorビューに渡しています。このビューには、それぞれエンティティごとに2つのHTMLドロップダウンがあります。

<select class="form-control" id="Employees" name="Employees"> 

    @foreach (var employee in Model.Employees) 
    { 
     <option value="@employee.Id"> @employee.name </option> 
    } 

</select> 

<select class="form-control" id="Tasks" name="Tasks"> 

    @foreach (var task in Model.Tasks) 
    { 
     <option value="@task.Id"> @task.name </option> 
    } 

</select> 

従業員表は、タスク表の親です。私が望むのは、特定の従業員だけに関連するすべてのタスクを取得することです。例えば従業員のドロップダウンで私はJohnを選択し、次にTasksドロップダウンでJohnに関連するすべてのタスクを取得する必要があります。私はajaxでこれを行う方法を知っています。私は他の解決策を探しています。

@foreach (var task in Model.Tasks.Where(x=>x.employeeId == 'Selected in previous dropdown')) 
{ 
    <option value="@task.Id"> @task.name </option> 
} 

Answer 1

Htmlのブロック

<select id="Employees"> 
<option value="">Select Employee</option> 
<option value="1">Employee1</option> 
<option value="2">Employee2</option> 
</select> 

<select id="Tasks"> 
<option value="">Select Task</option> 
<option value="1" data-employee="1">Employee1Task1</option> 
<option value="2" data-employee="1">Employee1Task2</option> 
<option value="3" data-employee="1">Employee1Task3</option> 
<option value="1" data-employee="2">Employee2Task1</option> 
<option value="2" data-employee="2">Employee2Task2</option> 
<option value="3" data-employee="2">Employee2Task3</option> 
</select> 

スクリプトscetion

<script> 
     $(document).ready(function() { 
      //on page ready hide all task option 
      $("#Tasks").find('option').hide(); 
      // set task as empty 
      $("#Tasks").val(''); 

      // onchange of employee Drop down 
      $("#Employees").on('change', function() { 
       var selectedEmployee = $("#Employees").val(); 
       if (selectedEmployee != '') { 
        $("#Tasks").find('option').hide(); 
$("#Tasks option[value='']").show(); 
        $('*[data-employee="' + selectedEmployee + '"]').show(); 
       } 
       else { 
        // if employee not selected then hide all tasks 
        $("#Tasks").find('option').hide(); 
        $("#Tasks").val(''); 
       } 

      }); 

     }); 
    </script> 

国を移入してくださいし、状態によってMVCの方法を使用してドロップダウンリスト：

が、それはこのような何かをすることは可能です上記のスクリプトを使用してください。必須のケースは、すべてのカスケードオプションをレンダリングすることです。

<select class="form-control" id="Employees" name="Employees"> 

    @foreach (var employee in Model.Employees) 
    { 
     <option value="@employee.Id"> @employee.name </option> 
    } 

</select> 

<select class="form-control" id="Tasks" name="Tasks"> 

    @foreach (var task in Model.Tasks) 
    { 
     <option value="@task.Id" data-employee="@task.EmployeeId"> @task.name </option> 
    } 

</select>