2

Hola compañeros de StackOverFlow, tengo la siguiente duda, como puedo cargar o darle un valor a un input al momento de seleccionar una opción en un select o dropdownlist.Esta es la vista

mi controlador create es el siguiente:

// GET: Collaborators/Create
        public ActionResult Create()
        {
            var lideres = (from p in db.Collaborators
                                  where p.grupo_lider == "SI"
                                  select p).ToList();

            ViewBag.lideres = lideres.Select(p => new SelectListItem() { Value = p.nombres, Text = p.nombres }).ToList();

            ViewBag.CompanyID = new SelectList(db.Companies, "CompanyID", "compania");
            return View();
        }

Parte de mi vista:

<div class="form-group">
            @Html.LabelFor(model => model.lider, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.lider, (List<SelectListItem>)ViewBag.lideres, "Selleccione un líder", new{ @class = "form-control" })
                @Html.ValidationMessageFor(model => model.lider, "", new { @class = "text-danger" })
</div>
        </div>

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

Parte de mi modelo con las partes mas relevantes referente a mi duda:

[Display(Name = "Lider")]
public string lider { get; set; }
[Display(Name = "Cargo Lider")]
public string cargo_lider { get; set; }
[Display(Name = "Cargo")]
public string cargo { get; set; }

Explico con exactitud lo que necesito, actualmente mi dropdownList que tiene como modelo model.lider muestra los nombres de los usuarios cuyo grupo_lider es igual a "SI" en el controlador muestra la consulta que realice, lo que necesito ahora es cargar el input @Html.EditorFor(model => model.cargo_lider, new { htmlAttributes = new { @class = "form-control" } }) con el cargo según el nombre o el usuario que se seleccione en el dropdownlist, teniendo en cuenta que ese dato esta en la columna cargo de la db.collaborators, y necesito cargarlo en el input con el modelo.cargo_lider.

Quedo atento a preguntas, respuestas y demás.

Codigo Actual Ajax:

$('#iddropdownlist').change(function () {
            var url = "/Collaborators/BuscarCargoLider?claveLider=" + $('#iddropdownlist option:selected').val();
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                async: true,
                success: function (result) {
                    var lider;
                    if (result != null && result.length > 0) {
                        lider= JSON.parse(result);
                    }
                    if (lider!= null ) {                    
                        $('#idinput').val(lider);//cargo debe ser la propiedad de la clase lider donde se almacena el cargo del lider 
                    }                
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("error al consultar datos del lider");
                }
            });        
        });

Controller:

[HttpGet]
        public JsonResult BuscarCargoLider(string claveLider)
        {
            try
            {
                var lider = (from p in db.Collaborators
                             where p.nombres == claveLider
                             select p.cargo).ToList();

                return Json(lider, JsonRequestBehavior.AllowGet);
            }
            catch (Exception)
            {
            }
            return Json("", JsonRequestBehavior.AllowGet);
        }
2
  • puedes hacerlo con jquery, usando el evento change del dropdownlist para asignar el valor al input Commented el 17 may. 2017 a las 18:39
  • Buenas tardes amigo, si expongo la pregunta es porque no se como hacerlo, si pudieras ayudarme con un ejemplo claro seria de bastante utilidad, muchas gracias por comentar.
    – ByGroxD
    Commented el 17 may. 2017 a las 19:32

2 respuestas 2

2

en el controller:

[HttpGet]
    public JsonResult BuscarCargoLider(string claveLider)
    {
        try
        {
            var lider = tuconsulta(claveLider);                
            return Json(lider, JsonRequestBehavior.AllowGet);//lider es un objeto con la propiedades que tienes en la base de datos, espero ya tengas un objeto asi, la funcion tuconsulta es la que va a ir a buscar los datos del lider a la base de datos la debes de tener en algun lado y sólo mandarla llamar aqui
        }
        catch (Exception ex)
        {

        }
        return Json("", JsonRequestBehavior.AllowGet);
    }        

En el view:

$('#iddropdownlist').change(function () {
    var url = "/nombreControlador/BuscarCargoLider?claveLider=" + $('#iddropdownlist option:selected').val();
$.ajax({
        url: url,
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        async: true,
        success: function (result) {
            var lider;
            if (result != null && result.length > 0) {
                lider= JSON.parse(result);
            }
            if (lider!= null ) {                    
                $('#idinput').val(lider.cargo);//cargo debe ser la propiedad de la clase lider donde se almacena el cargo del lider 
            }                
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("error al consultar datos del lider");
        }
    });        
}
9
  • genial, parece que es lo que busco lo probare y califico
    – ByGroxD
    Commented el 17 may. 2017 a las 23:43
  • hola, actualmente me esta haciendo la consulta y el resultado lo hace perfectamente, lo unico que falta es que el input cargo_lider se cargue con el value
    – ByGroxD
    Commented el 18 may. 2017 a las 13:58
  • has probado que llegue hasta la parte del success? Commented el 18 may. 2017 a las 14:21
  • Si, actualmente realiza todo el proceso, menos el de poner el value en el input
    – ByGroxD
    Commented el 18 may. 2017 a las 14:44
  • Uncaught SyntaxError: Unexpected token A in JSON at position 0 at JSON.parse (<anonymous>) at Object.success (Create:824) at fire (jquery-1.10.2.js:3062) at Object.fireWith [as resolveWith] (jquery-1.10.2.js:3174) at done (jquery-1.10.2.js:8249) at XMLHttpRequest.callback (jquery-1.10.2.js:8792)
    – ByGroxD
    Commented el 18 may. 2017 a las 15:10
1

En la vista:

<script type="text/javascript">
$(document).ready(function () {
    $('#iddropdownlist').change(function () {
        $('#idinput').val($('#iddropdownlist option:selected').val());
    }
});
</script>

Para poner un id al dropdownlist e input

@Html.DropDownListFor(model => model.lider,(List<SelectListItem>)ViewBag.lideres, "Selleccione un líder", new{@id="iddropdownlist" @class = "form-control" })

@Html.EditorFor(model => model.cargo_lider, new { htmlAttributes = new { @id="idinput" @class = "form-control" } })
4
  • excelente, pero como sabe el javascript que valor poner en el input?
    – ByGroxD
    Commented el 17 may. 2017 a las 21:42
  • Con esta instruccion $('#idinput').val($('#iddropdownlist option:selected')..text()); si usas val() es el valor de elemento selecionado y si usas text() es el text de elemento seleccionado Commented el 17 may. 2017 a las 21:46
  • en el @Html.EditorFor(model => model.cargo_lider, new { htmlAttributes = new { @class = "form-control" } }) quiero que me aparezca el cargo del lider que seleciono en el dropdownlist, lo que significaria que tengo que al seleccionar enviar un dato y a su vez consultarlo, por ejemplo select cargo where lider = "VALORSELECCIONADO "
    – ByGroxD
    Commented el 17 may. 2017 a las 21:49
  • necesitas hacer una llamada ajax para hacer esa consulta Commented el 17 may. 2017 a las 22:18

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.