Neste post farei um exemplo de carregamento de dropdown a
partir do valor de outro dropdown utilizando o ajax.
Esta necessidade pode ocorrer em vários casos de negócio,
irei fazer um exemplo simples de carregamento de cidades baseado no estado
selecionado.
- Dropdown (lista de estados), neste caso
carregamos ao inicializar a página (via método construtor da Model).
- Dropdown (lista de cidades), será carregada após
a seleção de um estado.
HTML (MVC):
DropDownList
Estado:
@Html.DropDownListFor(vm
=> vm.Uf, Model.UfList, new { @class = "form-control selectpicker show-tick", data_live_search = "true", id = "ddlUf" })
DropDownList
Cidade:
@Html.DropDownListFor(vm
=> vm.Cidade, Model.CidadeList, new { @class = "form-control selectpicker show-tick", data_live_search = "true", id = "ddlCidade" })
Onde,
Cidade / Uf (string) e CidadeList /
UfList (SelectList)
JavaScript (Ajax):
No change (seleciona) do DowpDown “Estados” iremos via ajax
retornar uma lista de Cidades para popular o DropDown “Cidades”.
$("#ddlUf").change(function () {
$.ajax({
url: @Url.Action("CarregarCidade", "Endereco"), //Ação CarregarCidade e
Controller Endereco
type: 'POST',
dataType: "json",
data: { Estado: $("#ddlUf").val()
}, //Envia o valor que foi selecionado do
Estado (UF)
success: function (response) { //
Recebe um Json com uma lista de cidades (value e text)
var myObject = eval('(' + response.json + ')'); // Transforma em um object
$("#ddlCidade").empty();// Limpa o DropDown
Cidades (caso exista alguma informação)
for (var i = 0; i < myObject.length; i++) { // Percorre a lista de cidades retornadas
$("#ddlCidade").append('<option value="' +
myObject[i].CodCidade + '">' + myObject[i].Cidade + '</option>'); // (Append) Cria os registros
dentro do DropDown
};
}
});
});
MVC Controller (CarregarCidade):
Controller Endereco:
[HttpPost]
public JsonResult CarregarCidade(string Estado)
{
var jsonSerialiser = new JavaScriptSerializer();
var json = jsonSerialiser.Serialize(ListarCidade(Estado)); // o método “ListaCidade” retorna uma
List<objeto>, que será serializado para Json.
return Json(json, JsonRequestBehavior.AllowGet); // retorna json serializado
}
Em breve mais posts relacionados a Ajax.
Obrigado.
.png)
