Lesson 2 - Bind Data Editors

• Jul 16, 2021
• 4 minutes to read

In the previous lesson, you created a basic layout for the registration form. In this lesson, you will develop a View Model for it. Open the previous project (if you skipped Lesson 1, open the RegistrationForm.Lesson1 project in the DXEditorsTutorial example).

Open the RegistrationViewModel.cs file and add the following properties to the RegistrationViewModel class.

C#

[POCOViewModel]
public class RegistrationViewModel {
    public static RegistrationViewModel Create() {
        return ViewModelSource.Create(() => new RegistrationViewModel());
    }
    protected RegistrationViewModel() {
        if(this.IsInDesignMode())
            InitializeInDesignMode();
        else InitializeInRuntime();
    }
    void InitializeInDesignMode() {
        FirstName = "John";
        LastName = "Smith";
        Email = "[e-mail]";
        Password = "Password";
        ConfirmPassword = "Password";
        Birthday = new DateTime(1980, 1, 1);
        Gender = 1;
    }
    void InitializeInRuntime() {
        Birthday = null;
        Gender = -1;
    }

    public virtual string FirstName { get; set; }
    public virtual string LastName { get; set; }
    public virtual string Email { get; set; }
    public virtual string Password { get; set; }
    public virtual string ConfirmPassword { get; set; }
    public virtual DateTime? Birthday { get; set; }
    public virtual int Gender { get; set; }
}

VB.NET

<POCOViewModel>
Public Class RegistrationViewModel
    Public Shared Function Create() As RegistrationViewModel
        Return ViewModelSource.Create(Function() New RegistrationViewModel())
    End Function
    Protected Sub New()
        If Me.IsInDesignMode() Then
            InitializeInDesignMode()
        Else
            InitializeInRuntime()
        End If
    End Sub
    Private Sub InitializeInDesignMode()
        FirstName = "John"
        LastName = "Smith"
        Email = "[e-mail]"
        Password = "Password"
        ConfirmPassword = "Password"
        Birthday = New Date(1980, 1, 1)
        Gender = 1
    End Sub
    Private Sub InitializeInRuntime()
        Birthday = Nothing
        Gender = -1
    End Sub

    Public Overridable Property FirstName() As String
    Public Overridable Property LastName() As String
    Public Overridable Property Email() As String
    Public Overridable Property Password() As String
    Public Overridable Property ConfirmPassword() As String
    Public Overridable Property Birthday() As Date?
    Public Overridable Property Gender() As Integer
End Class

Since the RegistrationViewModel is a POCO class, all defined properties are bindable.

Notice how the InitializeInRuntime method initializes properties.

The DateTime struct is a value type, so the Birthday field makes use of a Nullable DateTime. With a non-nullable type, the Birthday field would be initialized into a specific value – something you ought to avoid.

The Gender field equals to -1. Since this value is invalid in the database, it should be converted to 0.

The Register button invokes registration logic from a command.

C#

[POCOViewModel]
public class RegistrationViewModel {
    ...
    public void AddEmployee() {
        EmployeesModelHelper.AddNewEmployee(FirstName, LastName, Email, Password, Birthday.Value, Gender);
    }
}

VB.NET

<POCOViewModel>
Public Class RegistrationViewModel
    '...
    Public Sub AddEmployee()
        EmployeesModelHelper.AddNewEmployee(FirstName, LastName, Email, Password, Birthday.Value, Gender)
    End Sub
End Class

Rebuild the project. Open the designer and bind the First Name editor to a corresponding property in the underlying view model: select the TextEdit element of the First Name layout item, open its Smart Tag, find the BaseEdit.EditValue property and click the Binding button.

Double-click the FirstName property twice to create a binding with the default settings. It is unnecessary to customize binding parameters for this lesson, however you can easily do so by clicking Generate binding. A menu is invoked with several binding customization options, including setting a value converter, binding mode, etc.

Once FirstName binding is created, test data is displayed in the FirstName box.

Bind the remaining editors to their corresponding properties and the Register button to the AddEmployee command. The following XAML is the result of applying these steps.

XAML

<dxlc:LayoutControl Orientation="Vertical" ItemStyle="{StaticResource itemStyle}" ItemSpace="10">
    <dxlc:LayoutGroup ItemSpace="10">
        <dxlc:LayoutItem Label="Name">
            <dxe:TextEdit EditValue="{Binding FirstName}" />
        </dxlc:LayoutItem>
        <dxe:TextEdit VerticalAlignment="Bottom" EditValue="{Binding LastName}" />
    </dxlc:LayoutGroup>
    <dxlc:LayoutItem Label="Email">
        <dxe:TextEdit EditValue="{Binding Email}" />
    </dxlc:LayoutItem>
    <dxlc:LayoutItem Label="Create a password">
        <dxe:PasswordBoxEdit EditValue="{Binding Password}" />
    </dxlc:LayoutItem>
    <dxlc:LayoutItem Label="Confirm your password">
        <dxe:PasswordBoxEdit EditValue="{Binding ConfirmPassword}" />
    </dxlc:LayoutItem>
    <dxlc:LayoutItem Label="Birthday">
        <dxe:DateEdit EditValue="{Binding Birthday}" />
    </dxlc:LayoutItem>
    <dxlc:LayoutItem Label="Gender">
        <dxe:ComboBoxEdit EditValue="{Binding Gender}" />
    </dxlc:LayoutItem>
    <Button Content="Register" HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="80" 
            Command="{Binding AddEmployeeCommand}" />
</dxlc:LayoutControl>

When you run the application, the empty form is shown.