Creación de formularios para páginas web con los controles de DotVVM

En la actualidad, una página web permite a los usuarios de internet saber sobre un producto o servicio determinado, cómo contactar a una empresa, pero también puede ayudar a recabar información sobre sus usuarios y de esta manera establecer una fuente de datos. Una importante herramienta para este objetivo es el formulario.

Para la construcción de un formulario, la forma más básica es emplear etiquetas HTML para para obtener cierta información requerida. Posteriormente, es necesario emplear algún lenguaje de programación a través de algún framework para procesar esa información.

Teniendo en cuenta estas consideraciones, para cumplir con el objetivo de recabar la información de un formulario y realizar cierto procedimiento con estos, emplearemos en este articulo DotVVM a través de ASP.NET Core.

DotVVM Controls

Dependiendo la tecnología con la que se este trabajando, extraer la información introducida en un formulario se puede llevar a cabo a través de diferentes mecanismos para lograr este propósito. En el caso de DotVVM, el framework posee una serie de controles o componentes para varios propósitos que permiten diseñar elementos para la implementación de formularios a través de HTML y C#.

Esta comunicación entre HTML (páginas web) y C# (código fuente) se lleva a cabo a través del patrón de diseño MVVM (Modelo, Vista, Vistamodelo). La finalidad de estos elementos son los siguientes:

• El modelo. — es responsable de todos los datos de la aplicación y de la lógica de negocios relacionada.
• La vista. — Representaciones para el usuario final del modelo de la aplicación. La vista es responsable de mostrar los datos al usuario y de permitir la manipulación de los datos de la aplicación.
• El Modelo-Vista o Vista-Modelo. — uno o más por vista; el modelo-vista es responsable de implementar el comportamiento de la vista para responder a las acciones del usuario y de exponer los datos del modelo fácilmente.

A continuación, veremos un ejemplo para observar el funcionamiento de los controles de DotVVM.

Formulario DotVVM

Teniendo en cuenta que una página web en DotVVM esta conformada por una vista y también por un modelo-vista, analicemos por separado cada uno de estos elementos.

Viewmodel

public class DefaultViewModel : MasterPageViewModel
{
    public string Title { get; set;}
    public PersonModel Person { get; set; } = new PersonModel { EnrollmentDate = DateTime.UtcNow.Date };


    public DefaultViewModel()
    {
        Title = "Person Form";
    }

    public void Process()
    {
        String script = "alert('" + "Welcome" + " " + Person.Username + " to Web App :) ')";
        Context.ResourceManager.AddStartupScript(script);
    }

}

Para empezar, en el vista-modelo de la página web nos encontramos con dos atributos, Title para el título de la página y Person un objeto con las propiedades de la clase persona.

public string Title { get; set;}
public PersonModel Person { get; set; } = new PersonModel { EnrollmentDate = DateTime.UtcNow.Date };

En esta clase, PersonModel, hay un aspecto importante por mencionar, se trata de las anotaciones, en este caso, las de tipo [Required], los cuales permiten establecer como validación que los atributos especificados no pueden ser nulos. Asimismo, podemos encontrar otras directivas para validar el tipo de dato de una variable, manejar expresiones regulares, entre otros casos. Para más información sobre validación con directivas podemos consultar la siguiente fuente: https://docs.microsoft.com/en-us/aspnet/mvc/overview/older-versions-1/models-data/validation-with-the-data-annotation-validators-cs.

Regresando al análisis del DefaultViewModel, tambien nos encontramos con el constructor en el cual los objetos y atributos pueden ser inicializados:

public DefaultViewModel()
{
    Title = "Person Form";
}

Finalmente, en este modelo de la vista, tenemos un método Process, el cual tiene como objetivo procesar la entrada de información en un formulario:

public void Process()
{
    String script = "alert('" + "Welcome" + " " + Person.Username + " to Web App :) ')";
    Context.ResourceManager.AddStartupScript(script);
}

En este caso, a modo de ejemplificación, se emplea el método AddStartupScript para emplear una sentencia JavaScript para lanzar un mensaje en una alerta.

View

@viewModel DotVVMControls.ViewModels.DefaultViewModel, DotVVMControls
@masterPage Views/MasterPage.dotmaster
<dot:Content ContentPlaceHolderID="MainContent">

    <h1 align="center">
        <img src="UserIcon.png" width="20%" height="20%" />
        <br />
        <b>{{value: Title}}</b>
    </h1>

    <div align="center">

        <div Validator.Value="{value: Person.Username}"
             Validator.InvalidCssClass="has-error"
             Validator.SetToolTipText="true"
             class="page-input-box">
            <b>Username:</b>
            <br />
            <dot:TextBox Text="{value: Person.Username}" style="border: 1px solid #4a4d55; font-size: 1.1em;" />
        </div>

        <p />

        <div Validator.Value="{value: Person.EnrollmentDate}"
             Validator.InvalidCssClass="has-error"
             Validator.SetToolTipText="true"
             class="page-input-box">
            <b>EnrollmentDate:</b>
            <br />
            <dot:TextBox Text="{value: Person.EnrollmentDate}"
                         ValueType="DateTime"
                         FormatString="dd/MM/yyyy"
                         class="page-input"
                         style="border: 1px solid #4a4d55; font-size: 1.1em;" />
        </div>

        <p />

        <div Validator.Value="{value: Person.EnrollmentDate}"
             Validator.InvalidCssClass="has-error"
             Validator.SetToolTipText="true"
             class="page-input-box">
            <b>Gender:</b>
            <br />
            <dot:RadioButton id="Male" CheckedItem="{value: Person.Gender}" style="border: 1px solid #4a4d55; font-size: 1.1em;" style="border: 1px solid #4a4d55; font-size: 1.1em;" />
            <label for="Male">Male</label>
            <dot:RadioButton id="Female" CheckedItem="{value: Person.Gender}" style="border: 1px solid #4a4d55; font-size: 1.1em;" />
            <label for="Female">Female</label>
        </div>

        <p />

        <b>About:</b>
        <br />
        <dot:TextBox Text="{value: Person.About}" Type="MultiLine" class="page-input" style="border: 1px solid #4a4d55; font-size: 1.1em;" />

        <p />

        <dot:Button Text="Process" Click="{command: Process()}" class="page-button" style="background-color: #004C88; border: 2px solid ; color: #fff; font-weight: 600; padding-left: 2em; padding-right: 2em; font-size: 1rem;" />

        <p />

    </div>

</dot:Content>

Un primer aspecto importante por mencionar es la visualización del contenido de una variable en la página web:

<b>{{value: Title}}</b>

Este es un control DotVVM llamado Literal, y es de ayuda para para representar un texto en la página. Más información en: https://www.dotvvm.com/docs/controls/builtin/Literal/2.0.

Otro de los controles más útiles en DotVVM es el enlace de datos o Binding por su nombre en inglés. Este nos permite manejar valores ya sea para recuperar o asignar información. Un ejemplo es el siguiente:

<div Validator.Value="{value: Person.Username}"
             Validator.InvalidCssClass="has-error"
             Validator.SetToolTipText="true"
             class="page-input-box">

Aquí vemos como el valor de Username del objeto Person esta siendo utilizado. En este caso, a través de otro control Validator, el cual, como su nombre lo indica, permite realizar validaciones al formulario. Para el ejemplo, la validación se esta dando de acuerdo a las anotaciones del atributo Username, el cual de momento tiene la anotación [Required] como vimos en la clase de Person.

Mas información sobre Validator en: https://www.dotvvm.com/docs/controls/builtin/Validator/latest. Y sobre Binding: https://www.dotvvm.com/docs/tutorials/basics-binding-syntax/2.0.

Ahora, en relación con los controles para elementos de formularios podemos tener el siguiente ejemplo:

dot:TextBox Text="{value: Person.Username}" />

En este caso el control es TextBox, que viene a ser la versión de DotVVM de la etiqueta <input type="text … />, con la diferencia que aquí tenemos el data-bind para cargar u obtener la información de un atributo, Pearson.Username en el caso del ejemplo.

Más información sobre TextBox: https://www.dotvvm.com/docs/controls/builtin/TextBox/latest.

Si seguimos en esta misma línea, otro control que podemos encontrar es el RadioButton, el cual sigue el mismo principio que la etiqueta HTML solo que aquí podemos trabajar con data-bind para comunicarnos con el modelo de la vista para el manejo de la información:

<dot:RadioButton id="Female" CheckedItem="{value: Person.Gender}" />
<label for="Female">Female</label>

Más información de RadioButton: https://www.dotvvm.com/docs/controls/builtin/RadioButton/latest.

¿Qué sigue?

Con este articulo tutorial hemos aprendido como crear formularios dinámicos a través de la implementación de vistas y modelos de las vistas con los controles predefinidos por DotVVM para trabajar con páginas web.

El código fuente de esta implementación se lo puede encontrar en este repositorio: DotVVM Form Controls.

¿Deseas saber cuáles son los pasos para crear una aplicación DotVVM? Para ello puedes revisar este articulo: Pasos para crear una aplicación MVVM (Model-View-Viewmodel) con DotVVM y ASP.NET Core.

¿Quieres dar tus primeros pasos en el desarrollo de aplicaciones web con ASP.NET Core y DotVVM? Aprende mas en este tutorial: DotVVM y ASP.NET Core: Implementación de operaciones CRUD.

¡Gracias!
Nos vemos en Twitter!! :)