1.5 Running the application

Let’s go ahead and build the solution. If everything has been set up and run correctly, you should get no build errors. For the legacy WebForms and WCF projects you may see a warning about conflicts between different versions of the same dependent assembly. To get rid of these warnings, you can double-click on them in the Error List window, and select to add binding redirects to the corresponding web.config file, as follows.

In order to debug the application we need to open solution properties, and set a startup project or multiple startup projects for multi-tier applications. For example, to run a Blazor Server application you can select the Client.Blazor.Server project as a startup project, but to run a multi-tier WPF application with a middle tier exposed via REST API you need to set the Start action on both the Client.Wpf and Services.Rest projects, as shown below.

Let’s set up the Blazor Server project as the startup project, and hit F5 to start the application in the Debug mode. Your browser should launch the home screen of the web application with a top level menu. The menu will have a sub-menu for our Sales module, which contains menu options to open the search form for sales orders, and a form to create new sales orders.

Let’s click on the Sales Order List menu to see the generated search form for sales orders. As you can see below, the Sales Order List form has a collapsible section where you can specify criteria by all of the sales order fields, each having an operator selection for maximum flexibility.

At the bottom of the form lies the results grid with paged results displaying all sales order fields as columns. The grid supports multi-column sorting of the results by clicking on the corresponding columns. It will then display a sort indicator with an up/down for the sort order. Clicking on a sorted column will change the sort direction, while clicking on another column with a Ctrl key down will add or remove that column as a secondary sort column with a smaller indicator.

The grid pager shows the number of items on the current page out of the total number of matching results, and allows changing the number of items to display on one page. There is also a neat search criteria summary right above the grid, that shows the currently applied criteria. If you want to save the current criteria, so that you could retrieve this list faster, you can click on the PermaLink link next to the Reset button, and bookmark the resulting page.

Notice that the Sales Order Id column is hidden, but the first column has a link to the details view. Let’s click on that link to view or edit the sales order details. Again, the details view displays all fields of the sales order in two columns, as well as two tabs for its child lists - sales order details and sales reasons. Note that required fields are automatically highlighted with bold labels here. If you clear some required fields, then you’ll notice an asterisk next to the view title indicating that the view has been modified. If you try to save it, you’ll see validation errors displayed in red at the top, and the invalid fields will be also highlighted with the error message as a tooltip, as shown below.

If you try to close the modified details view then you’ll get a warning about unsaved changes, where you can either discard the changes and close the view, or cancel and keep the view open.

As you can see, with virtually no effort we were able to generate some basic, but pretty powerful, search and details forms out of the box. Granted that such basic forms will hardly be very useful as is, without any customization, unless they are really simple. We clearly don’t want to display all possible object fields, including internal ones like the row GUIDs. Nor do we want to view or edit internal raw IDs using plain text boxes. Therefore, in the following sections we will show you how to mold our model to display the forms the way we want them to look, as well as how to customize any generated code to make the application behave as we need it to.

Next: 2. Modeling the search view >