¿Cascade desplegable en MVC View sin ajax? - asp.net-mvc, framework de entidades, menú desplegable, parámetros, cascada

Creé un modelo de vista con dos entidades. Estoy pasando este modelo de vista a mi vista MVC Razor que tiene dos menús desplegables html para cada entidad respectivamente.

<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>

La tabla de empleados es la matriz de la tabla de tareas. Lo que quiero es obtener todas las tareas relacionadas solo con un empleado en particular. p.ej. En el menú desplegable Empleado selecciono a John, luego en el menú desplegable Tareas debería obtener todas las tareas relacionadas con John. Sé cómo hacer esto con ajax. Estoy buscando alguna otra solución.

¿Es posible hacer algo como esto?

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

Respuestas

Bloque 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>

Guión 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>

Complete la lista desplegable de país y estado utilizando MVC para cada ciclo y use el script anterior. El caso obligatorio es que debe representar todas las opciones en cascada

<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>