Skip to content
Crear Autocomplete en Asp.net MVC 5 Usando la Libreria Select2
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
PruebaAutocomplete.rar
README.md

README.md

AutoCompleteMVC

Crear Autocomplete en Asp.net MVC 5 Usando la Libreria Select2

En este articulo veremos la manera de como crear un dropdowlist con autocomplete en mvc 5 usando la libreria select2 ya que buscando en la web me doy cuenta que existen pocos ejemplos usando esta librería en un proyecto mvc de asp.net.

Para este ejemplo usare una base de datos que solo cuenta con una tabla Departamento(son los departamentos de mi bello país El Salvador)


Creamos un proyecto en VS y lo primero que aremos es agregar la librería select2 a nuestro proyecto(la descargamos con nuget)


Creamos el modelo de nuestra base de datos


Creamos un controlador(DepartamentoController) y agregamos el siguiente código



 
        public ActionResult Index()
        {
            return View();
        }
    public JsonResult GetDepartamento(string departamento)
    {
        PaisEntities bd = new PaisEntities();
        //cargo datos sin filtro
        var dataList = bd.Departamento.ToList();
        //si parametro tiene dato
        if(departamento != null)
        {
            //busco dato filtrado
             dataList = bd.Departamento.Where(x => x.Departamento1.Contains(departamento)).ToList();
        }

        //datos a usar
        var modificarData = dataList.Select(x => new
        {
            id= x.Id,
            text=x.Departamento1
        });
        //retorno datos como json
        return Json(modificarData, JsonRequestBehavior.AllowGet);
    }

    //Metodo donde obtengo dato
    [HttpPost]
    public ActionResult Save(string id)
    {
        //aca tu codigo
        return Json(0, JsonRequestBehavior.AllowGet);
    }

Como ven tenemos un método GetDepartamento que recibirá un parámetro y que nos retornara un json. Les explico un poco que es lo que hace este método primeramente cargamos la lista con todos los departamentos(los datos que se mostraran por defecto cuando el usuario no escriba nada) luego si el parámetro contiene datos hacemos el filtro para buscar los datos que coincidan con lo que el usuario escriba para eso usamos linq lo hacemos con el método Contains(es similar a hacer un like de sql), para este ejemplo mostraremos los departamento y obtendremos el id del departamento seleccionado, por ultimo tenemos el método Save que sera donde obtendremos el valor del id seleccionado.
Ahora creemos nuestra vista Index y agregamos el siguiente código
 
@model PruebaAutocomplete.Models.Departamento
@{
    ViewBag.Title = "Index";

}

@tema de boostrap para select2@

@using (Html.BeginForm("ConsultarCreditos", "Cliente", FormMethod.Post)) { <select class="mySelect2" style="width:200px"></select> <br /> <br /> <div class="form-group"> @Html.TextBoxFor(m => m.Id, null, new { disabled = true })

&lt;/div&gt;

}

<script> //obtengo datos por ajax $(document).ready(function () { $(".mySelect2").select2({ placeholder: "Seleccione Departamento", allowClear: true, theme: "bootstrap", ajax: { //invoco el metodo de mi controlador url: '@Url.Action("GetDepartamento","Departamento")', dataType: 'json', delay: 250, data: function (params) { return { departamento: params.term //parametro del metodo de mi controlador }; }, processResults: function (data) { return { results: data }; } } }); });

//capturar dato seleccionado
$(".mySelect2").on("change", function () {
    var departamentoID = $(this).val(); //capturo id seleccionado
    var textboxData = departamentoID; 
    $.ajax({
        url: '@Url.Action("Save","Departamento")', //url metodo de mi controlador
        data: { id: textboxData },
        dataType: 'json',
        type: 'post',
        success: function () {
            $("#Id").val(textboxData);//asigno valor id a textbox
        }
    });

});

</script>


Lo que hacemos es crear un dropdowlist donde mostraremos los departamentos y también tenemos un texbox que es donde mostraremos el id del departamento seleccionado. 
Lo importante acá es ver como implementamos jquery con ajax para cargar los departamentos y como obtenemos el valor del id.
En la primera parte obtenemos los datos invocando por ajax el método GetDepartamento de nuestro controlador en esta parte también usamos algunas propiedades de la librería select2 para asignarle el tema y placeholder. En la segunda parte capturamos el id del dato seleccionado y enviamos por ajax este valor a nuestro método Save de nuestro controlador, también acá asignamos el valor del id seleccionado a nuestro textbox.
You can’t perform that action at this time.