Dropdownlist dependent on another? ASP.NET MVC

Question

This section creates job offers (it is a job portal), from which, you need to choose Area and Subarea. When I select an Area, I should see the Subareas of that Area. I leave an image to see the composition of the tables:

tables area & subarea

My job offer model is this:

namespace ProyectoBase4.Models
{
using System;
using System.Collections.Generic;

public partial class OfertaLaboral
{
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
public OfertaLaboral()
{
    this.OfertaPostulante = new HashSet<OfertaPostulante>();
}

public int Of_ID { get; set; }
public Nullable<int> OfEmp_ID { get; set; }

public string Of_Titulo { get; set; }
public string Of_Puesto { get; set; }
public Nullable<int> Of_Area { get; set; }
public Nullable<int> Of_Subarea { get; set; }
public string Of_Descrp { get; set; }
public string Of_Lugar { get; set; }
public Nullable<int> Of_Vacante { get; set; }
public Nullable<System.DateTime> Of_FechaIn { get; set; }
public Nullable<System.DateTime> Of_FechaFin { get; set; }
public Nullable<int> Of_Salario { get; set; }
public Nullable<int> Of_Jornada { get; set; }
public Nullable<int> Of_Mov { get; set; }
public Nullable<int> Of_Edu { get; set; }
public Nullable<int> Of_TContrato { get; set; }
public Nullable<int> Of_Estado { get; set; }

public virtual Area Area { get; set; }
public virtual Educacion Educacion { get; set; }
public virtual Estado Estado { get; set; }
public virtual Jornada_Compl Jornada_Compl { get; set; }
public virtual Movilidad Movilidad { get; set; }
public virtual Subarea Subarea { get; set; }
public virtual TipoContrato TipoContrato { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<OfertaPostulante> OfertaPostulante { get; set;         }
}
}

How can I do that by choosing a field in Area, I display the corresponding Subtareas? This is the view:

<div class="">
                    <div class="form-group col-md-8">
                        @Html.LabelFor(model => model.Of_Titulo, htmlAttributes: new { style = "" })
                        <div class="">
                            @Html.EditorFor(model => model.Of_Titulo, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Of_Titulo, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group col-md-3">
                        @Html.LabelFor(model => model.Of_Area, htmlAttributes: new { @class = "", style = "margin-left:10px;" })
                        <div class="">
                            @Html.DropDownList("Of_Area", null, htmlAttributes: new { @class = "form-control form-control-75", style = "margin-left:10px;" })
                            @Html.ValidationMessageFor(model => model.Of_Area, "", new { @class = "text-danger" })

                        </div>
                    </div>

                </div>
                <br /><br /><br /><br />
                <div>
                    <div class="form-group col-md-4">
                        @Html.LabelFor(model => model.Of_Vacante, htmlAttributes: new { @class = "" })
                        <div class="">
                            @Html.EditorFor(model => model.Of_Vacante, new { htmlAttributes = new { @class = "form-control form-control-50" } })
                            @Html.ValidationMessageFor(model => model.Of_Vacante, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group col-md-4">
                        @Html.LabelFor(model => model.Of_Salario, htmlAttributes: new { @class = "" })
                        <div class="">
                            @Html.EditorFor(model => model.Of_Salario, new { htmlAttributes = new { @class = "form-control form-control-50" } })
                        </div>
                    </div>

                    <div class="form-group col-md-3">
                        @Html.LabelFor(model => model.Of_Subarea, htmlAttributes: new { @class = "", style = "margin-left:40px;" })
                        <div class="">
                            @Html.DropDownList("Of_Subarea", null, htmlAttributes: new { @class = "form-control  form-control-75", style = "margin-left:40px;" })
                            @Html.ValidationMessageFor(model => model.Of_Subarea, "", new { @class = "text-danger" })

                    </div>
                </div>

As I mentioned before, I need that when I choose an option, then when I select the sub-option, only the options of that area appear to me.

Example:

view

Thanks

This is called a cascading drop-down...if you Google those terms you should find quite a few existing example of how to do it — ADyson, Apr 15 '19 at 22:56
yes, I have tried with jquery, but it only works with the "area" model (Area_ID), when I try to use it with "OfertaLaboral", it doesn't work, maybe it's declaring wrong in the script, I'm sorry for not responding before. — Diego Salazar, Apr 16 '19 at 19:04

Steve0 · Answer 1 · 2019-04-16T19:27:09.953

First, add an attribute to the subarea options with the area.

An example can be found here: SelectListItem with data-attributes

Second, handle the change() event of the area drop-down in jQuery. Use that event handler to hide() all options not in that area, and show() those that are.

$("#Of_Area").change(function(){
   $("#Of_Subarea>option").hide();
   $("#Of_Subarea>option[area=" + $("#Of_Area>option:selected").attr("value") + "]").show();
});

Dropdownlist dependent on another? ASP.NET MVC

1 Answers1