2

Gostaria de carregar dinamicamente minha dropdownlist sem submitar a pagina! meu projeto é na arquitetura .net mvc !

 @Html.Label("Categoria do Veiculo: ")
    @Html.DropDownListFor(v => v.CodigoCategoriaVeiculo,Model.TipoModeloEquipamentosList)

gostaria que ele carregasse via ajax!

6
  • Teria como explicar melhor o que quis dizer com "sem submitar a pagina"?
    – Randrade
    Commented 20/02/2015 às 19:43
  • cara na mesma pagina eu tenho um formulario que cadastra categoria. quando cadastrar a categoria eu queria que automaticamente populasse o dropdownlist. sem fazer o postback,refresh ,submit via ajax Commented 20/02/2015 às 19:49
  • Seria uma opção fazer isso por partial ? Se for, talvez funcione e você não precise dar refresh na pagina porque isso vai ficar a cargo da partial. Commented 20/02/2015 às 20:58
  • @Hans, um HttpHelper, nada mais é que um utilitário que escreve uma string, então você pode apenas limpar o select com Javascript e adicionar novas opções. Commented 20/02/2015 às 23:24
  • @Erik Poderia mi mostrar um exemplo do tipo? preciso de só ver como funciona a coisa Commented 23/02/2015 às 11:55

3 Respostas 3

4

como sugerido pelo jHonathan você pode fazer uma requisição AJAX, segue abaixo os trechos importantes para se fazer isto:

Controller

[HttpPost]
public JsonResult GetSubValor(Int32 valor)
{
    return Json(this.GetSubValores(valor));
}

private List<SubValorModel> GetSubValores(Int32 valor)
{
    var subValores = new List<SubValorModel>();
    if (valor == default(Int32))
        return subValores;

    valor = valor - 1;
    var startIndex = (valor * 10) + 1;
    for (int indice = startIndex; indice < startIndex + 10; indice++)
    {
        var tmp = indice.ToString("000");
        subValores.Add(new SubValorModel {
            SubValorID = indice,
            Descricao = "Sub Valor " + tmp
        });
    }
    return subValores;
}

JavaScript

var valor = $("#Valor");
var subValor = $("#SubValor");
valor.change(function () {
    var request = { "valor": valor.val() };         
    $.post("/Home/GetSubValor/", request, function(subValores) { 
        subValor.empty();
        var option = $("<option>").text("Selecione um SubValor");
        subValor.append(option);
        $.each(subValores, function (indice, item) { 
            option = $("<option>", { "value": item.SubValorID }).text(item.Descricao);
            subValor.append(option);
        });
    }, "json");
});

Caso precise, pode estudar o exemplo completo abaixo.

Model

using System;
using System.ComponentModel.DataAnnotations;

namespace MvcApp
{
    public class Model
    {
        public Int32 Valor { get; set; }        
        public Int32 SubValor { get; set; }
    }

    public class ValorModel
    {
        public Int32 ValorID { get; set; }      
        public String Descricao { get; set; }
    }

    public class SubValorModel
    {
        public Int32 SubValorID { get; set; }

        public String Descricao { get; set; }
    }
}

Controle

using System;
using System.Web.Mvc;
using System.Linq;
using System.Collections.Generic;

namespace MvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            var model = new Model();
            this.CreateLists(model);
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(Model model)
        {
            this.CreateLists(model);
            return View(model);
        }

        [HttpPost]
        public JsonResult GetSubValor(Int32 valor)
        {
            return Json(this.GetSubValores(valor));
        }

        private void CreateLists(Model model)
        {
            ViewBag.Valor = new SelectList(this.GetValores(), "ValorID", "Descricao", model.Valor);
            ViewBag.SubValor = new SelectList(this.GetSubValores(model.Valor), "SubValorID", "Descricao", model.SubValor);
        }

        private List<ValorModel> GetValores()
        {
            var valores = new List<ValorModel>();
            for (int indice = 1; indice <= 10; indice++)
            {
                var tmp = indice.ToString("000");
                valores.Add(new ValorModel {
                    ValorID = indice,
                    Descricao = "Valor " + tmp
                });
            }
            return valores;
        }

        private List<SubValorModel> GetSubValores(Int32 valor)
        {
            var subValores = new List<SubValorModel>();
            if (valor == default(Int32))
                return subValores;

            valor = valor - 1;
            var startIndex = (valor * 10) + 1;
            for (int indice = startIndex; indice < startIndex + 10; indice++)
            {
                var tmp = indice.ToString("000");
                subValores.Add(new SubValorModel {
                    SubValorID = indice,
                    Descricao = "Sub Valor " + tmp
                });
            }
            return subValores;
        }
    }
}

View

@model MvcApp.Model
@{
    Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
        @using (Html.BeginForm())
        {

            <div>
                @Html.LabelFor(model => model.Valor)
                @Html.DropDownList("Valor", ViewBag.Valor as SelectList, "Selecione um Valor")
            </div>
            <div>               
                @Html.LabelFor(model => model.SubValor)
                @Html.DropDownList("SubValor", ViewBag.SubValor as SelectList, "Selecione um SubValor")             
            </div>  
            if (Model.Valor != 0) {
            <div>
                Valor Enviado:
                <input type="text" readonly="readonly" disabled="disabled" value="@Model.Valor" />
                <input type="text" readonly="readonly" disabled="disabled" value="@Model.SubValor" />               
            </div>
            }
            <input type="submit" value="Enviar" />
        }
        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {          
                var valor = $("#Valor");
                var subValor = $("#SubValor");
                valor.change(function () {
                    var request = { "valor": valor.val() };         
                    $.post("/Home/GetSubValor/", request, function(subValores) { 
                        subValor.empty();
                        var option = $("<option>").text("Selecione um SubValor");
                        subValor.append(option);
                        $.each(subValores, function (indice, item) { 
                            option = $("<option>", { "value": item.SubValorID }).text(item.Descricao);
                            subValor.append(option);
                        });
                    }, "json");
                });
            });
        </script>
    </body>
</html>
0
0

Basta fazer uma requisição ajax e retornar por Json por exemplo.

Veja esta pergunta: https://stackoverflow.com/questions/22928756/how-to-bind-json-data-to-dropdownlist-in-asp-net-mvc-using-jquery

0

Como Jhonathan sugeriu deve funcionar, porém você pode fazer assim também:

PartialView: DropDown.cshtml

@model IEnumerable<SelecListItem>

<label>Drop Down</label>
@Html.DropDownList("NomeCampo", Model, "Selecione um item")

Controller

public PartialViewResult GetDropDown(int id)
{
    var itens = new List<SelectListItem>();

    itens.Add(new SelectListItem() {Text = "Ajuda", Value = 1});

    return PartialView("DropDown", itens);
}

E fazer uma requisição ajax e colocar o retorno dentro de um container.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .