Preciso saber como faço para popular um DropDownList a partir de outro DropDownList. Exemplo: Tenho um DropDownList chamado Equipe que pega as informações do meu DB. Quando seleciono por exemplo "Equipe1" preciso que no meu segundo DropDownList carregue todos os integrantes daquela equipe. Todas essas informações estão no DB. Tenho 3 tabelas Equipe, Integrante e EquipedeIntegrantes.
Buscar Integrante
[HttpGet]
public ActionResult ListarIntegrantes(int id)
{
GerenciadorContexto ctx = new GerenciadorContexto();
var lista = new List<EquipedeIntegrante>();
try
{
lista = ctx.EquipedeIntegrantes.Where(m => m.EquipeId == id).ToList();
}
catch (Exception ex)
{
throw;
}
return Json(new { Resultado = lista }, JsonRequestBehavior.AllowGet);
}
View
@using (Html.BeginForm())
{
<div class="form-horizontal">
<h4>TarefaViewModel</h4>
<hr />
<div class="form-group">
@Html.LabelFor(model => model.EquipeId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.EquipeId, Model.Equipes, "--Selecione", new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.IntegranteId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<select id="IntegranteId" class="form-control"></select>
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Descricao, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Descricao, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Conclusao, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Conclusao, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
Script
$(document).ready(function () {
$("#EquipeId").change(function () {
var value = $("#EquipeId option:selected").val();
if (value !== 0 || value !== undefined)
{
ListarIntegrantes(value);
}
})
})
function ListarIntegrantes(value)
{
var url = "/Tarefas/ListarIntegrantes";
var data = { equipe: value };
$("#EquipeId").empty();
$.ajax({
url: url,
type: "GET",
datatype: "json",
data: data
}).done(function (data) {
if (data.Resultado.length > 0) {
var dadosGrid = data.Resultado;
$("#EquipeId").append('<option value="">--Selecione</option>');
$.each(dadosGrid, function (indice, item) {
var opt = "";
opt = '<option value="' + item["Id"] + '">' + item["Nome"] + '</option>';
})
}
})
}
Tabelas