Cascading Dropdown list MVC5 using fluent nhibernate

Question

I have read for 2 days every single question that looks like my problem on here and read multiple pages and tutorials and even watched videos and i just can't understand it or make it work... What im trying to do is that i have 2 dropdown lists, one is "Departamentos" which you can think of it as a state and "Municipios" which you can think of it as a county. What i need and no matter what i just CAN'T make it work is that when i select a departamento ONLY the municipios from that departamento show up on the dropdown list. Im really a complete noob regarding programming and unfortunately i think i started with something way too big for me, so i' sorry if this is a basic really easy thing to do for you.

The departamento class is :

public virtual int id_departamento { get; set; }
public virtual string descripcion { get; set; }      

    //i specify Relationship for fluent Nhibernate to municipios since it is a 1-n
    public virtual IList<Municipios> Municipios { get; set; }

The municipio class is :

public virtual int id_municipio { get; set; }
public virtual string municipio { get; set; }
public virtual int id_departamento { get; set; }//THis is the FK from Departamento

And heres my main class Sitios where i connect everything to: This is for the Nhibernate relationships

public virtual Departamentos Departamento { get; set; }          
public virtual Municipios Municipios { get; set; }

This is for the lists on that same Sitios class:

public virtual List<Departamentos> Departamentos { get; set; } 
public virtual List<Municipios> municipiosLista { get; set; }

Now going to MVC this is the controller i have for the Get create where i populate the lists of Departamento and Municipio to be shown:

using (ISession session = NhibernateHelper.OpenSession())
        {                
            var deptos = session.Query<Departamentos>().ToList();
            var munis = session.Query<Municipios>().ToList();                      

            var instanciadelacopia=new Sitios
            {
                Departamentos = deptos, 
                municipiosLista = munis                
            };
            return View(instanciadelacopia);            
            }

And the create view for that specific dropdown part:

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Sitios</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
    <label class="control-label col-md-2"> Departamento </label>
    <div class="col-md-10">
@Html.DropDownListFor(model => model.id_departamento, new SelectList(Model.Departamentos, "id_departamento", "descripcion"), "--Select--", new {@id = "depto"})
    </div>
</div>    
<div class="form-group">
    <label class="control-label col-md-2"> Municipio </label>
    <div class="col-md-10">
@Html.DropDownListFor(model => model.id_municipio, new   SelectList(Model.municipiosLista, "id_municipio", "municipio"), "--Select--",   new { @id = "muni" })
    </div>
</div>

Everything works fine since it brings me all the values for me to select from the db, where i'm stuck and can't advance is that i need a cascading dropdown for the municipios list that when i select certain departamento ONLY the municipios of THAT selected departamento show up on the list. So for example i select departamento "atlantida" which it's ID is 1 then only the municipios which have that foreign key from Departamentos = 1 are shown which im guessing Jquery is required.

Would be really good if someone can help me with this, i feel so stressed since i just cant figure out what i need to do. Thanks

All examples i've seen are about using JSON like this one: http://www.c-sharpcorner.com/uploadfile/4d9083/creating-simple-cascading-dropdownlist-in-mvc-4-using-razor/ but since i already have all the data available on the dropdowns i think i don't need that and instead just a plain jquery function which i cant create.

Melvin Chinchila · Accepted Answer · 2016-12-13 21:53:23Z

Solved it with this:

<script type="text/javascript">//Script for Cascading Dropdown
    $(function () {
        $('#id_departamento').change(function() {
            var departmentId = $(this).val() || 0;
            $.ajax({
                url: '/Sitios/Municipios/',
                type: 'POST',
                data: { id_departamento: departmentId }, // parametro

                dataType: 'json',
                success: function (data) {

                    var options = $('#id_municipio');
                    $('option', options).remove(); // 

                    options.append($('<option />').val('').text('---'));

                    $.each(data, function () {
                        options.append($('<option />').val(this.id).text(this.name));
                    });
                } 

            }); 
        });

        });

Collectives™ on Stack Overflow

Cascading Dropdown list MVC5 using fluent nhibernate

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related