0

Estoy tratando de seleccionar un valor de mi DropDownList "Departamento" con Jquery pero no tengo éxito, este es el código que utilizo para seleccionar:

$('#campo_departamento').val('@model.AMAZONAS');

Esta es mi vista

@model wsCharlas.Models.ClsInteresado

@{
    ViewBag.Title = "Inscripción";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Inscripción:</h2>

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

<h4>Aquí usted podrá inscribirse a la charla respectiva que escogió.</h4>

    <hr />
    <strong>DATOS DEL PARTICIPANTE:</strong>
    <hr />

    <!--    <div class="form-horizontal"> -->
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })


    <div class="form-group">
        @Html.HiddenFor(model => model.ID_Inter, htmlAttributes: new { @class = "control-label" })
        <div>
            @Html.HiddenFor(model => model.ID_Inter, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ID_Inter, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.dni_Inter, htmlAttributes: new { @class = "control-label" })
        <div>
            @Html.EditorFor(model => model.dni_Inter, new { htmlAttributes = new { @id = "campo_dni", @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.dni_Inter, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-md-4">
            @Html.LabelFor(model => model.apePat_Inter, htmlAttributes: new { @class = "control-label" })
            <div>
                @Html.EditorFor(model => model.apePat_Inter, new { htmlAttributes = new { @id = "campo_apePat", @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.apePat_Inter, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group col-md-4">
            @Html.LabelFor(model => model.apeMat_Inter, htmlAttributes: new { @class = "control-label" })
            <div>
                @Html.EditorFor(model => model.apeMat_Inter, new { htmlAttributes = new { @id = "campo_apeMat", @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.apeMat_Inter, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group col-md-4">
            @Html.LabelFor(model => model.nombres_Inter, htmlAttributes: new { @class = "control-label" })
            <div>
                @Html.EditorFor(model => model.nombres_Inter, new { htmlAttributes = new { @id = "campo_nombres", @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.nombres_Inter, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-md-4">
            @Html.LabelFor(model => model.fecha_nac_Inter, htmlAttributes: new { @class = "control-label" })
            <div>
                @Html.EditorFor(model => model.fecha_nac_Inter, new { htmlAttributes = new { @id = "campo_fechNac", @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.fecha_nac_Inter, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group col-md-4">
            @Html.LabelFor(model => model.edad_Inter, htmlAttributes: new { @class = "control-label" })
            <div>
                @Html.EditorFor(model => model.edad_Inter, new { htmlAttributes = new { @id = "campo_edad", @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.edad_Inter, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group col-md-4">
            @Html.LabelFor(model => model.sexo_Inter, htmlAttributes: new { @class = "control-label" })
            <div>
                @Html.EditorFor(model => model.sexo_Inter, new { htmlAttributes = new { @id = "campo_sexo", @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.sexo_Inter, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-md-9">
            @Html.LabelFor(model => model.correo_Inter, htmlAttributes: new { @class = "control-label" })
            <div>
                @Html.EditorFor(model => model.correo_Inter, new { htmlAttributes = new { @id = "campo_correo", @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.correo_Inter, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group col-md-3">
            @Html.LabelFor(model => model.telefono_Inter, htmlAttributes: new { @class = "control-label" })
            <div>
                @Html.EditorFor(model => model.telefono_Inter, new { htmlAttributes = new { @id = "campo_telefono", @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.telefono_Inter, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.direccion_Inter, htmlAttributes: new { @class = "control-label" })
        <div>
            @Html.EditorFor(model => model.direccion_Inter, new { htmlAttributes = new { @id = "campo_direccion", @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.direccion_Inter, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-md-4">
            @Html.LabelFor(model => model.depar_Inter, htmlAttributes: new { @class = "control-label" })
            <div>
                @Html.DropDownListFor(model => model.depar_Inter, (SelectList)ViewBag.Departamentos, "Seleccione un Departamento", new { @id = "campo_departamento", @class = "form-control"})
            </div>
        </div>

        <div class="form-group col-md-4">
            @Html.LabelFor(model => model.provin_Inter, htmlAttributes: new { @class = "control-label" })
            <div>
                @Html.DropDownListFor(model => model.provin_Inter, (SelectList)ViewBag.Provincias, "Seleccione una Provincia", new { id = "campo_provincia", @class = "form-control" })
            </div>
        </div>

        <div class="form-group col-md-4">
            @Html.LabelFor(model => model.dist_Inter, htmlAttributes: new { @class = "control-label" })
            <div>
                @Html.DropDownListFor(model => model.dist_Inter, (SelectList)ViewBag.Distritos, "Seleccione un Distrito", new { @id = "campo_distrito", @class = "form-control" })
            </div>
        </div>
    </div>

    <hr />
    <strong>DATOS DE LA CHARLA:</strong>
    <hr />

    <div class="form-group">
        @Html.LabelFor(model => model.ID_charla, htmlAttributes: new { @class = "control-label" })
        <div>
            <!--disabled = "true" -->
            @Html.EditorFor(model => model.ID_charla, new { htmlAttributes = new { @class = "form-control", @Value = ViewBag.id, } })
            @Html.ValidationMessageFor(model => model.ID_charla, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-md-3">
            <label class="control-label">Charla:</label>
            <div>
                <input class="form-control" type="text" value="@ViewBag.titulo" disabled />
            </div>
        </div>

        <div class="form-group col-md-9">
            <label class="control-label">Descripcion:</label>
            <div>
                <input class="form-control" type="text" value="@ViewBag.descripcion" disabled />
            </div>
        </div>

    </div>

    <div class="form-row">
        <div class="form-group col-md-2">
            <label class="control-label">Fecha:</label>
            <div>
                <input class="form-control" type="text" value="@ViewBag.fecha" disabled />
            </div>
        </div>

        <div class="form-group col-md-2">
            <label class="control-label">Hora:</label>
            <div>
                <input class="form-control" type="text" value="@ViewBag.hora" disabled />
            </div>
        </div>

        <div class="form-group col-md-8">
            <label class="control-label">Direccion:</label>
            <div>
                <input class="form-control" type="text" value="@ViewBag.direccion" disabled />
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2">
            <input type="submit" value="Create" class="btn btn-primary" />
        </div>
    </div>
    <!--</div>-->
}

<div>
    @Html.ActionLink("Regresar", "MostraCharlas", null, new { @class = "btn btn-primary" })
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script>

        $(document).ready(function () {

            //$('#combo_departamento option[value="LIMA"]').attr('selected', 'selected').trigger('change');

            $('#campo_departamento option:nth-child(1)').attr("value", "000");

            //$('#campo_departamento option:nth-child(1)').attr("selected", "selected"); 

            /*$('#campo_departamento option').remove();
            $('#campo_departamento').append("<option value='000'>Seleccione un Departamento</option>");

            $('#campo_provincia option').remove();
            $('#campo_provincia').append("<option value='000'>Seleccione una Provincia</option>");

            $('#campo_distrito option').remove();
            $('#campo_distrito').append("<option value='000'>Seleccione un Distrito</option>");*/

        //----

            var dni = $("#campo_dni");
            var apePat = $("#campo_apePat");
            var apeMat = $("#campo_apeMat");
            var nombres = $("#campo_nombres");
            var fechNac = $("#campo_fechNac");
            var edad = $("#campo_edad");
            var sexo = $("#campo_sexo");
            var correo = $("#campo_correo");
            var telefono = $("#campo_telefono");
            var direccion = $("#campo_direccion");
            var departamento = $("#campo_departamento");
            var provincia = $("#campo_provincia");
            var distrito = $("#campo_distrito");

            //HAY QUE COLOCAR AQUI UN SELECTED PARA QUE SE PUEDA LLENAR EL OTRO COMBO Y ASI SUCESIVAMENTE

            function formInteresado() {
            $.ajax({
                type: "POST",
                url: '@Url.Action("ConsultarDNI", "Charlas")',
                data: { dni: dni.val()},
                dataType: "json",
                success: function (rpta) {
                    apePat.val(rpta.apePat_Inter);
                    apeMat.val(rpta.apeMat_Inter);
                    nombres.val(rpta.nombres_Inter);
                    fechNac.val(rpta.fecha_nac_Inter);
                    edad.val(rpta.edad_Inter);
                    sexo.val(rpta.sexo_Inter);
                    correo.val(rpta.correo_Inter);
                    telefono.val(rpta.telefono_Inter);
                    direccion.val(rpta.direccion_Inter);
                    departamento.val(rpta.depar_Inter);
                    //departamento.selectedIndex = 1;
                    //$('#campo_departamento option:nth-child(1)').attr("selected", "selected");
                    provincia.val(rpta.provin_Inter);
                    distrito.val(rpta.dist_Inter);
                },
                error: function (req, textStatus, errorThrown) {
                    alert('Ooops, something happened: ' + textStatus + ' ' + errorThrown);
                }
            });
        }

        $("#campo_dni").focusout(function () {
            formInteresado();
        });

            //----------------

            function formProvincia() {
            $.ajax({
                type: "POST",
                url: '@Url.Action("ConsultarProvincias", "Charlas")',
                data: { depa: departamento.val()},
                dataType: "json",
                success: function (rpta) {

                    $.each(rpta, function (index, element) {
                        $("#campo_provincia").append('<option value="' + element.Text + '">' + element.Text + '</option>');
                    });

                },
                error: function (req, textStatus, errorThrown) {
                    alert('Ooops, something happened: ' + textStatus + ' ' + errorThrown);
                }
            });
        }

            $(document).on("change", "#campo_departamento", function () {
                $('#campo_provincia option').remove();
                $('#campo_provincia').append("<option value='000'>Seleccione una Provincia</option>");

                $('#campo_distrito option').remove();
                $('#campo_distrito').append("<option value='000'>Seleccione un Distrito</option>");

                formProvincia();
            });            

            $("#campo_departamento").change(function () {

                $('#campo_provincia option').remove();
                $('#campo_provincia').append("<option value='000'>Seleccione una Provincia</option>");

                $('#campo_distrito option').remove();
                $('#campo_distrito').append("<option value='000'>Seleccione un Distrito</option>");

                formProvincia();
        });

            //--------

            function formDistrito() {
            $.ajax({
                type: "POST",
                url: '@Url.Action("ConsultarDistritos", "Charlas")',
                data: { depa: departamento.val(), prov: provincia.val() },
                dataType: "json",
                success: function (rpta) {

                    $.each(rpta, function (index, element) {
                        $("#campo_distrito").append('<option value="' + element.Text + '">' + element.Text + '</option>');
                    });

                },
                error: function (req, textStatus, errorThrown) {
                    alert('Ooops, something happened: ' + textStatus + ' ' + errorThrown);
                }
            });
        }

            $(document).on("change", "#campo_provincia", function () {
                $('#campo_distrito option').remove();
                $('#campo_distrito').append("<option value='000'>Seleccione un Distrito</option>");
                formDistrito();
            });

            $("#campo_provincia").change(function () {
                $('#campo_distrito option').remove();
                $('#campo_distrito').append("<option value='000'>Seleccione un Distrito</option>");
                formDistrito();
        });


    });

</script>

Imagen

introducir la descripción de la imagen aquí

El Controlador con el Servicio

[HttpPost]
    public JsonResult ConsultarDNI(string dni)
    {

        ServicesReniec.sConsultaDNISoapClient consultaDNI = new ServicesReniec.sConsultaDNISoapClient();
        List<string> resultado = new List<string>();
        resultado = consultaDNI.Consulta("JVEGA", dni);
        string ape_pat = "";
        string ape_mat = "";
        string nombres = "";
        string fech_nac = "";

        string edad = "";
        string sexo = "";
        string correo = "";
        string telefono = "";
        string direccion = "";

        string departamento = "";
        string provincia = "";
        string distrito = "";

        string ubigeo = "";
        int i = 0;
        foreach (string R in resultado)
        {
            switch (i)
            {
                case 0:
                    if ((R.Substring(0, 4) != "0000"))
                    {
                        //limpiarFormulario();
                        return Json(new ClsInteresado());
                    }

                    break;
                case 1:
                    ape_pat = R;
                    break;
                case 2:
                    ape_mat = R;
                    break;
                case 4:
                    nombres = R;
                    break;
                case 8:
                    if (R.Equals(" "))
                    {
                        departamento = "CALLAO";
                    }
                    else
                    {
                        departamento = R;
                    }

                    break;
                case 9:
                    provincia = R;
                    break;
                case 10:
                    distrito = R;
                    break;
                case 11:
                    direccion = R;
                    break;
                case 14:
                    sexo = R;
                    break;
                case 21:
                    fech_nac = R;
                    break;
            }
            i++;

        }

        ClsInteresado interesado = new ClsInteresado
        {
            apePat_Inter = ape_pat,
            apeMat_Inter = ape_mat,
            nombres_Inter = nombres,
            fecha_nac_Inter = fech_nac,
            edad_Inter = edad,
            sexo_Inter = sexo,
            correo_Inter = correo,
            telefono_Inter = telefono,
            direccion_Inter = direccion,
            depar_Inter = departamento,
            provin_Inter = provincia,
            dist_Inter = distrito
        };

        return Json(interesado);
    }
5
  • 1
    ¿Cuál es la diferencia con tu pregunta anterior? Veo que recién estás empezando con ASP.net MVC, te recomiendo visitar este workshop que hice: youtube.com/watch?v=6LZG76aLykY te dará un panorama para que puedas desarrollar con mayor tranquilidad :D Por otro lado, ¿has visto la documentación de jquery?
    – fredyfx
    el 9 jul. 2019 a las 18:50
  • 1
    @fredyfx esta pregunta está relacionada al uso del model, mientras que la otra es relacionada a dropdownlist en cascada. Así lo veo yo.
    – KodiakMx
    el 9 jul. 2019 a las 19:03
  • 1
    sucede que básicamente ambas tienes que hacer lo mismo: obtener el valor de un dropdown y hacer algo, por eso le pregunto, si has visto la documentación de jquery (pregunta para el OP)
    – fredyfx
    el 9 jul. 2019 a las 19:04
  • Hola chicos, @fredyfx si he visto la documentación y he probado con varias funciones para seleccionar los valores. Aqui he grabado el problema que presento en mi sistema, solo tengo ese problema al momento de seleccionar el valor en el DropDownListFor drive.google.com/open?id=1QX3iOBp62uUAlQXKHswDDoe1JVJFKvxr. Ahora que veo el video que grabé, no aparece los datos, pero con la imagen que coloque en esta pregunta ya da una idea :D. el 10 jul. 2019 a las 15:27
  • @fredyfx queria enviartelo por el chat de stackoverflow pero esta cerrado. el 10 jul. 2019 a las 15:30

1 respuesta 1

1

Cuando quieres leer alguna propiedad del modelo, tienes que usar la M mayúscula:

$('#campo_departamento').val('@Model.AMAZONAS');
5
  • 1
    Ahora, para qué cambiarle el nombre a los campos, cuando marcas un @Html.DropDownListFor, si no defines el id explícitamente, el select-option tomara como el id y el name con el nombre de tu propiedad, además de que si esta propiedad viene con valor desde el controlador, tu select-option pondrá por default ese valor.
    – KodiakMx
    el 9 jul. 2019 a las 18:41
  • Lo que pasa amigo @KodiakMx es que estoy usando un servicio que al momento de colocar mi numero de identificación me trae todos mis datos personales, hasta el departamento, provincia y distrito de donde vivo. el 10 jul. 2019 a las 4:10
  • No me funciono amigo @KodiakMx, cuando lo aplico en el navegador no obtengo resultados :( el 10 jul. 2019 a las 15:33
  • 1
    @GianFrancoAlexisPomaVidal el servicio lo puedes llamar desde tu controlador. Pero bueno, deja checo el video y veo la oportunidad de ayudarte.
    – KodiakMx
    el 10 jul. 2019 a las 19:08
  • estaré atento a tu respuesta amigo @KodiakMx el 10 jul. 2019 a las 19:09

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