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