Crear Controlador y Vistas

Ahora que existe el modelo podemos crear el controlador y la vista para administrar la tabla

Paso 1 – Creamos el Controlador, en el Explorador de Soluciones hacemos click con el botón secundario sobre la carpeta Controller y seleccionamos la opción “Agregar -> Controlador…”

En la ventana que aparece seleccionamos la opción “Controlador de MVC 5: en blanco”

En la ventana que aparece ingresamos el nombre del controlador.

Esta acción creará un archivo en la carpeta Controllers llamado PersonasController.cs con el siguiente código:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Comercio.Controllers
{
    public class PersonasController : Controller
    {
        // GET: Personas
        public ActionResult Index()
        {
            return View();
        }
    }
}

También nos creará una carpeta Views/Personas para alojar los archivos de vista para este controlador.

Paso 2 – Comenzaremos con nuestra acción Index para mostrar un listado de Personas

public class PersonasController : Controller
{
    ComercioEntities db = new ComercioEntities();

    // GET: Personas
    public ActionResult Index()
    {
        var personas = db.Persona.ToList();

        return View(personas);
    }
}

ComercioEntities es nuestro objeto creado por Entity Framework para poder acceder a los datos mediante propiedades y funciones, como es en el caso de db.Persona.ToList(); que accediendo al objeto Persona, relacionada a la tabla Persona de la base de datos, obtiene un listado de todos los registros retornando un objeto List<Persona>. Por ultimo retornamos la lista de Persona hacia la vista con return View(personas);

Ahora crearemos las vista para esta acción, en el “Exprorador de Soluciones” hacemos click con el botón secundario del mouse sobre la carpeta Views/Personas y seleccionamos la opción “Agregar -> Vista…”

En la ventana “Agregar vista” ingresamos el nombre Index y presionamos el botón “Agregar”

Luego el archivo Views/Personas/Index.cshtml escribiremos el siguiente código:

@model IList<Persona>
@{
    ViewBag.Title = "Index";
}
<h2>Listado de Personas</h2>
<a href="@Url.Action("Agregar")">Agregar</a>
<hr />
<table class="table">
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Documento</th>
            <th>Sexo</th>
            <th>Fecha de Nacimiento</th>
            <th>Acción</th>
        </tr>
    </thead>
    <tbody>
        @foreach(var persona in Model)
        {
            <tr>
               <td>@persona.Nombre</td>
               <td>@persona.Apellido</td>
               <td>@persona.Documento</td>
               <td>@(persona.Sexo == "M" ? "Masculino" : "Femenino")</td>
               <td>@persona.Fecha_Nacimiento.Value.ToString("dd/MM/yyyy")</td>
               <td>
                   <a href="@Url.Action("Editar", new { Id = persona.PersonaId })" class="btn btn-warning">Editar</a>
                   <a href="@Url.Action("Eliminar", new { Id = persona.PersonaId })" class="btn btn-danger">Eliminar</a>
               </td>
            </tr>
        }
    </tbody>
</table>

Al ejecutar el código vemos una pantalla como la siguiente

Paso 3 – Agregamos funcionalidad a la acción Agregar. Para ello en el controlador PersonasController agregamos la siguientes funciones:

public ActionResult Agregar()
{
    return View();
}

[HttpPost]
public ActionResult Agregar(Persona persona)
{
    if (ModelState.IsValid)
    {
        db.Persona.Add(persona);
        db.SaveChanges();

        return RedirectToAction("Index");
    }

    return View(persona);
}

Creamos una vista para esta acción, de la misma manera que en el paso anterior con el nombre Agregar. Abrimos la nueva vista en Views/Personas/Agregar.cshtml y escribiremos el siguiente código:

@model Persona
@{
    ViewBag.Title = "Agregar";
}

<h2>Agregar Persona</h2>

@using (Html.BeginForm())
{
    <div class="row">
        <div class="col-xs-6">
            <div class="form-group">
                @Html.LabelFor(persona => persona.Nombre, new { @class = "control-label" })
                @Html.TextBoxFor(persona => persona.Nombre, new { @class = "form-control" })
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                @Html.LabelFor(persona => persona.Apellido, new { @class = "control-label" })
                @Html.TextBoxFor(persona => persona.Apellido, new { @class = "form-control" })
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="form-group">
                @Html.LabelFor(persona => persona.Documento, new { @class = "control-label" })
                @Html.TextBoxFor(persona => persona.Documento, new { @class = "form-control" })
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                @Html.LabelFor(persona => persona.Sexo, new { @class = "control-label" })
                @Html.TextBoxFor(persona => persona.Sexo, new { @class = "form-control" })
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="form-group">
                @Html.LabelFor(persona => persona.Fecha_Nacimiento, new { @class = "control-label" })
                @Html.TextBoxFor(persona => persona.Fecha_Nacimiento, new { @class = "form-control" })
            </div>
        </div>
    </div>
    <hr />
    <div class="row">
        <a href="@Url.Action("Index")" class="btn btn-default">Volver</a>
        <input type="submit" value="Guardar" class="btn btn-success" />
    </div>
}

Al ejecutar el proyecto tenemos la siguiente pantalla

Al cargar los campos y presionar el botón Guardar redirecciona a la acción Index para mostrar la nueva persona agregada

Paso 4 – Agregamos funcionalidad a la acción Editar. La diferencia con la anterior acción es que Editar necesita el Id de la persona para poder buscarla en la base de datos y a partir de ahí modificar sus datos. Para ello en el controlador PersonasController agregamos la siguientes funciones

public ActionResult Editar(int Id)
{
    var persona = db.Persona.Find(Id);
    return View(persona);
}

[HttpPost]
public ActionResult Editar(Persona persona)
{
    if (ModelState.IsValid)
    {
        db.Entry(persona).State = System.Data.Entity.EntityState.Modified;
        db.SaveChanges();

        return RedirectToAction("Index");
     }

     return View(persona);
}

Creamos la vista de la acción Editar, de la misma manera que en el paso 2. El código de la vista Editar es muy similar a la vista Agregar, para ello abriremos el archivo Views/Personas/Editar.cshtml y escribiremos el siguiente código:

@model Persona
@{
    ViewBag.Title = "Agregar";
}

<h2>Editar Persona</h2>

@using (Html.BeginForm())
{
    <div class="row">
        <div class="col-xs-6">
            <div class="form-group">
                @Html.LabelFor(persona => persona.Nombre, new { @class = "control-label" })
                @Html.TextBoxFor(persona => persona.Nombre, new { @class = "form-control" })
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                @Html.LabelFor(persona => persona.Apellido, new { @class = "control-label" })
                @Html.TextBoxFor(persona => persona.Apellido, new { @class = "form-control" })
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="form-group">
                @Html.LabelFor(persona => persona.Documento, new { @class = "control-label" })
                @Html.TextBoxFor(persona => persona.Documento, new { @class = "form-control" })
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                @Html.LabelFor(persona => persona.Sexo, new { @class = "control-label" })
                @Html.TextBoxFor(persona => persona.Sexo, new { @class = "form-control" })
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="form-group">
                @Html.LabelFor(persona => persona.Fecha_Nacimiento, new { @class = "control-label" })
                @Html.TextBoxFor(persona => persona.Fecha_Nacimiento, new { @class = "form-control" })
            </div>
        </div>
    </div>
    <hr />
    <div class="row">
        <a href="@Url.Action("Index")" class="btn btn-default">Volver</a>
        <input type="submit" value="Guardar" class="btn btn-success" />
    </div>
}

Al ejecutar el proyecto podremos ingresar a la página Editar del controlador PersonaController. Tener en cuenta que es obligatorio el Id de la persona para poder Editar. Podemos ingresar a Editar desde la acción Index haciendo click en el botón “Editar”

La página Editar quedaría de la siguiente manera

Paso 5 – Agregamos funcionalidad a la acción Eliminar. Esta acción tiene la particularidad que al método POST cambiamos el nombre pero nos referimos a la misma acción con el atributo [HttpPost, ActionName(“Eliminar”)], esto nos permite tener distintos métodos con el mismo parámetro dado que la sobrecarga de métodos de C# no permite 2 métodos con igual nombre e igual parámetro. Para ello en el controlador PersonasController agregamos la siguientes funciones

public ActionResult Eliminar(int Id)
{
    var persona = db.Persona.Find(Id);
    return View(persona);
}

[HttpPost, ActionName("Eliminar")]
public ActionResult ConfirmarEliminar(int Id)
{
    var persona = db.Persona.Find(Id);
    db.Persona.Remove(persona);
    db.SaveChanges();

    return RedirectToAction("Index");
 }

Creamos la vista de la acción Eliminar, de la misma manera que en el paso 2. Abriremos el archivo Views/Personas/Eliminar.cshtml y escribiremos el siguiente código:

@model Persona
@{
    ViewBag.Title = "Eliminar";
}

<h2>Estas seguro en eliminar esta persona</h2>
<div>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Nombre)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Nombre)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Apellido)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Apellido)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Sexo)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Sexo)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Fecha_Nacimiento)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Fecha_Nacimiento)
        </dd>
    </dl>

    @using (Html.BeginForm())
    {
        <div class="form-actions">
            <a href="@Url.Action("Index")" class="btn btn-default">Vovler</a> |
            <input type="submit" value="Eliminar" class="btn btn-danger" />
        </div>
    }
</div>

Al ejecutar el proyecto podremos ingresar a la página Eliminar del controlador PersonaController. Tener en cuenta que es obligatorio el Id de la persona para poder Eliminar. Podemos ingresar a Eliminar desde la acción Index haciendo click en el botón “Eliminar”

La página Eliminar quedaría de la siguiente manera

Al presionar el botón “Eliminar” se eliminará la persona y se redirecionará a la acción Index