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.


miércoles, 19 de junio de 2019

CRUD MVC 5 .NET (2 PARTE)

Esta es la segunda parte (y última parte) de cómo hacer un CRUD en MVC 5 con C#, en la parte anterior creamos la bd, creamos nuestro proyecto en VS y vimos la manera de como leer los datos y mostrarlos en nuestra vista. 
Puedes ver el artículo anterior CRUD MVC 5 .NET (1 PARTE) en este articulo estaremos completando las operaciones que nos faltaron que serían la de Agregar, Editar y Eliminar.

Lo primero que aremos será agregar una clase en nuestro models dentro de la capeta que creamos ViewModels llamada PersonaViewModel




  
    public class PersonaViewModel
    {
        
        public int Id { get; set; }
        //indica que es requerido
        [Required]
        //nombre a mostrar 
        [Display (Name ="Nombre")]
        //valida el numero de caracteres igual a varchar(50) de nuestra bd
        [StringLength(50)]
        public string Nombre { get; set; }
        [Required]
        [Display(Name = "Apellido")]
        [StringLength(50)]
        public string Apellido { get; set; }
        [Required]
        public int? Edad { get; set; }
    }    

Esta clase si se fijan es igual a la que usamos para mostrar los datos (las mismas propiedades), la diferencia es que en esta clase usamos Data Annotations para hacer algunas validaciones (ya que esta clase usaremos para agregar y editar registros) Ahora dentro de nuestro controlador PersonaController agreguemos nuestro método para Agregar un registro.
  
       public ActionResult Nuevo()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Nuevo(PersonaViewModel persona)
        {
            try
            {
                //validar datos
                if(ModelState.IsValid)
                {
                    //guardamos datos en bd
                    using (PersonaEntities bd = new PersonaEntities())
                    {
                        var opersona = new Persona();
                        opersona.Nombre = persona.Nombre;
                        opersona.Apellido = persona.Apellido;
                        opersona.Edad = persona.Edad;

                        bd.Persona.Add(opersona);
                        bd.SaveChanges();
                    }
                    //luego de agregar registro redirecionamos hacia nuestro index
                    return Redirect("~/Persona/");
                }

                return View(persona);
            }

            catch(Exception e)
            {
                throw new Exception(e.Message);
            }
        }  

Agregamos 2 metodos ActionResult con el mismo nombre(Nuevo) la diferencia es que el primero solo retornara la vista(es HttpGet) y en el segundo método(HttpPost) es donde agregaremos nuestro registro usando la clase que creamos anteriormente como parámetro. 
Lo primero que hacemos es validar los datos que definimos en nuestra clase anterior con los Data Annotation, si los datos están correctos creamos un nuevo registro y lo agregamos a la bd. Ahora crearemos nuestra vista para agregar registros(damos click derecho en nuestro ActionResult Nuevo y le damos agregar vista).




  
@model CrudPersonaMVC.Models.ViewModels.PersonaViewModel
@{
    ViewBag.Title = "Nuevo";
}


<h2>Nuevo</h2>


@using (Html.BeginForm("Nuevo","Persona", FormMethod.Post))
{
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <!-- Creo label   -->
                @Html.LabelFor(p => p.Nombre):
                
                @Html.TextBoxFor(p => p.Nombre, "", new { @class = "form-control" })
                
                @Html.ValidationMessageFor(p => p.Nombre, null, new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.LabelFor(p => p.Apellido):
                @Html.TextBoxFor(p => p.Apellido, "", new { @class = "form-control" })
                @Html.ValidationMessageFor(p => p.Apellido, null, new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.LabelFor(p => p.Edad):
                @Html.TextBoxFor(p => p.Edad, "", new { @class = "form-control" })
                @Html.ValidationMessageFor(p => p.Edad, null, new { @class = "text-danger" })
            </div>
            <br/>
            <div style="text-align:center">
                <input  type="submit" class="btn btn-primary" value="Guardar" />
            </div>
        </div>
    </div>
}

Creamos nuestro formulario usando los helper de mvc .net ya tenemos nuestro formulario para agregar registro ahora solo nos queda en nuestro botón nuevo que creamos en nuestro Index(articulo anterior) direccionar a nuestra vista nuevo al presionar el botón
  
 <input type="button" class="btn btn-primary" value="Nuevo" onclick="document.location.href='@Url.Content("~/Persona/Nuevo")'" />

Ahora vamos a editar registros en nuestra controlador PersonaController agreguemos los siguientes métodos.
  
  public ActionResult Editar(int id)
        {
            PersonaViewModel model = new PersonaViewModel();
            using (PersonaEntities bd = new PersonaEntities())
            {
                var opersona = bd.Persona.Find(id);//obtenemos registro por medio de id
                model.Id = opersona.Id;
                model.Nombre = opersona.Nombre;
                model.Apellido = opersona.Apellido;
                model.Edad = opersona.Edad;
            }

            return View(model);

        }
        [HttpPost]
        public ActionResult Editar(PersonaViewModel persona)
        {
            try
            {
                //validar datos
                if (ModelState.IsValid)
                {
                    //guardamos datos en bd
                    using (PersonaEntities bd = new PersonaEntities())
                    {
                        var opersona = bd.Persona.Find(persona.Id);//obtenemos registro por medio de id
                        opersona.Nombre = persona.Nombre;
                        opersona.Apellido = persona.Apellido;
                        opersona.Edad = persona.Edad;
                        //editamos registro
                        bd.Entry(opersona).State = System.Data.Entity.EntityState.Modified;
                        bd.SaveChanges();
                    }

                    return Redirect("~/Persona/");
                }

                return View(persona);
            }

            catch (Exception e)
            {
                throw new Exception(e.Message);
            }
        }

De igual manera tenemos 2 ActionResult con el nombre Editar. El primer método lo que hace es a partir de el id obtener el registro para mostrarlo en la vista. En nuestro segundo método Editar(HttpPost) es donde actualizamos el registro en nuestra bd. 
Ahora crearemos nuestra vista para Editar registros(damos click derecho en nuestro ActionResult Editar y le damos agregar vista).
  
@model CrudPersonaMVC.Models.ViewModels.PersonaViewModel
@{
    ViewBag.Title = "Nuevo";
}


<h2>Nuevo</h2>


@using (Html.BeginForm("Editar","Persona", FormMethod.Post))
{
    <div class="row">
        <div class="col-md-12">
          @Html.HiddenFor(p => p.Id);
            <div class="form-group">
                <!-- Creo label   -->
                @Html.LabelFor(p => p.Nombre):
                
                @Html.TextBoxFor(p => p.Nombre, "", new { @class = "form-control" })
                
                @Html.ValidationMessageFor(p => p.Nombre, null, new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.LabelFor(p => p.Apellido):
                @Html.TextBoxFor(p => p.Apellido, "", new { @class = "form-control" })
                @Html.ValidationMessageFor(p => p.Apellido, null, new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.LabelFor(p => p.Edad):
                @Html.TextBoxFor(p => p.Edad, "", new { @class = "form-control" })
                @Html.ValidationMessageFor(p => p.Edad, null, new { @class = "text-danger" })
            </div>
            <br/>
            <div style="text-align:center">
                <input  type="submit" class="btn btn-primary" value="Guardar" />
            </div>
        </div>
    </div>
}

Como ven el código de nuestra vista es similar al de Nuevo, la diferencia es que es nuestro BeginForm cambiamos nuestro método por Editar y lo otro que cambia es que enviamos el id para editar el registro @Html.HiddenFor(p => p.Id). De igual manera en nuestro botón Editar de nuestro Index agregamos el siguiente código para hacer el direccionamiento a la vista Editar y pasar el id del elemento a editar.
  
<input type="button" onclick="document.location.href='@Url.Content("~/Persona/Editar/"+elemento.Id)'" value="Editar" class="btn btn-default" />

Ahora veamos el código para eliminar registro, en nuestro controlador PersonaController agreguemos el siguiente método
  
        [HttpPost]
        public ActionResult Eliminar(int id)
        {

            PersonaViewModel model = new PersonaViewModel();
            using (PersonaEntities bd = new PersonaEntities())
            {
                var opersona = bd.Persona.Find(id);//obtengo entidad con id

                bd.Persona.Remove(opersona);

                bd.SaveChanges();

            }
            return Content("ok");
        }

En este caso solo crearemos un método(httpPost) ya que no crearemos una vista, eliminaremos el registro al presionar el botón pasando como parámetro el id(lo aremos usando ajax con jquery). En nuestra vista Index al final de nuestro código agregaremos el siguiente script.
  
<script/>
    function jsEliminar(id) {
        if (confirm("Quieres Eliminar El Registro?")) {
            url = "@Url.Content("~/Persona/Eliminar")" + "/"+id; //metodo Eliminar Controller

            $.post(url, function (data) {
                
                if (data=="ok") {
                    document.location.href = "@Url.Content("~/Persona/")"
                    console.log("Exito");
                } else {
                    alert("No se pudo Eliminar El registro");
                }

            })
        }
    }
</script/>

Creamos una función que recibirá como parámetro el id del registro a eliminar y luego con ajax(con jquery) hacemos una petición post para pasar el id del registro a eliminar. Ahora nuestro botón Eliminar de nuestro Index para invocar esta función ariamos lo siguiente.
  
<input class="btn btn-danger" onclick="jsEliminar(@elemento.Id);" type="button" value="Eliminar" />

Eso seria todo, hemos visto la manera de hacer un crud sencillo usando mvc 5 con c#. Pueden descargar el proyecto desde mi repositorio en github, y recuerden si necesitan una pagina web para su empresa, una aplicación web o de escritorio estamos a la orden pueden consultar  Mis Servicios





Descargar Proyecto C#

Saludos desde El Salvador...


Si quieren donarme para una soda lo pueden hacer aqui.


sábado, 8 de junio de 2019

CRUD MVC 5 .NET (1 PARTE)

En esta ocasión veremos la manera de como hacer un CRUD(Crear,Leer,Actualizar y Borrrar) usando Entity Framework(Database First) en un proyecto de Asp.net MVC. 
Para no alargarme mucho dividiré este ejemplo en 2  artículos.

En este primer articulo estaremos creando la base de datos que usaremos, crearemos nuestro modelo EF a partir de la bd y estaremos mostrando en nuestro aplicación los datos de la bd(en la siguiente parte aremos el create update y delete).



Bueno lo primero que aremos sera crear la BD para este ejemplo creare una base de datos llamada PERSONA que tendrá nada mas una tabla Persona.


  
--1. Crear Base de Datos
CREATE DATABASE Persona
USE Persona
go

--2. Crear Tabla
--CREATE TABLE Persona
--(
-- Id int primary key identity(1,1),
-- Nombre varchar(50),
-- Apellido varchar(50),
-- Edad int
--)

--3. Insertar Registro
--insert into Persona values('Juan','Perez',50)

Nuevo Proyecto

Ahora creemos un proyecto en ASP.NET  MVC VS(en mi caso uso el 2017) le llamaremos CrudPersonaMVC

Nuevo Proyecto

Ahora crearemos nuestro modelo EF a partir de la bd que ya tenemos creada(en la carpeta Models agreguemos un nuevo elemento Entity Data Model)

Modelo Entity

Creamos una nueva cadena de Conexión(Ponen el nombre de su servidor, tipo de autenticacion, y el nombre de la base de datos)

Conexion

Seleccionamos las tablas incluiremos en nuestro modelo(en nuestro caso solo es una tabla)

Tabla Persona

Se nos creara nuestro modelo con nuestra tabla

Modelo

Bueno empecemos a programar dentro de nuestra carpeta Models crearemos una nueva carpeta llamada ViewModels y dentro de esta carpeta crearemos una clase llamada ListarPersonas(esta clase nos servirá para poder mostrar nuestros registros en nuestra vista)

Modelo
  
    public class ListarPersonas
    {
        public int Id { get; set; }
        public string Nombre { get; set; }
        public string Apellido { get; set; }
        public int? Edad { get; set; }
    }

Dentro de esta clase crearemos una propiedad por cada campo de la tabla que queramos mostrar(en nuestro caso mostraremos todos los campos) importante que cada propiedad sea del mismo tipo del campo de nuestra tabla.

Ahora agregaremos un Controlador llamado PersonaController

Controlador Persona

Agregaremos el siguiente código
  
    public class PersonaController : Controller
    {
        // GET: Persona
        public ActionResult Index()
        {
            //creamos una lista de nuestra clase ListarPersona
            List list;
            using (PersonaEntities bd = new PersonaEntities())
            {
               //hacemos un select a nuestra tabla con los campos que queremos mostrar
                list = (from b in bd.Persona
                        select new ListarPersonas
                        {
                            Id = b.Id,
                            Nombre = b.Nombre,
                            Apellido = b.Apellido,
                            Edad = b.Edad,
                        }).ToList();
            }
                return View(list);
      

Lo que hacemos en nuestro ActionResult con LINQ hacemos un select a nuestra tabla Persona haciendo uso de la clase ListarPersona que creamos anteriormente para retornar en nuestra vista una lista con los registros de nuestra tabla. Ahora para mostrar los registro crearemos una vista de nuestro controlador, así que damos click derecho y agregaremos nuestra vista Index

Controlador Persona
Y en nuestra vista tendremos nuestro siguiente código
  
@{
    ViewBag.Title = "Index";
}

<center><h2>Datos Personas</h2></center>
<!-- Boton Nuevo  -->
<div class=" row" style="text-align:right; padding:5px">
    <div class="col-md-12">
        <input type="button" class="btn btn-primary" value="Nuevo" />
    </div>
 </div>
    <!-- Creo tabla  -->
    <div class="row">
        <div class="col-md-12">

            <table class="table">
                <thead class="thead-dark">
                    <tr>
                        <th>ID</th>
                        <th>NOMBRE</th>
                        <th>APELLIDO</th>
                        <th>EDAD</th>
                        <th>Editar/Eliminar</th>
                    </tr>
                </thead>
                <!-- Recorro el modelo para imprimir datos -->
                @foreach (var elemento in Model)
                {
                    <tr>
                        <td>@elemento.Id</td>
                        <td>@elemento.Nombre</td>
                        <td>@elemento.Apellido</td>
                        <td>@elemento.Edad</td>

                        <td>
                            <!-- Botones Editar Eliminar  -->
                            <input type="button" value="Editar" class="btn btn-default" />
                            <input type="button" class="btn btn-danger" value="Eliminar" />
                        </td>
                    </tr>
                }
            </table>
        </div>
    </div>


Lo que hacemos acá es crear una tabla(usamos un poco de Boostrap para darle un mejor diseño) y luego recorremos nuestro modelo con un foreach para imprimir nuestros datos en cada campo de nuestro tabla(esto lo hacemos con razor), también hemos agregado los botones de Nuevo, Editar y Eliminar que en nuestro siguiente articulo veremos como programarlos.

Controlador Persona
Como ven en nuestra vista ya estamos mostrando los registros de nuestra bd. En el siguiente articulo veremos como agregar,editar y eliminar registros...

 Saludos desde El Salvador...

Descargar Proyecto C#

Nota:Si descargan el proyecto deben crear la bd y cambiar la cadena de conexión con los datos de su servidor de bd.

 Si necesitan una pagina web para su empresa, una aplicación web o de escritorio estamos a la orden...

Si quieren donarme para una soda lo pueden hacer aqui.


martes, 21 de mayo de 2019

Validar Datos(Editext) en Android Studio

Como les comente en mi ultimo entrada empezare a publicar artículos de  android studio para el desarrollo de aplicaciones android con java.

En esta ocasión les traigo algo muy sencillo pero que seguro a muchos a los que empiezan a realizar aplicaciones en android studio les servirá mucho, y es que cuando estamos desarrollando aplicaciones algo muy esencial es poder validar o controlar la entrada de datos por parte del usuario.

Así que hoy veremos 3 validaciones esenciales en toda aplicación.
  1. Validar que los campo de texto(Editext) no esten vacíos.
  2. Validar que valor ingresado sea un valor numérico.
  3. Validar el ingreso de una dirección de correo electrónico.
Lo primero que aremos sera crear un proyecto android vació al que llamaremos ValidarEditext

Nuevo Proyecto


El diseño de nuestra aplicación sera la siguiente

Diseño


Les explico como funcionara en la primera parte tenemos 2 Editext en donde se deben ingresar valores numéricos si los  valores ingresados son numéricos al presionar el botón Sumar mostrara la suma de los valores en el Textview, luego tenemos otro Editext donde se debe ingresar un correo electrónico al presionar el botón Validar Correo validaremos si el dato ingresado es un correo o no.

Una vez que tenemos nuestro diseño  agregaremos una clase a nuestro proyecto a la cual le llamaremos Validaciones esta clase sera donde crearemos los métodos para hacer las validaciones antes mencionadas(lo aremos en una clase para tener el código mas ordenado, poder aplicar, poo, para así poder reutilizar el código en todas las vistas).

clase
En esta clase tendremos el siguiente código

  
package com.example.validareditext;

import android.text.TextUtils;
import android.util.Patterns;
import android.widget.EditText;

public class Validaciones {

 //metodo para validar si es un valor numerico
    public  boolean isNumeric(String cadena) {
        boolean resultado;
        try {
            Integer.parseInt(cadena);
            resultado = true;
        } catch (NumberFormatException excepcion) {
            resultado = false;
        }
        return resultado;
    }

    //metodo para validar si es un email
    public  boolean isEmail(String cadena) {
        boolean resultado;
        if (Patterns.EMAIL_ADDRESS.matcher(cadena).matches()) {
            resultado = true;
        } else {
            resultado = false;
        }

        return resultado;
    }

    //metodo para validar si editext esta vacio
    public  boolean Vacio(EditText campo){
        String dato = campo.getText().toString().trim();
        if(TextUtils.isEmpty(dato)){
            campo.setError("Campo Requerido");
            campo.requestFocus();
            return true;
        }
        else{
            return false;
        }
    }
}



Como pueden observar dentro de nuestra clase creamos 3 métodos boolean para hacer las validaciones.
isNumeric este método nos servirá para validar si el dato ingresado(una cadena) es un valor numérico para eso hacemos uso de la clase Integer de su método parseInt, el método nos devuelve verdadero(true) si el dato es un valor numérico y falso(false) si el dato no es un valor numérico
isEmail con este método validamos si el valor ingresado(una cadena) es un correo o no haciendo uso de la clase Patterns, si el dato es un correo el método nos devolverá verdadero(true), y si no lo es nos devolverá falso(false)
Vacio este método recibe un parámetro de tipo Editext el cual verificamos que no este vació haciendo uso de la clase TextUtils y su método isEmpty, si el campo esta vació retornara verdadero y mostramos un mensaje y le mandamos el foco al campo vació, si el campo no esta vació nos devolvera falso(false)

Ahora para implementar estos métodos nos vamos a nuestra clase activity y lo primero que aremos sera enlazar nuestros controles a la vista

  
public class MainActivity extends AppCompatActivity {
    EditText edtNumero1,edtNumero2,edtcorreo;
    TextView resultado;
    Validaciones  objValidar; //objeto de nuestro clase Validaciones

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //enlazo controles a la vista
        edtNumero1 = findViewById(R.id.edtNumero1);
        edtNumero2 = findViewById(R.id.edtNumero2);
        edtcorreo = findViewById(R.id.edtCorreo);
        resultado = findViewById(R.id.txtresultado);
        objValidar = new Validaciones();
    }


Luego implementaremos los métodos para cada botón de la siguiente manera(asignaremos a cada botón el método correspondiente en el atributo onClick)
  
 //metodo para evento boton Sumar
    public void Sumar(View v){
        //capturo datos editext
        String numero1 = edtNumero1.getText().toString().trim();
        String numero2 = edtNumero2.getText().toString().trim();
        //valido que los editext no esten vacios
        if(!objValidar.Vacio(edtNumero1) && !objValidar.Vacio(edtNumero2) ){
            //valido que los datos ingresados sean numeros
            if(objValidar.isNumeric(numero1) && objValidar.isNumeric(numero2)){
                //si son numeros hago la suma
                int num1 = Integer.parseInt(numero1);
                int num2 = Integer.parseInt(numero2);
                int suma = num1+num2;
                resultado.setText("la suma es :"+suma);
            }
            else{
                //si los  valores no son numericos
                Toast.makeText(getApplicationContext(),"Ingrese Valores Numericos", Toast.LENGTH_SHORT).show();
            }
        }
    }

    //metodo para evento boton validar correo
    public void Validar(View v) {
        //capturo dato de editext
        String correo = edtcorreo.getText().toString().trim();
        //valido que editext no este vacio
        if (objValidar.Vacio(edtcorreo)) {
            //valido si el dato ingresado es un correo
            if (objValidar.isEmail(correo)) {
                Toast.makeText(getApplicationContext(), "El Correo es  Valido", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(getApplicationContext(), "Correo NO Valido", Toast.LENGTH_SHORT).show();
            }
        }
    }

Por medio del objeto que creamos objValidar de nuestra clase Validaciones podremos hacer uso de los métodos que creamos enviando los argumentos correspondientes a cada método para hacer las respectivas validaciones
Capturas

Bueno eso seria todo, les dejo el proyecto para que lo descarguen.
Saludos desde El Salvador...

Descargar Proyecto Android

Si quieren donarme para una soda lo pueden hacer aqui.


miércoles, 15 de mayo de 2019

Crear Login WPF C#

Hola a todos espero se encuentre muy bien, después de mucho tiempo sin actualizar mi blog(por muchas razones, estudio,trabajo, proyectos personales. etc.). Agradezco a todos los que me escriben haciéndome consultas y agradeciendo por compartir mis conocimientos y pues aunque ha pasado mucho tiempo que no subo nada al blog aun me siguen escribiendo y pues aprovecho la ocasión para enviarles un saludo y decirles que de ahora en adelante tratare de ir contestando sus dudas o preguntas que me hacen llegar por medio de este blog. Tratare de estar haciendo entre 1 y 3 artículos al mes.

Bueno después de esta aclaración, vamos a lo que nos apasiona que es programar, en este articulo veremos como crear un Login en WPF usando C# y que este me muestre el nombre del usuario que a iniciado sesión. que es una de las consultas que me hacia un lector de mi blog  así que manos a la obra.

El ejemplo lo he realizado usando SQL SERVER 2014 EXPRESS y VS 2017

La base de datos que ocupare en esta ocasión se llama Usuarios y solo cuenta con una tabla Usuario




Lo primero que aremos sera crear nuestro proyecto WPF en Visual Studio




Creamos el diseño de nuestro formulario
    
<Window x:Class="LoginWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:LoginWPF"
        mc:Ignorable="d"
        Title="LOGIN " Height="400" Width="400" FontSize="14" Background="Black" WindowStartupLocation="CenterScreen">
    <Border Background="WhiteSmoke" CornerRadius="20" Margin="20">
        <StackPanel Margin="20">
            <Label Foreground="Black" FontSize="25" HorizontalAlignment="Center" >
                <Bold> Login</Bold>
            </Label>
            <Separator Background="Black"></Separator>
            <Label Foreground="Blue" >
                <Bold>Usuario</Bold>
            </Label>
            <TextBox Name="txtUsuario" Foreground="Black" FontSize="18"></TextBox>
            <Label Foreground="Blue">
                <Bold> Contraseña</Bold>
            </Label>
            <PasswordBox Name="txtPasword" Foreground="Black" FontSize="18"></PasswordBox>
            <Button Name="btnEntrar" Margin="60 10" Background="#545d6a" Foreground="Black" Height="50" Click="btnEntrar_Click"> Entrar</Button>
        </StackPanel>
    </Border>
</Window>


Ahora que ya tenemos nuestro diseño, agregaremos nuestra cadena de conexión a nuestro archivo App.config(como siempre lo hemos hecho en mis anteriores artículos)
  < connectionStrings> 
    < add name="default"
       connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Usuarios.mdf;Integrated Security=True;User Instance=True"
        providerName="System.Data.SqlClient" />
  < /connectionStrings>   

Lo siguiente que aremos es agregar una clase a nuestro proyecto en donde manejaremos el código de nuestro login para tenerlo de una manera mas ordenado(ademas de ser una de las mejores practicas de POO)



El código que tendrá nuestra clase sera el siguiente
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;

namespace LoginWPF
{
    class Autenticacion
    {
       //variable nos sevira para obtener el nombre de usuario logeado
        public static string Nombre;
        public static bool Autenticar(string usuario, string password)
        {
            //consulta a la base de datos
            string sql = @"SELECT nombre
                          FROM Usuario
                          WHERE usuario = @user AND password = @pass";
            //cadena conexion  definida en AppConfig
            using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["default"].ToString()))
            {
                conn.Open();//abrimos conexion

                SqlCommand cmd = new SqlCommand(sql, conn); //ejecutamos la instruccion
                cmd.Parameters.AddWithValue("@user", usuario); //enviamos los parametros
                cmd.Parameters.AddWithValue("@pass", password);

                //creamos el adaptador

                SqlDataAdapter da = new SqlDataAdapter(cmd);

                DataTable dt = new DataTable();
                da.Fill(dt);
                //valido si encruentra datos
                if (dt.Rows.Count > 0)
                {
                    DataRow row = dt.Rows[0];
                    Nombre = Convert.ToString(row["nombre"]);//guardo el campo nombre de usuario logeado
                    return true;
                }
                else
                    return false;
 
            }
        }
    }
}

Lo primero que hacemos es declarar una variable llamada nombre que nos servirá para obtener el nombre del usuario que inicio sesión. Luego tenemos un método Autenticar de tipo bool que recibe 2 parámetros usuario y password que serán los datos que consultaremos en la bd para verificar si son correctos o no. El método nos retornara verdadero si los datos ingresados son correctos, y si son correctos guarda en la variable Nombre el nombre del usuario que inicio sesión.

 Importante: dentro de esta clase que creamos agregar la referencia System.Configuration

Ahora dentro del evento click del botón entrar tendremos el siguiente código
        private void btnEntrar_Click(object sender, RoutedEventArgs e)
        {
            //validamos datos ingresados llamando nuestro metodo Autenticar de la clase Autenticacion
            if(Autenticacion.Autenticar(txtUsuario.Text,txtPasword.Password))
            {
                //si los datos son correctos muestro nombre de usuario
                MessageBox.Show("Bienvenido:" + Autenticacion.Nombre);
            }
            else
            {
                //si los datos no son correctos
                MessageBox.Show("Ingrese Datos Correctos");
            }

        } 

Como pueden ver lo único que hacemos es invocar el método Autenticar de la clase que creamos Autenticacion y le enviamos como argumentos los datos de las cajas de textbox, si los datos son correctos mostramos un mensaje con el nombre del usuario y si son incorrectos le mostramos un mensaje para que ingrese los datos correctos.



Bueno eso seria todo espero le sea útil, en los próximos artículos estaré poniendo ejemplos de java para android y un poco de php saludos desde El Salvador...

Descargar Proyecto C#

Si quieren donarme para una soda lo pueden hacer aqui.