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.