Hello World (y un poco mas) sobre ASP.NET MVC

Hola

Después de haber hablado sobre qué es ASP.NET MVC creo que irá bien practicar un poco. Este post tiene como objetivo crear nuestra primera aplicación “Hola Mundo”, ver cuales son los principales componentes en la solución y, por último, completar la aplicación para gestionar información de base de datos.

Lo primero es descargar ASP.NET MVC e instalarlo en nuestro entorno de desarrollo. Una vez instalado aparece en Visual Studio nuevos templates de creación de proyectos.

La solución de ejemplo que haremos en este laboratorio lo podéis descargar de aquí.

Crearemos un nuevo proyecto de tipo “ASP.NET MVC Application”.

Solucion

Lo primero que podemos observar es que la solución se crea con una estructura que separa los modelos, los controladores y las vistas.

Solución

Además, por defecto, la aplicación ya viene con una página Default, About, pantallas de Login y creación de usuarios. Lo único que deberíamos hacer para hacerlo funcionar automáticamente es definir la cadena de conexión en el web.config. La siguiente imagen muestra una de estas páginas y lo mejor es que ya funciona!!

Users

A continuación crearemos un controlador para gestionar la url /HolaMundo/RecuperarTexto. El significado de la url es “pido la acción RecuperarTexto del controlador HolaMundo”.

Añadimos un nuevo Controller llamado HolaMundoController.

image

Definimos la acción RecuperarTexto para devolver un texto determinado.

public ActionResult RecuperarTexto()

{ return Content("Hola mundo"); }

Existen diferentes resultados que podemos devolver en una acción.

  1. ViewResult – Código HTML  (Resultado, por ejemplo, de renderizar un aspx)
  2. RedirectResult – Redirección a nueva URL
  3. RedirectToRouteResult – Redirección a otra acción del controller
  4. JsonResult – Resultado de tipo Json para ser utilizado en AJAX.
  5. ContentResult – Texto
  6. EmptyResult

El resultado de llamar a la URL es

image

El siguiente paso será crear una serie de controladores para poder ver una lista de Personas (de una base de datos SQL Server) y ver el detalle de una en particular.

Creamos un nuevo modelo para gestionar la información de la persona. El modelo puede ser una clase, un dataset,… nosotros vamos a trabajar con una entidad Linq-To-Sql dónde arrastraremos las tablas de Personas e Información de contacto (para futuros posts).

image

En la siguiente imagen podemos ver el diagrama de las dos tablas.

image

Además del modelo Personas crearemos un clase patrón Repository con el objetivo de centralizar la tecnología de acceso a datos en esta clase y no tener descentralizada por la aplicación las consultas Linq. De este modo creamos en la carpeta Models una clase PersonasRepository y añadimos todos los métodos necesario de acceso a datos: RecuperarTodos, RecuperarPorId, Insertar y Eliminar. Cada método contiene la consulta Linq asociada.

public class PersonasRepository
{
    private PersonasDataContext db = new PersonasDataContext();

    public IQueryable<Persona> RecuperarActivas()
    {
        return from persona in db.Personas
                   where persona.Deleted == false
                   orderby persona.Apellido
                   select persona;
    }

    public Persona RecuperarPorId(int idPersona)
    {
        return db.Personas.SingleOrDefault(d => d.IDPersona == idPersona);
    }

    public void Añadir(Persona persona)
    {
        db.Personas.InsertOnSubmit(persona);
    }
    public void Eliminar(Persona persona)
    {
        db.InformaciónContactos.DeleteAllOnSubmit(persona.InformaciónContactos);
        db.Personas.DeleteOnSubmit(persona);
    }

    public void Guardar()
    {
        db.SubmitChanges();
    }
}

El siguiente paso será crear Controller y Views para ver una lista de personas y poder ver el detalle.

Creamos un nuevo Controller siguiendo los pasos anteriores para crear el PersonasController. La clase contiene una acción llamada VerPersonas que recupera todas las personas de la base de datos y las envía a la página que hará de View. Para crear el View vemos que podemos hacer botón derecho sobre el código del controller y seleccionar “Add View” directamente como muestra la siguiente imagen.

image

Durante el proceso de añadir el View nos permite seleccionar varias opciones como puede ser el nombre del view y, lo mejor, una presentación determinada para el modelo como puede ser mostrarlo en una lista (grid), en un detalle, etc. Escogeremos ver el modelo en formato vista y automáticamente se creará una página con un grid y todos las columnas creadas del modelo Personas (Impresionante).

image

Como ejemplo aquí podemos ver parte del código que se genera automáticamente para formar el grid.

<% foreach (var item in Model) { %>
    
        <tr>
            <td>
           <%= Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) %> |
           <%= Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ })%>
            </td>
            <td>
                <%= Html.Encode(item.IDPersona) %>
            </td>
            <td>
                <%= Html.Encode(item.Nombre) %>
            </td>
            <td>
                <%= Html.Encode(item.Apellido) %>
            </td>
        </tr>
    
    <% } %>

En este momento si arrancamos la aplicación y, tras ver que ya teníamos página Home, About, etc. ya funcionando, podemos entrar en la URL Personas/VerPersonas y el resultado es el siguiente. La URL es enroutada al controller Personas. El controlador gestiona la acción VerPersonas recuperando de la base de datos la lista y pasándola al View asociado que en este caso es ListaPersonas.aspx. La página presenta el modelo en un grid y devuelve el html.

image

Por último haremos que la acción Edit del grid sea gestionado por el controlador para editar los datos de la persona seleccionada.

Editamos el código aspx para cambiar el nombre de la acción que viene por defecto y para enviar además el idPersona al Controller. Hay que fijarse en el detalle del Intellisense sobre el modelo en el aspx jejeje.

image

Añadimos la acción en el controlador

public ActionResult DetallePersona (int idPersona)
{
     PersonasRepository svc = new PersonasRepository();
     Persona persona = svc.RecuperarPorId(idPersona);

     return View("DetallePersona", persona);
}

Con el botón derecho sobre el controller hacemos “Add View” para añadir la vista del detalle de una persona. Esta vez en vez de List elegiremos “Edit” como página prederminada. Como antes, a partir del modelo se creará una página de edición sobre todos los campos.

image

El resultado de la página al hacer Edit sobre el grid de Personas es

image

Siguiendo estos pasos y añadiendo acciones en los controladores para gestionar las acciones de Save y Details podemos tener creada una página de gestión de datos de forma sencilla y clara. Tras editar la Master Page, los estilos y muy poco más tendremos la aplicación lista para publicar.

En siguientes Post veremos como realizar Unit Test sobre una aplicación creada con ASP.NET MVC, great!!!

Saludos, Garrin.

Una respuesta a Hello World (y un poco mas) sobre ASP.NET MVC

  1. kicu dice:

    Tio, eres una máquina!
    A ver si puedo aportar algo algun día…
    Es super interesante, felicidades por tener la novia que tienes y que te haya obligado a crear un blog!

    Un abrazo,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: