0

Me gustaría saber cómo usar Dropdownlist dependientes, por ejemplo que la CIUDAD dependa de la REGION, y esta del PAIS.

Actualmente estoy usando esta forma de trabajar al listar una dropdownlist:

En el controller; Function ActualizarMiembros() As ActionResult ViewBag.Cargoslist = GetCargos(Nothing) End Function

 Private Function GetCargos(selectedValues As String()) As MultiSelectList
    Using db As New BD_LOSCOPIHUESEntities1
        Dim cargos = db.CARGO.Select(Function(x) New With { _
                                         .IdCargo = x.IdCargo, _
                                         .NombreCargo = x.NombreCargo}).ToList()
        ViewBag.ListadoCargo = New MultiSelectList(cargos, "IdCargo", "NombreCargo")

        Return New MultiSelectList(cargos, "IdCargo", "NombreCargo", selectedValues)
    End Using
End Function

En la vista que uso webform, que es casi lo mismo que razor:

<%:Html.DropDownList("region", TryCast(ViewBag.Regioneslist, MultiSelectList), "Seleccione...", New With {Key .[class] = "form-control estilo_dropdownlist input-sm"})%> 

Actualmente he visto artos ejemplos en C#, pero cuando lo traspaso a visual, no me resulta. Me gustaría como podría hacer dropdownlist dependientes.

2 respuestas 2

2

Hay varias formas de lograr combos en dependientes

1-Una opcion podria ser usando jquery, por medio de $.ajax() o $.getJSON() puedes invocar al action del controller que devolvera como respuesta json usado para cargar los items del seguiente combo

Cascading DropDownList in ASP.Net MVC

Creating Simple Cascading DropDownList In MVC 4 Using Razor

la idea es que definas dos dropdownlist pero al primero le adjuntas el evento change de jquery, entonces cuando cambias de opcion lanzara el evento en el cliente, es alli cuando usar el $.ajax para invocar un action en el controller que devolver la lista en json para crear los options del segundo combo

2- Por medio del helper @Html.CascadingDropDownListFor()

CascadeDropDown Helpers

observaras que permite definir en la view como se relaciona con el primer combo

3- Usando @Ajax.BeginForm()

Simple Implementation of MVC Cascading Ajax Drop Down

Aplicando ajax por medio de un submit al controller creado por el Ajax.BeginForm(), puedes actualizar una seccion de la view para inyectar en esta el html del segundo combo que mostrara los options dependiendo de la seleccion del primer combo

0

Encontre una buena solución, en el Controller:

Public Function Index() As ActionResult
    ViewData("titulo") = "cascada de prueba"
    Using db As New BD_LOSCOPIHUESEntities1
        Dim regiones = db.REGION.Select(Function(x) New With { _
                                         .Value = x.IdRegion, _
                                         .Text = x.Nombre}).ToList()

        Dim model As New DropDownListCascadeViewModel()
        model.regiones = New SelectList(regiones, "Value", "Text")
        model.ciudades = New SelectList(New List(Of SelectListItem)(), "Value", "Text")

        Return View(model)
    End Using
End Function


  <HttpPost> _
  Public Function GetCiudades(typeCiudad As String) As JsonResult
    Dim type As Integer = Integer.Parse(typeCiudad)
    Dim list As New List(Of SelectListItem)()

    Using db As New BD_LOSCOPIHUESEntities1
        Dim ciudadesSelect = db.CIUDAD.Where(Function(y) y.IdRegion = type).Select(Function(x) New With { _
                                         .Value = x.IdCiudad, _
                                         .Text = x.Nombre}).ToList()         

        Dim model As New DropDownListCascadeViewModel()
        model.ciudades = New SelectList(ciudadesSelect, "Value", "Text")

        Return Json(New With {model.ciudades})
    End Using
End Function

Creé una clase de tipo ViewModel(es la forma que le llamo):

Public Class DropDownListCascadeViewModel
Public Property selectedRegion() As Integer
    Get
        Return m_selectedRegion
    End Get
    Set(value As Integer)
        m_selectedRegion = value
    End Set
End Property
Private m_selectedRegion As Integer
Public Property selectedCiudades() As Integer
    Get
        Return m_selectedCiudades
    End Get
    Set(value As Integer)
        m_selectedCiudades = value
    End Set
End Property
Private m_selectedCiudades As Integer

Public regiones As System.Web.Mvc.SelectList
Public ciudades As System.Web.Mvc.SelectList
End Class

y en la vista, al principio referencia al ViewModel que hice:

<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage(Of IMPCHLosCopihues_MVC.DropDownListCascadeViewModel)" %>

A traves de Jquery con AJAX en la Vista:

<script type="text/javascript" src="../../Scripts/jquery-1.11.3.min.js">           </script>
  <script type="text/javascript">

    $(function () {
        $('#selectedRegion').change(function () {
            var typeCiudad = $('#selectedRegion :selected').val();
            typeCiudad = typeCiudad == "" ? 0 : typeCiudad;
            //When select 'optionLabel' we need to reset it to default as well. So not need 
            //travel back to server.
            if (typeCiudad == "") {
                $('#selectedCiudades').empty();
                $('#selectedCiudades').append('<option value="">--Select a language--</option>');
                return;
            }

            //This is where the dropdownlist cascading main function
            $.ajax({
                type: "POST",
                url: "GetCiudades",                            //Your Action name in the DropDownListConstroller.cs
                data: "{'typeCiudad':" + typeCiudad + "}",  //Parameter in this function, Is cast sensitive and also type must be string
                contentType: "application/json; charset=utf-8",
                dataType: "json"

            }).done(function (data) {
                //When succeeded get data from server construct the dropdownlist here.
                if (data != null) {

                    $('#selectedCiudades').empty();
                    $.each(data.ciudades, function (index, data) {
                        $('#selectedCiudades').append('<option value="' + data.Value + '">' + data.Text + '</option>');
                    });
                }
            }).fail(function (response) {
                if (response.status != 0) {
                    alert(response.status + " " + response.statusText);
                }
            });
        });
    });

<body>
Region<%: Html.DropDownListFor(Function(m) m.selectedRegion, Model.regiones, "--Seleccione la Region--")%>
<br />
Ciudad <%:Html.DropDownListFor(Function(m) m.selectedCiudades, Model.ciudades, "--Seleccione la Ciudad--")%>
<br />
</body>

Y así puedo tener Dropdownlist dependientes.

¿El asunto es como cargar los datos guardados en los Dropdownlist, para hacer los Update?

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.