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.