APRENDIENDO .NET SOBRE LA MARCHA: ASP.NET

Vamos a crear una sencilla aplicación web basada en .NET con una arquitectura MVC

Primero que nada, aclarando que MVC significa (en inglés) Model-View-Controller, y define un patrón para el diseño de las capas que intervienen dentro de una aplicación. Este patró puede ser aplicado en sistemas para escritorio también. Por lo que procedo con la breve explicación sobre estos tres.

Modelo Define las estructuras para el manejo de la información desde el lado de la aplicación. Sirven para mantener los datos de forma organizada, respetando la forma en que está definida a nivel BD. Puede hacerse modelos con base en las tablas, vistas, resultados devueltos por las consultas y SS. PP.

Vista Corresponde a la parte visual de las aplicaciones. Para el caso web corresponde con las páginas html, cshtml, php, js. Para el caso de aplicaciones de escritorio son las ventanas de éstas. Las vistas suelen hacer uso de los modelos para mantener la estructura de los datos acorde con la estructura interna de los mismos dentro de las BB. DD.

Controlador Es la parte que conecta las vistas con las demás capas que envían/reciben datos, hacen uso de los modelos también. Aunque desde los propios controladores se puede enviar información directamente a la BD y recibirla de vuelta, es mejor añadir una capa específicamente para esos fines; esto es para mejorar la reusabilidad de los componentes, su escalabilidad y seguridad.

La aplicación que realizaremos será muy simple y no incluirá manejo de base de datos. Haré otra publicación donde cubra este aspecto para una aplicación web, misma que servirá para abordar temas de protección de datos. La mini-aplicación que esta vez nos ocupa nos sirve como introducción.

Vamos a crear en una solución limpia un proyecto de tipo Web, y será de tipo ASP.NET Web Application (.NET Framework). Se me ocurrió llamarla test. En la imagen puedes ver la estructura generada para la solución, y ahí verás las carpetas Controllers, Models y Views.

El controlador se llama HomeController y en las vistas hay una carpeta llamada Home. Si abrimos el controlador veremos que tiene tres métodos, y en las vistas habrá una por cada uno de estos. Lo primero será agregar un modelo de datos, después modificamos la vista Index para que pida nombre y edad, y se agregará un botón que llame una acción del controlador, finalmente agregamos el método para la acción en el controlador. A continuación pongo los códigos.

Modelo de datos

public class datosmodelo {
    public string Nombre { get; set; }
    public int Edad { get; set; }
}

Método que responderá a la acción

[HttpPost]
public ActionResult enviardatos(datosmodelo modelo) {
    ViewBag.Nombre = modelo.Nombre;
    ViewBag.Edad = modelo.Edad;
    modelo = new datosmodelo();
    return View("Index", modelo);
}

Código completo de la vista Index.cshtml

@model test.Models.datosmodelo
@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>@ViewBag.Title</h1>
</div>

<div class="row">
    <div class="col-md-4">
        @using (Html.BeginForm("enviardatos", "Home", FormMethod.Post)) {
            @Html.TextBoxFor(m => m.Nombre, Model.Nombre)
            @Html.TextBoxFor(m => m.Edad, Model.Edad.ToString(), new { @class = "form-control" })
            <button type="submit" id="btnEnviar" class="btn btn-lg btn-primary"><span class="glyphicon glyphicon-send"></span>Enviar</button>
        }
    </div>
    <div class="col-md-4">

    </div>
    <div class="col-md-4">
        Nombre: @ViewBag.Nombre <br />
        Edad: @ViewBag.Edad
    </div>
</div>

Agradezco los comentarios que puedan hacerme, así como el que se suscriban para recibir noticias y, si consideran útil, compartir mi blog.