4

Tengo un formulario en un proyecto ASP.NET MVC, en el cual al escribir un código en un input y al momento de escribirlo debera buscar ese codigo en una tabla de base de datos y llenar un dropdownlist, pero el dropdownlist no se llena Aquí mi código:

 //Lista de campos
public JsonResult GetCamposList(string Codigo)
{
bd.Configuration.ProxyCreationEnabled = false;
List<TblCampos> ListCampos = bd.TblCampos.Where(x => x.Codigo == Codigo).ToList();
return Json(ListCampos, JsonRequestBehavior.AllowGet);
}

<script type="text/javascript">
 $(document).ready(function () {
 $("#Codigo").change(function () {
 $.get("Solicitud/GetCamposList", { Codigo: $("#Codigo").val() }, function (data) {
 $("#Codigo").empty();
 $.each(data, function (index, row) {
 $("#Codigo").append("<option value='" + row.Cod_Campo + "'>'"+row.Descripcion+"'</option>")
 });
 });
 });
 });
</script>

<div class="form-group">
<div class="m-0 font-weight-bold text-primary subtitulo">Codigo:</div>
<input type="text" class="form-control" id="Codigo" name="Codigo" maxlength="5" minlength="5" required="">           @Html.ValidationMessageFor(model => model.Codigo, "", new { @class = "text-danger" })
</div>

<div class="form-group">
<div class="m-0 font-weight-bold text-primary subtitulo">Campo:</div>
<div class="col-md-5">
@Html.DropDownListFor(model => model.Cod_Campo, new SelectList(" "), "--Seleccione un campo--",new { @class="form-control"})
</div>
</div>

Modelo

 public partial class ProdMuestreo
 {
 public int Id { get; set; }
 public string Codigo { get; set; }
 public Nullable<int> Cod_Campo { get; set; }
 public string Ubicacion { get; set; }
 public string Telefono { get; set; }
 public List<TblCampos> Campos { get; set; }
 }

//ListCampos
public partial class TblCampos
{
public short Cod_Empresa { get; set; }
public string Codigo { get; set; }
public short Cod_Campo { get; set; }
public string Descripcion { get; set; }
}

Ejemplo de datos

Tabla ProdMuestreo 
 Id 0
 Codigo 00050
 Cod_Campo 1
 Ubicacion Mexico
 Telefono 55555555

Tabla Campos
Cod_Empresa 1
Codigo 00050
Cod_Campo 1
Descripcion Los Girasoles

6
  • Pues son varios pasos, primero crea otra accion que te devuelva una lista de items de tipo valor -texto. Del lado del usuario, agrega un llamado ajax para llamar a la accion en la con los valres de respuesta se llena el dropdownlist, por ultimo agrega un metodo con javascript para cuando se cambie el valor del input este llame a la funcion ajax. Commented el 5 jul. 2019 a las 20:47
  • @MiguelZarate ¿no tienes algun tutorial paso a paso? porque no tengo ni idea, Gracias Commented el 2 ago. 2019 a las 16:56
  • en este articulo tienes la respuesta,la ventaja es que viene el codigo fuente , c-sharpcorner.com/UploadFile/4d9083/… Commented el 5 ago. 2019 a las 15:10
  • ¿Podrías colocar un ejemplo del JSON y de parte de los datos que tienes?
    – fredyfx
    Commented el 5 ago. 2019 a las 19:32
  • Hola @fredyfx, ¿a que se refiere con de parte de los datos que tienes? Commented el 5 ago. 2019 a las 19:48

1 respuesta 1

0
+50

El problema es que intentas hacer el append en el mismo input, para corregir este problema primero asigna un Id a tu dropdownlist, y posteriormente hazle el append, no estabas tan lejos de la solución, tu código quedaría así:

<div class="form-group">
<div class="m-0 font-weight-bold text-primary subtitulo">Codigo:</div>
<input type="text" class="form-control" id="Codigo" name="Codigo" maxlength="5" minlength="5" required="">           @Html.ValidationMessageFor(model => model.Codigo, "", new { @class = "text-danger" })
</div>

<div class="form-group">
<div class="m-0 font-weight-bold text-primary subtitulo">Campo:</div>
<div class="col-md-5">
@Html.DropDownListFor(model => model.Cod_Campo, new SelectList(" "), "--Seleccione un campo--",new { @id = "IdCodCampo",@class="form-control"})
</div>
</div>

<script type="text/javascript">

$(document).ready(function () {
    $("#Codigo").change(function () {
        $.getJSON("/Solicitud/GetCamposList?Codigo=" + $("#Codigo").val(), function (result) {

            var select = $("#IdCodCampo");
            select.empty();


            $.each(result, function (index, itemData) {
                select.append($('<option/>', {
                    value: itemData.Cod_Campo,
                    text: itemData.Descripcion
                }));
            });


        });
    });
});

</script>
2
  • Disculpa me manda este error data is not defined Commented el 5 ago. 2019 a las 21:28
  • Si, ya revisé el código había un error, no era "data" el nombre de la variable que regresaba el ajax si no "result". Vuelve a intentarlo, lo acabo de modificar. Commented el 5 ago. 2019 a las 21:42

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.