miércoles, 17 de julio de 2019

AutoComplete MVC 5 (usando librería 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 })

    </div>

}



<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.


Bueno eso seria todo. Pueden descargar el proyecto desde mi repositorio en github  Descargar Proyecto
  
Recuerden si necesitan una pagina web para su empresa, una aplicación web o de escritorio estamos a la orden pueden consultar  Mis Servicios

O si quieren donarme para una soda lo pueden hacer aqui.


martes, 9 de julio de 2019

Filtrar Datos MVC 5 C#

En esta ocasión veremos la manera de como filtrar datos(DropDowlist) en una aplicación mvc de asp.net y como recuperar un valor por medio de ajax dependiendo del valor seleccionado.



Imaginemos el siguiente escenario  tenemos 2 tablas Cliente y Crédito en donde un cliente puede tener varios créditos, lo que aremos es crear una vista en donde mostraremos los datos del cliente y al seleccionar un cliente mostraremos el detalle de todos los créditos que el cliente posee.




Empezaremos creando la base de datos, la cual tendrá la siguiente estructura.



Creamos un nuevo proyecto MVC y generamos nuestro modelo



Ahora crearemos una clase model que nos servirá para mostrar los datos(creamos una carpeta ViewModel dentro de Model y creamos la clase en mi caso le llamare ClienteModel)






 
    public class ClienteModel
    {
        public int Id { get; set; }
        public string Nombre { get; set; }
        public string Dui { get; set; }
        public decimal Saldo { get; set; }
        public string Credito { get; set; }
    }
    

Esta clase lo único que tiene son las propiedades que usaremos para mostrar los datos en nuestras vistas. En nuestro controlador para listar los clientes aremos lo siguiente en nuestro método Index.
 
        public ActionResult Index()
        {
            List clientes;
            using(CreditosEntities bd = new CreditosEntities())
            {
                //obtengo listado clientes
                clientes = (from cli in bd.Cliente
                            select new ClienteModel
                            {
                                Id = cli.Id_Cliente,
                                Nombre = cli.Nombre,
                                Dui = cli.Dui
                            }).ToList();
            }

            return View(clientes);
        }

Lo que hacemos es retornar un listado con los datos de los clientes haciendo uso de nuestra clase modelo. Ahora agreguemos nuestra vista Index la cual tendrá el siguiente código.
 
<div class="row">
    <div class="col-md-12">

        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th>ID</th>
                    <th>DUI</th>
                    <th>NOMBRE</th>
                    <th>Creditos</th>
                </tr>
            </thead>
            
            @foreach (var elemento in Model)
            {
                <tr>
                    <td>@elemento.Id</td>
                    <td>@elemento.Dui</td>
                    <td>@elemento.Nombre</td>
                    <td>
                        
                        <input type="button" class="btn btn-danger" value="Ver Creditos"
                               onclick="document.location.href='@Url.Content("~/Cliente/ConsultarCreditos/"+elemento.Id)'" />

                    </td>
                </tr>
            }



        </table>
    </div>
</div>


Ahora crearemos el método para obtener la información de los créditos del cliente seleccionado en nuestro controlador agregamos el siguiente código.
 
        //variable global
        CreditosEntities bd = new CreditosEntities();

        public ActionResult ConsultarCreditos(int id)
        {

            //obtengo id del cliente
            ClienteModel clien = new ClienteModel();
            {
                clien.Id = id;
            };

            // cargar drow creditos de cliente seleccionado mediante id
            ViewBag.Credito= new SelectList(bd.Credito.Where(c => c.Id_Cliente == id).ToList(), "N_Credito", "N_Credito");

            //obtener nombre
            ViewBag.Nombre = bd.Cliente.Where(c =>c.Id_Cliente ==id).First().Nombre;
            return View(clien);
        }

        //Metodo para obtener saldo por ajax jquery
        public JsonResult Saldo(string credito)
        {
            return Json(bd.Credito.First(c => c.N_Credito == credito).Saldo, JsonRequestBehavior.AllowGet);
        }

Tenemos 2 métodos en el primero ConsutarCreditos es donde por medio del id del cliente seleccionado obtendremos todos los créditos del cliente (esto lo hacemos en viewbag para mostrarlo en nuestra vista en un dropdowlist) también recuperamos el nombre del cliente seleccionado.
El método Saldo nos servirá para obtener el saldo cuando seleccionemos el numero de crédito en el dropdowlist(retorna un json para hacerlo fácil con ajax). Ahora creamos nuestra vista ConsultarCreditos.
 
@model FiltrarDatosMVC.Controllers.ViewModels.ClienteModel
@{
    ViewBag.Title = "ConsultarCreditos";
}

<h2>Consultar Creditos</h2>

@using (Html.BeginForm("ConsultarCreditos", "Cliente", FormMethod.Post))
{
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label>Cliente:</label>@Html.TextBox("txtNombre", (string)ViewBag.Nombre, new { disabled = true })<br />
            </div>
            <div class="form-group">
                <label>Cuentas del Cliente:</label>  @Html.DropDownListFor(m => m.Credito, (SelectList)ViewBag.Credito, "seleccione")
                <br />
            </div>
            <div class="form-group">
                <label>Saldo:</label>@Html.TextBoxFor(m => m.Saldo, null, new { disabled = true })<br />
            </div>

            <input type="button" class="btn btn-primary" value="Salir" onclick="document.location.href='@Url.Content("~/Cliente/Index")'" />
        </div>
    </div>

}

@Scripts.Render("~/bundles/jquery")

<script>
      //muestro saldo depende de credito seleccionado
    $("#Credito").change(function () {
        $.ajax({
            url: '@Url.Action("Saldo","Cliente")',
            data: { credito: $(this).val() },
            success: function (a) {
                $("#Saldo").val(a);
            }
        });
    });

</script>

Lo que hacemos acá es primeramente mostrar los datos del cliente nombre y créditos que posee(mostramos los créditos en un dropdowlist) y cuando seleccionamos un crédito nos muestra el saldo de este para eso hacemos uso de ajax con jquery(usamos el método Saldo de nuestro controlador)
Bueno eso seria todo. Pueden descargar el proyecto desde mi repositorio en github  Descargar Proyecto
  
Recuerden si necesitan una pagina web para su empresa, una aplicación web o de escritorio estamos a la orden pueden consultar  Mis Servicios

Y si quieren donarme para una soda lo pueden hacer aqui.