Web Forms With DotVVM Business Pack

Today, the innovation in .NET is to integrate all Microsoft development tools, libraries, languages, technologies, purposes, under the same framework. In this sense, there are several tools and controls available for performing applications with .NET. These tools make it easy for us to build applications by using their already established controls and components. One of these tools is DotVVM.

In a previous article, we were able to learn how to design forms with the base controls that DotVVM offers: Web forms with DotVVM controls.

This time we will learn in the same way how to design web forms with DotVVM (with C# and HTML), but using the premium controls that DotVVM offers, in this case, called Business Pack.

Design Pattern - Model, View, ViewModel - MVVM

DotVVM is based on the Design Pattern Model, View, ViewModel over .NET for communication between HTML (web pages) and C# (source code). The purpose of these parts are as follows,

The model. — is responsible for all application data and related business logic.
The view. — 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.

Acquire DotVVM Business Pack

DotVVM Business Pack is nothing more than a private NuGet, in which, we can make use of the competent premiums already established for the construction of web applications in the business field.

To install the Business Pack version, in addition to obtaining the corresponding license (there is a trial version), it is necessary to perform a configuration of a few minutes to be able to use these functionalities. The steps to add the private NuGet can be consulted at the following link.

Create a DotVVM project with Business Pack in Visual Studio 2019

To create a project with the Business Pack option in DotVVM from Visual Studio 2019, we'll start by creating the DotVVM project like any other,

By specifying the name and continuing, the project initialization wizard will give us a number of options to add certain functionality to the project. In this case, the functionality we are interested in is the DotVVM Business Pack located in the DotVVM Commercial Extensions section,

DotVVM Form with Business Pack

To exemplify the use of DotVVM Business Pack components, we have a small application like this,

Considering that this website in DotVVM consists of a view and its corresponding model view, let's look at the most important parts as a whole of these elements.

View

@viewModel BPFormControls.ViewModels.DefaultViewModel, BPFormControls
@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">
<bp:Window IsDisplayed="{value: IsWindowDisplayed}"
HeaderText="Form"
CloseOnEscape="false"
CloseOnOutsideClick="false">
<h1 align="center"><p><b>Pearson Form</b>.</p></h1>
<div Validator.Value="{value: Person.Username}"
Validator.InvalidCssClass="has-error"
Validator.SetToolTipText="true"
class="page-input-box">
<b>Username:</b>
<br />
<bp:TextBox Text="{value: Person.Username}"
UpdateTextAfterKeydown="true"
Type="Normal"
Placeholder="Insert your username..."
AutoFocus="true"
style="width: 80%;" />
</div>
<p />
<div Validator.Value="{value: Person.EnrollmentDate}"
Validator.InvalidCssClass="has-error"
Validator.SetToolTipText="true"
class="page-input-box">
<b>EnrollmentDate:</b>
<br />
<bp:DateTimePicker SelectedDateTime="{value: Person.EnrollmentDate}"
HourText="Hours"
MinuteText="Minutes"
SecondText="Seconds"
AmPmDesignatorText="AM/PM"
style="width: 80%;" />
</div>
<p />
<div Validator.Value="{value: Person.EnrollmentDate}"
Validator.InvalidCssClass="has-error"
Validator.SetToolTipText="true"
class="page-input-box">
<b>Gender:</b>
<br />
<bp:RadioButton CheckedItem="{value: Person.Gender}"
CheckedValue="Male"
Text="Male" />
<bp:RadioButton CheckedItem="{value: Person.Gender}"
CheckedValue="Female"
Text="Female" />
</div>
<p />
<b>About:</b>
<br />
<bp:TextBox Text="{value: Person.About}"
Type="MultiLine"
Placeholder="Enter information about you..."
class="page-input" style="width: 80%;" />
<p />
<b>Profile Picture:</b>
<br />
<bp:FileUpload Data="{value: ProfilePicture}"
AllowMultipleFiles="false"
UploadCompleted="{command: ProcessFile()}"
class="page-input" style="width: 80%;" />
<p />
<bp:Button Text="Process"
Click="{command: Process()}"
style="width: 80%;"/>
<p />
</bp:Window>
<bp:Button Text="Start form"
Click="{command: IsWindowDisplayed = true}" />
</div>
</dot:Content>

ViewModel

public class DefaultViewModel : MasterPageViewModel
{
public string Title { get; set; }
public PersonModel Person { get; set; } = new PersonModel { EnrollmentDate = DateTime.UtcNow.Date };
public bool IsWindowDisplayed { get; set; }
public UploadData ProfilePicture { get; set; } = new UploadData();
public DefaultViewModel()
{
Title = "Person Form";
}
public void Process()
{
this.IsWindowDisplayed = false;
String script = "alert('" + "Welcome" + " " + Person.Username + " to Web App :) ')";
Context.ResourceManager.AddStartupScript(script);
}
public void ProcessFile()
{
// do what you have to do with the uploaded files
String script = "alert('" + "ProcessFile() was called.')";
Context.ResourceManager.AddStartupScript(script);
}
}

Model

public class PersonModel
{
[Required]
public string Username { get; set; }
[Required]
public DateTime EnrollmentDate { get; set; }
[Required]
public string Gender { get; set; }
public string About { get; set; }
}

The first element we will analyze is the Window component, which represents a modal dialog window, as in HTML. This control allows us to customize directly from its attributes as the window will be displayed. If we were working with DotVVM's base controls, to achieve this functionality we would have to make use of some Javascript functionalities directly to set the window. In this example, the window title can be assigned. We can also customize certain properties, such as not allowing the window to close by pressing the Escape key or clicking outside the window box. In this example, the Boolean attribute IsWindowDisplayed, according to its value of true or false, will allow whether or not to display the set window.

<bp:Window IsDisplayed="{value: IsWindowDisplayed}"
HeaderText="Form"
CloseOnEscape="false"
CloseOnOutsideClick="false">

This is the definition of the IsWindowDisplayed attribute for the window display,

public bool IsWindowDisplayed { get; set; }

To display the window, a button is used. This button is also another of the Business Pack components. The premium version allows us to make certain customizations in terms of its styles, for example, enable/disable the button, assign an icon, among other functionalities.

The result is as follows,

When loading the window, we see how the cursor is positioned in the text box intended for the Person's Username attribute, this property is called AutoFocus, and is part of the premium component TextBox.

<bp:TextBox Text="{value: Person.Username}"
UpdateTextAfterKeydown="true"
Type="Normal"
Placeholder="Insert your username..."
AutoFocus="true"
style="width: 80%;" />

Among the features of this component, one of the most relevant is the Type property. This allows us to specify whether the component is of type text, password, or textarea. For example, in the case of the application, the About section of the Person through the MultiLine type looks like this:

<bp:TextBox Text="{value: Person.About}"
Type="MultiLine"
Placeholder="Enter information about you..."
class="page-input" style="width: 80%;" />

Continuing the analysis of this form, we will now review the DatePicker component, a premium control that allows us to work with dates and times through established designs. In this case, the component looks something like this,

Business Pack components generally have a greater number of properties that allow us to customize controls. In this case, in the DateTimePicker, we can adjust for example the time format (AM/PM or 24-hour format), set icons, adjust the start day of the week, among others.

Finally, the last component we will analyze is FileUpload, another of the exclusive controls of the Business Pack tools that allows us to upload files from a form, to process them and fulfill some specific objective. In this case, the control can be useful for loading the profile picture of a particular user.

To work with files, an image for example can be dragged to the upload section or through a search by means of the operating system directories.

<bp:FileUpload Data="{value: ProfilePicture}"
AllowMultipleFiles="false"
UploadCompleted="{command: ProcessFile()}"
class="page-input" style="width: 80%;" />

There are certain functionalities that can be considered in this control, for example, specifying whether one or more files can be loaded through the AllowMultipleFiles property, performing a particular action when the file has been uploaded through the UploadCompleted property, among others.

What's next?

With this article, we learned certain features of DotVVM premium components through its Business Pack. We've also seen how to create dynamic forms by implementing views and models of views with DotVVM-defined controls for working with web pages.

The source code for this implementation is available in this repository: DotVVM Business Pack.

Additional resources

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

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

Thank you!

If you have any concerns or need help in something particular, it will be a pleasure to be able to help.

See you on Twitter!! :)