CSLA: Step-by-Step – Simple Data binding

Hi, I’m Pieter van der Westhuizen, a freelance web and mobile developer from South Africa and the founder of Coalition Software, bringing nearly 30 years of experience to the craft.

The Customer Form

We’ll create a simple data entry form, with which to edit/add and delete customers. In your NorthwindTraders.UI project add a new form called frmCustomers.
Next, we need to add a new data source to our UI project. Click on the datasource window, and select Add New Datasource. (If you don’t see the Datasource window,
try pressing Alt+Shift+D, this should bring up the Datasources window)

Once you’ve clicked add new datasource,Select Object and click Next.

Click on the + sign next to NorthwindTraders.Library and select the Customer object. (If you don’t see NorthwindTraders.Library in the list, you haven’t added a reference to it)
Click Finish.

Now comes the extremely easy and fun part, start dragging the fields onto your form. You can remove the CustomerBindingNavigator, that it automatically adds to the form, we wont be using it for this tutorial.

Now, what this form will do is give the user a list of customers in the top combo box, when the user select the customer, the customer’s details will be shown below.
To display the list of customers, we first need to create a NameValueList, named nvlCustomers or something similar, in our NorthwindTraders.Library project.

After adding the new NameValueList to the project, re-build it. It should now show up in the list when you add it as a new datasource. Add it as a new datasource to your UI project.
Next, add a new BindingSource to your form and call it NvlCustomersBindingSource, make it’s Datasource nvlCustomers.

Next, change the combobox’s datasource to NvlCustomersBindingSource, set the DisplayMember to Value, and the ValueMember to Key.

Add the following code to your form’s Load event, and the Combobox’s SelectedIndexChanged event:

Private _customer As NorthwindTraders.Library.Customer

Private Sub frmCustomer_Load( ByVal sender As System . Object , ByVal e As System . EventArgs ) Handles MyBase.Load
NvlCustomersBindingSource.DataSource \= NorthwindTraders.Library.nvlCustomers.GetnvlCustomers
End Sub

Private Sub CustomerComboBox_SelectedIndexChanged( ByVal sender As System . Object , ByVal e As System . EventArgs ) Handles CustomerComboBox.SelectedIndexChanged
_customer \= NorthwindTraders.Library.Customer.GetCustomer(CustomerComboBox.SelectedValue)
CustomerBindingSource.DataSource \= _customer
End Sub

When you build an run the project, and you select the customer in the dropdown box, it should display the customer’s details below.

And there you go, can it be any easier? Next time, we’ll look at a bit more complex binding. Saving and deleting records, as well as a quick look at how to enforce your object’s validation rules on the UI.

I hope this quick and short tutorial was helpful, remember to please send me an email or post a comment if I missed something or you would like to see something specific.

Until next time…keep coding!

CSLA: Step-by-Step – Simple Data binding

More from this blog

A Study in Flutter: Dynamic Forms

Introduction to CSharp2Dart.com

Searching Azure Blob Storage using Blob Index

Using AWS Cognito with Vue/NuxtJS

Using AWS Cognito with Xamarin Forms

The Customer Form

Command Palette

More from this blog

The Customer Form