0

quiero utilizar jQuery ui Autocomplete en una aplicacion MVC C# que utiliza un servicio WCF.

en mi controller hago la llamada al servicio y el servicio consulta la base de datos y todo va bien, el controlador recibe la letra que el usuario ingresa, el controlador llama al servicio WCF que va a la base de datos y me regresa una lista fuertemente tipada con la información que necesito dependiendo de la letra ingresada.

mi problema es que no me muestra los resultados en el @html.textbox(utilizo razor como view engine) y pues no entiendo que hago mal, podrian ayudarme, este es mi codigo de la vista

<script type="text/javascript">
    $(document).ready(function () {
        $("#SearchString").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action(actionName: "autocompletar", controllerName: "Borrar")',
                    type: "POST",
                    dataType: "json",
                    data: { prefix: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { value: item.Id, label: item.name };
                        }))
                    }
                })
            },
            select: function (event, ui) {
                $("#numeroPatronal").val(ui.item.value);
                $("#SearchString").val(ui.item.label);
                event.preventDefault();
                return false;
            },
            focus: function (event, ui) {
                $("#numeroPatronal").val(ui.item.value);
                event.preventDefault();
                return false;
            },
            messages: {
                noResults: "", results: ""
            }
        });
    });
</script>

estos son los campos del formulario

<div class="container col-md-10 col-md-offset-3">
    @using (Html.BeginForm())
    {
   <p> Empresa: @Html.TextBox("SearchString") </p>
   <p> Número Patronal: @Html.TextBox("numeroPatronal") </p>
<input type="submit" value="submit" />
    }
</div>

y esta es la acción autocompletar del controller Borrar

 public JsonResult autocompletar(string prefix)
        {
            List<GFC_Site.ViewModels.EmpresaAutocomplete> listado = new List<GFC_Site.ViewModels.EmpresaAutocomplete>();
            ProxyGFC.ServiceGFCClient cliente = new ProxyGFC.ServiceGFCClient();
            List<WcfService.Entidades.EmpresaAutocomplete> listadoBase = new List<WcfService.Entidades.EmpresaAutocomplete>();
            listadoBase = cliente.Autocompletar(prefix);
            foreach (var item in listadoBase)
            {
                GFC_Site.ViewModels.EmpresaAutocomplete dato = new ViewModels.EmpresaAutocomplete();
                dato.empresa = item.empresa;
                dato.np = item.np;
                listado.Add(dato);
            }
            return Json(listado, JsonRequestBehavior.AllowGet);

        }

1 respuesta 1

0

te recomiendo que busques acerca de chosen.jquery que ya hace eso que quieres, solo tienes que cargar una lista completa y pasarsela en un ViewBag, y en la vista con solo asignarle la clase "select" ya lo hace ejemplo:

@Html.DropDownList("VisitanteId", null, String.Empty, new { @class = "form-control inline select" })

y llamas la función $(".select").chosen();

si no te gusta esa idea en tu ejemplo creo que te faltaría renderizar la lista en una Partial y llamarla en tu javascript con UpdateTargetId

Tu Respuesta

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