Web Forms With DotVVM Controls

Introduction

Currently, web pages allow internet users to learn about a particular product or service or how to contact a company, but they can also help collect information about its users and thus establish a data source. This is an important tool for these purposes in the form.

For the design of a form, the most basic way is to use HTML tags to obtain certain required information. Then, it is necessary to use some programming language through some framework to process that information.

With these considerations in mind, in order to fulfill the purpose of collecting and performing certain procedures with a form, we will use DotVVM in this article through ASP.NET Core.

DotVVM Controls

Depending on the technology you are working with, extracting information entered into a form can be carried out through different mechanisms. In the case of DotVVM, the framework has a number of controls or components for various purposes that allow you to design elements for the implementation of forms through HTML and C#.

This communication between HTML (web pages) and C# (source code) is done through the MVVM design pattern (Model, View, Viewmodel). The purpose of these elements are as follows:

The model - is responsible for all application data and related business logic.
The view - gives representations for the end-user of the application model. The view is responsible for displaying the data to the user and allowing manipulation of the application data.
Model-View or View-Model - one or more per view; the model-view is responsible for implementing view behavior to respond to user actions and for easily exposing model data.

Next, we'll look at an example to observe how DotVVM controls work.

DotVVM Form

Considering that a web page in DotVVM consists of a view and also a view-model, let's analyze each of these elements separately.

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);
}
}

For starters, in the model view of the web page, we find two attributes, Title for the page title, and 'Person' an object with the properties of the Person class.

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

In this class, PersonModel, there is an important aspect to mention, these are annotations, in this case, annotations of type [Required], which allow you to set as validation that the specified attributes cannot be null. We can also find other directives to validate the data type of a variable, handle regular expressions, among other cases. For more information on policy validation, we can consult the following source.

Returning to the analysis of the DefaultViewModel, we also find the constructor in which objects and attributes can be initialized:

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

Finally, in this view model, we have a Process method, which aims to process the input of information into a form:

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

In this case, as an exemplification, the AddStartupScript method is used to use a JavaScript statement to launch a message in an alert.

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>

A first important aspect to mention is the display of the contents of a variable on the website.

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

This is a DotVVM control called Literal, and it helps to render text on the page. More information here.

Another of the most useful controls in DotVVM is data binding. This allows us to manage values either to retrieve or assign information. One example is the following:

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

Here, we see how the Username value of the Person object is being used. In this case, through another Validator control, which, as the name implies, allows validations to be performed on the form. For example, the validation is being given according to the annotations of the Username attribute, which for the time being has the annotation [Required] as we saw in the Person class.

Learn more about Validator here and more about Binding here.

Now, in relation to controls for form elements we can have the following example,

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

In this case, the control is TextBox, which becomes the DotVVM version of the tag <input type'"text ... />, with the difference, that here we have the data-bind to load or get the information of an attribute, Pearson.Username in the case of the example.

Learn more about TextBox here.

If we continue along this same line, another control that we can find is the RadioButton, which follows the same principle as the HTML tag only here we can work with data-bind to communicate with the model of the view for the handling of the information.

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

More information about RadioButton here.

What's Next?

With this tutorial article, we learned how to create dynamic forms by implementing views and models of views with controls predefined by DotVVM to work with web pages.

The source code for this implementation can be found in this repository: DotVVM Form Controls.

Want to know the steps to create a DotVVM app? To do this, you can review this article: Steps to Create an MVVM (Model-View-ViewModel) application with DotVVM and ASP.NET Core.

Want to take your first steps towards developing web applications with ASP.NET Core and DotVVM? Learn more in this tutorial: DotVVM and ASP.NET Core: Implementing CRUD operations.

Thank you!

See you on Twitter!! :)