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 that you have read and understand our privacy policy and code of conduct.