Em
um projeto que estou mexendo tem um combo de Estado que recarrega um combo de Cidade.
Para fazer isso, um $.get é feito para uma Action, ela retorna um Json e
esse Json é transformado em HTML no javascript.
Action:
public ActionResult PegarPorEstado(Int32 id)
{
var cidades = cidadeService.PegarCidadePorEstado(id).ToList();
var nomeCidade = new String[cidades.Count];
var idCidade = new Int32[cidades.Count];
var aux = 0;
foreach (var item in cidades)
{
nomeCidade[aux] = item.Nome;
idCidade[aux] = item.ID;
aux = aux + 1;
}
return Json(new { nomeCidade, idCidade }, JsonRequestBehavior.AllowGet);
}
Action:
public ActionResult PegarPorEstado(Int32 id)
{
var cidades = cidadeService.PegarCidadePorEstado(id).ToList();
var nomeCidade = new String[cidades.Count];
var idCidade = new Int32[cidades.Count];
var aux = 0;
foreach (var item in cidades)
{
nomeCidade[aux] = item.Nome;
idCidade[aux] = item.ID;
aux = aux + 1;
}
return Json(new { nomeCidade, idCidade }, JsonRequestBehavior.AllowGet);
}
Javascript:
$.getJSON(urlCidadesPorEstado, { id: uf },
function (data) {
var optionsValues = '';
for (var i = 0; i < data.nomeCidade.length; i++) {
optionsValues += '<option value="' + data.idCidade[i] + '">' + data.nomeCidade[i] + '</option>';
}
$('.select-cidades option:not(:first-child)').remove();
$('.select-cidades option:first-child').after(optionsValues);
}
);
$.getJSON(urlCidadesPorEstado, { id: uf },
function (data) {
var optionsValues = '';
for (var i = 0; i < data.nomeCidade.length; i++) {
optionsValues += '<option value="' + data.idCidade[i] + '">' + data.nomeCidade[i] + '</option>';
}
$('.select-cidades option:not(:first-child)').remove();
$('.select-cidades option:first-child').after(optionsValues);
}
);
O
que eu usei quando precisei fazer isso em outro projeto foi uma
partial. Ela é inserida na View e é o retorno da Action que é
chamada via get. Simplifica o javascript (que não precisa escrever
campos, apenas trocar o HTML de um pedaço da página) e unifica o lugar
onde é criado o combo de Cidades.
Action:
public ActionResult PegarPorEstado(Int32 id)
{
Action:
public ActionResult PegarPorEstado(Int32 id)
{
var model = new MeuModel();
model.Cidades = cidadeService.PegarCidadePorEstado(id).ToList();
return PartialView("MinhaPartial", model);
}
Javascript:
$.getJSON(urlCidadesPorEstado, { id: uf },
function (data) {
$('.select-cidades').parent().html(data);
}
);
$.getJSON(urlCidadesPorEstado, { id: uf },
function (data) {
$('.select-cidades').parent().html(data);
}
);
A
Partial seria o trecho de código onde está o DropDown de cidades, e
herdaria o mesmo Model da View original. Ela teria que ser inserida
sozinha dentro de um elemento na View original, para o novo javascript funcionar sem comer outros códigos.