Dropdown com cidade e estado, asp.net mvc 5

Question

Olá galera, é o seguinte, estou utilizando o visual studio 2013 pra desenvolver em asp.net, estou começando agora, contudo, preciso desenvolver um cadastro e nele é preciso selecionar a cidade e o estado, já faz dias que ando pesquisando, pesquisando e não encontrei uma forma que resolva meu problema, estou utilizando o entity framework com mysql. Só que eu não quero que apareça um select, e sim, checkedbox, pois será necessário selecionar uma ou mais cidades (já resolvi isso, o problema é que ao selecionar o estado, nao aparece as cidades do respectivo estado). Segue os códigos da view, model e controller.

VIEW:

<div class="row">
    <div class="col-md-4">
        
    </div>
    <div class="col-md-4">
        @using (Html.BeginForm())
        {
            <div class="form-group">
                @Html.DropDownList("Estado", ViewBag.Estados as SelectList, new { @class = "form-control" })
            </div>
            <div id="cidades" class="form-group">
            </div>
        }

    </div>
    <div class="col-md-4"></div>
</div>

@section Scripts{
    <script>
        $(function () {
            
            $("#Estado").change(function () {
                var idEstado = $(this).val();
                $.getJSON("/Home/GetCidades?estado=" + idEstado, function (data) {
                    $("#cidades").empty();
                    console.log(data);
                    for (var i = 0; i < data.length; i++) {
                        console.log("estou dentro");
                        $("<input type='checkbox' name='cidades' value='" + data[i].Id + "'>" + data[i].NomeCidade + "<br>")
                            .appendTo("#cidades");
                    }
                });
            });
        });
    </script>
}

CONTROLLER

public class HomeController : Controller
    {
        public TestandoEntitiess db = new TestandoEntitiess();
        public ActionResult Index()
        {
            ViewBag.Estados = new SelectList(db.estadoes.Select(a => new { a.IdEstado, a.NomeEstado }).AsEnumerable(), "IdEstado", "NomeEstado");
            return View();
        }

        public JsonResult GetCidades(int estado)
        {
            return Json(db.cidades.Where(c=> c.Estado == estado), JsonRequestBehavior.AllowGet);
        }

	}

MODEL

public partial class cidade
    {
        public int IdCidade { get; set; }
        public string NomeCidade { get; set; }
        public int Estado { get; set; }
    
        public virtual estado estado1 { get; set; }
    }


public partial class estado
    {
        public estado()
        {
            this.cidades = new HashSet<cidade>();
        }
    
        public int IdEstado { get; set; }
        public string NomeEstado { get; set; }
    
        public virtual ICollection<cidade> cidades { get; set; }
    }

Quando inspeciono o elemento no chrome, apos selecionar o estado, aparece o seguinte erro (selecionando um estado x):

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

http://localhost:65096/Home/GetCidades?estado=2

Answer 1

Boa noite Leomar , 

Você pode tentar alterar o sua action GetCidades() para retornar somente os campos que você vai utilizar da classe cidade, ex:

public JsonResult GetCidades(int estado)
{
    return Json(db.cidades.Select(c => new { Id = c.IdCidade, NomeCidade = c.NomeCidade }), JsonRequestBehavior.AllowGet);
}

---

Se a resposta for útil por favor não esqueça de marca.

Abraços
Daniel Fonseca Castro

Answer 2

Valeu man, deu certo!