Populate DropDownListFor dynamically with JQuery?

Question

Populate DropDownListFor dynamically with JQuery?

Navigation

#1 by (2 votes)
#2 by (0 votes)

3

I'm trying to fill a DropDownListFor dynamically. This DropDownListFor eh to display the cities of the state, for example: The user chooses the state and in this DropDown the cities of that state are displayed. The problem is that in the model SelectListItem of cities is empty and when rendering the page, and for this is giving the following Exception:

An exception of type 'System.InvalidOperationException' occurred in System.Web.Mvc.dll but was not handled in user code

Additional information: There is no ViewData item of type 'IEnumerable<SelectListItem>' that has the key 'cidadeSelected'.

How to solve this?

Model

    //estado
    public IEnumerable<SelectListItem> estados { get; set; }    
    public IEnumerable<long> estadoSelected { get; set; }
    //
    //cidade
    public IEnumerable<SelectListItem> cidades             { get; set; }
    [Required(ErrorMessage = "Selecione a cidade")]
    public IEnumerable<long> cidadeSelected                { get; set; }
    //

HTML

<div class="form-group">
                            <div class="col-md-10">
                                <label for="@Html.IdFor(model => model.estadoSelected)" class="cols-sm-2 control-label">Estado </label>
                                @Html.DropDownListFor(model => model.estadoSelected, Model.estados, "-Escolha o estado-", new { Class = "form-control", data_placeholder = "Selecione o estado" })
                                @Html.ValidationMessageFor(model => model.estadoSelected)
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-10">
                                <label for="@Html.IdFor(model => model.cidadeSelected)" class="cols-sm-2 control-label">Condado </label>
                                @Html.DropDownListFor(model => model.cidadeSelected, Model.cidades, new { Class = "form-control", data_placeholder = "Selecione a cidade" })
                                @Html.ValidationMessageFor(model => model.cidadeSelected)
                            </div>
                        </div>

asp.net-mvc asp.net-mvc-5

asked by anonymous 21.05.2017 / 22:27

2 answers

2

Model

public class CascadingDropDownSampleModel
    {

        public IDictionary<string, string> Makes { get; set; }
    }

Controller

 public class CascadingDropDownSampleController : Controller
    {
        #region "Public Actions"


        [HttpGet]
        public ActionResult Index()
        {
            IDictionary<string, string> makes = GetSampleMakes();
            CascadingDropDownSampleModel viewModel = new CascadingDropDownSampleModel()
            {
                Makes = makes
            };

            return View(viewModel);
        }

        public ActionResult GetSampleModels(string selectedMake)
        {
            IDictionary<string, string> models = GetSampleModelsFromSelectedMake(selectedMake);
            return Json(models);
        }


        public ActionResult GetSampleColors(string selectedModel)
        {
            IDictionary<string, string> colors = GetSampleColorsFromSelectedModel(selectedModel);
            return Json(colors);
        }

        #endregion

        #region "Private Methods"


        private IDictionary<string, string> GetSampleMakes()
        {
            IDictionary<string, string> makes = new Dictionary<string, string>();

            makes.Add("1", "Acura");
            makes.Add("2", "Audi");
            makes.Add("3", "BMW");

            return makes;
        }

        private IDictionary<string, string> GetSampleModelsFromSelectedMake(string selectedMake)
        {
            IDictionary<string, string> models = new Dictionary<string, string>();

            switch (selectedMake)
            {
                case "1":
                    models.Add("1", "Integra");
                    models.Add("2", "RL");
                    models.Add("3", "TL");
                    break;
                case "2":
                    models.Add("4", "A4");
                    models.Add("5", "S4");
                    models.Add("6", "A6");
                    break;
                case "3":
                    models.Add("7", "3 series");
                    models.Add("8", "5 series");
                    models.Add("9", "7 series");
                    break;
                default:
                    throw new NotImplementedException();

            }

            return models;
        }


        private IDictionary<string, string> GetSampleColorsFromSelectedModel(string selectedModel)
        {
            IDictionary<string, string> colors = new Dictionary<string, string>();

            switch (selectedModel)
            {
                case "1":
                    colors.Add("1", "Green");
                    colors.Add("2", "Sea Green");
                    colors.Add("3", "Pale Green");
                    break;
                case "2":
                    colors.Add("4", "Red");
                    colors.Add("5", "Bright Red");
                    break;
                case "3":
                    colors.Add("6", "Teal");
                    colors.Add("7", "Dark Teal");
                    break;
                case "4":
                    colors.Add("8", "Azure");
                    colors.Add("9", "Light Azure");
                    colors.Add("10", "Dark Azure");
                    break;
                case "5":
                    colors.Add("11", "Silver");
                    colors.Add("12", "Metallic");
                    break;
                case "6":
                    colors.Add("13", "Cyan");
                    break;
                case "7":
                    colors.Add("14", "Blue");
                    colors.Add("15", "Sky Blue");
                    colors.Add("16", "Racing Blue");
                    break;
                case "8":
                    colors.Add("17", "Yellow");
                    colors.Add("18", "Red");
                    break;
                case "9":
                    colors.Add("17", "Brown");
                    break;
                default:
                    throw new NotImplementedException();

            }

            return colors;
        }

        #endregion

    }

View

@model CSDropdownListMVC4.Models.CascadingDropDownSampleModel

@{
    ViewBag.Title = "CascadingDropDown Demonstration in ASP.NET MVC 4";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Scripts
{
    <script src="~/Scripts/CascadingDropDownSample.js"></script>
}


<table>
    <tr>
        <td>Marca</td>
        <td>
            <select id="make" class="size-200">
                <option value="-1">Selecione uma marca</option>
                @foreach (KeyValuePair<string, string> make in Model.Makes)
                {
                    <option value="@make.Key">@make.Value</option>
                }
            </select>
        </td>
    </tr>
    <tr>
        <td>Modelo</td>
        <td>
            <select id="model" class="size-200" disabled>
                <option value="-1">Selecione o modelo</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Cor</td>
        <td>
            <select id="color" class="size-200" disabled>
                <option value="-1">Selecione a cor</option>
            </select>
        </td>
    </tr>
</table>

Jquery

$(function () {
    var cascadingDropDownSample = new CascadingDropDownSample();

    $('#make').on('change', function () {
        var selectedMake = $(this).val();

        if (selectedMake !== "-1") {
            $.post('/CascadingDropDownSample/GetSampleModels',
                { selectedMake: selectedMake },
                function (data) {
                    cascadingDropDownSample.resetCascadingDropDowns();
                    cascadingDropDownSample.getSampleModelsSuccess(data);
                });
        }
        else {

            cascadingDropDownSample.resetCascadingDropDowns();
        }
    });

    $('#model').on('change', function () {
        var selectedModel = $(this).val();

        if (selectedModel !== "-1") {
            $.post('/CascadingDropDownSample/GetSampleColors',
                { selectedModel: selectedModel },
                function (data) {
                    cascadingDropDownSample.resetColors();
                    cascadingDropDownSample.getSampleColorsSuccess(data);
                });
        }
        else {
            cascadingDropDownSample.resetColors();
        }
    });
});

function CascadingDropDownSample() {
    this.resetCascadingDropDowns = function () {
        this.resetModels();
        this.resetColors();
    };

    this.getSampleModelsSuccess = function (data) {
        $.each(data, function (key, textValue) {
            $('#model').append($('<option />', { value: key, text: textValue }));
        });
        $('#model').attr('disabled', false);
    };

    this.getSampleColorsSuccess = function (data) {
        $.each(data, function (key, textValue) {
            $('#color').append($('<option />', { value: key, text: textValue }));
        });
        $('#color').attr('disabled', false);
    };

    this.resetModels = function () {
        $('#model option').remove();
        $('#model').append($('<option />', { value: '-1', text: 'Please select a model' }));
        $('#model').attr('disabled', 'disabled');
    };

    this.resetColors = function () {
        $('#color option').remove();
        $('#color').append($('<option />', { value: '-1', text: 'Please select a color' }));
        $('#color').attr('disabled', 'disabled');
    };
}

Reference link

22.05.2017 / 14:25

List the last users logged in (GROUP BY AND ORDER BY) Get Response from an API that returns error 500

score 0 · Accepted Answer

Solved. I just created an empty list of cities and added it to the Model and worked blab.

I did so.

Controller

public ActionResult add(){
            AddTaxModel model = new AddTaxModel();
            model.estados = new SelectList(new EstadoDAO().findAll(), "id", "nome");
            model.cidades = new SelectList(new List<Cidade>(), "id", "nome");                      
            return View(model);
        }