In a form for Address Book, I wanted to do the following. the guy types the zip, then fetches the zip, and returns the data to fill in the EditorFor. So good, it's working. City and States are in a separate table, and are displayed by DropDownList. I wanted that in the return of Json, the data besides being filled in the EditorFor, also be displayed in the DropdownList according to the zip code. Ex: DropDownList of states is displayed as Select and after typing a zip that for example matches SP the dropdown brings the listed state, instead of remaining the Select
DropDownList
<div class="form-group">
@Html.LabelFor(model => model.EstadoID, "Estado", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("EstadoID", null, htmlAttributes: new { @class = "form-control", id = "Estado", })
@Html.ValidationMessageFor(model => model.EstadoID, "", new { @class = "text-danger" })
</div>
</div
Ex of an EditorFor being populated with return information:
<div class="form-group">
@Html.LabelFor(model => model.Bairro, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Bairro, new { htmlAttributes = new { @class = "form-control", id = "bairro" } })
@Html.ValidationMessageFor(model => model.Bairro, "", new { @class = "text-danger" })
</div>
</div>
and here, my Json return object:
<script>
$(document).ready(function () {
$("#cep").blur(function () {
var cepValue = $(cep).val();
$.ajax({
type: 'POST',
url: 'RetornaEndereco',
data: { cep: cepValue },
dataType: 'json',
success: function (data) {
$('#bairro').val(data.bairro);
$('#endereco').val(data.end);
$('#cidade').val(data.cidade);
$('#estado').val(data.uf);
},
error: function (data) {
alert('Error' + data);
}
});
});
});
</script>
and finally the Controller:
public JsonResult RetornaEndereco(string cep)
{
var valor = Regex.Replace(cep, "[^0-9]", "");
var ws = new WSCorreios.AtendeClienteClient();
var resposta = ws.consultaCEP(valor);
try
{
System.Console.WriteLine();
System.Console.WriteLine("Endereço: {0}", resposta.end);
System.Console.WriteLine("Bairro: {0}", resposta.bairro);
System.Console.WriteLine("Cidade: {0}", resposta.cidade);
System.Console.WriteLine("Estado: {0}", resposta.uf);
}
catch (Exception ex)
{
return Json("Erro ao efetuar busca do CEP: {0}", ex.Message);
}
//Alterado Daqui pra baixo
Estado estado = (from u in db.Estados where u.Sigla == resposta.uf select u).SingleOrDefault();//Busca no banco pelo Estado
Cidade iDCidade = (from u in db.Cidades where u.Nome == resposta.cidade && u.EstadoID == estado.EstadoID select u).SingleOrDefault();//Busca no banco pela cidade que está no mesmo estado
Cidade levaCidade = new Cidade();
if (iDCidade == null)//Se a cidade não estiver cadastrada, insere uma nova cidade.
{
Cidade cidade = new Cidade();
cidade.Nome = resposta.cidade;
cidade.EstadoID = estado.EstadoID;
db.Cidades.Add(cidade);
db.SaveChanges();
levaCidade.CidadeID = cidade.CidadeID;//Pega o ID da cidade cadastrada
levaCidade.EstadoID = cidade.EstadoID;//pega o id do estado selecionado
}
else
{
Cidade cidade = new Cidade();
cidade.Nome = resposta.cidade;
cidade.EstadoID = estado.EstadoID;
levaCidade.CidadeID = iDCidade.CidadeID;//Pega o ID da cidade cadastrada
levaCidade.EstadoID = estado.EstadoID;//pega o id do estado selecionado
}
Endereco levarEndereco = new Endereco();//Cria o objeto para ser transportado pelo Json
levarEndereco.CidadeID = levaCidade.CidadeID;
levarEndereco.Numero = levaCidade.EstadoID;//Passando o id do estado na variavel numero para alterar no json
levarEndereco.Bairro = resposta.bairro;
levarEndereco.Descricao = resposta.end;
ViewBag.CidadeID = new SelectList(db.Cidades, "CidadeID", "Nome", levarEndereco.CidadeID);
return Json(levarEndereco);
//Alterado até aqui
}
Console Log as @Brunno said: