Preciso saber como faço para popular um DropDownList a partir de outro DropDownList. Exemplo: Tenho um DropDownList chamado Projeto que pega as informações do meu DB. Quando seleciono por exemplo "Projeto 1" preciso que no meu segundo DropDownList carregue todos os Sub Projetos pertencentes ao "Projeto 1". Todas essas informações estão no DB. Não estou conseguindo popular o segundo DropDown. Vi que dá pra fazer via JavaScript/Json, mas não faço ideia de como fazer. Preciso de ajuda.
Aqui eu populo o meu primeiro dropdown
public ActionResult CadastrarAtividades()
{
//Lista que recebe todos os PROJETOS ja cadastrados no banco
List<Projeto> projetos = new ProjetoNegocio().Get();
ViewBag.ListaProjeto = new SelectList(projetos.Where(x => x.ProjetoIdPai == null), "ProjetoId", "Nome");
ViewBag.ListaProjetos2 = projetos;
Aqui eu populo o meu segundo dropdown. Porém aqui eu preciso que os dados sejam de acordo com o que foi selecionado no primeiro dropdown.
//Lista que recebe todos os SUBPROJETOS ja cadastrados no banco
List<Projeto> subprojetos = new ProjetoNegocio().Get();
ViewBag.ListaSubProjeto = new SelectList(subprojetos.Where(x => x.ProjetoIdPai != null), "ProjetoId", "Nome");
View
<div class="panel-body">
<div class="col-lg-10">
@using (Html.BeginForm("CadastrarAtividades", "Apontamento", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
<br /><br />
<table class="table table-bordered table-hover">
<div class="form-group">
@Html.Label("Projeto")
<div>
@Html.DropDownListFor(model => model.ProjetoId, new SelectList(ViewBag.ListaProjeto, "Value", "Text"), "Selecione", new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.ProjetoId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.Label("Sub Projeto")
<div>
@Html.DropDownListFor(model => model.ProjetoId, new SelectList(ViewBag.ListaSubProjeto, "Value", "Text"), "Selecione", new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.ProjetoId, "", new { @class = "text-danger" })
</div>
</div>