Visually design Blazor application

In this blog post I'm going to show you how to use the powerful Radzen designer to visually design your Blazor application.

1. Create new Blazor project, add our Sample data source and add new empty page.

2. Drop DataGrid component from the toolbox and bind it to Sample Products.

3. Edit Product Picture DataGrid column using the template designer and add new Image component bound to ${data.ProductPicture}. Set Width property to 100px.

4. Add new column to the DataGrid, drop a Button component with delete icon in column template and invoke deleteProduct data source method. Execute the grid Reload() method after delete.

5. Add new Add Product page, drop a Button component on Products page, set Text to Add Product and navigate to Add Product on Click.

Let's design now Add Product page.

6. Open Add Product page, add new Page Load event and set new product property of type Product to new Product().

7. Drop TemplateForm to Add Product page and bind it to product Page property.

8. Drop Row with two Columns in the TemplateForm. Add Label in the first column and TextBox in the second with Name property set to ProductName.

9. Duplicate the first row, change the Label Text, remove the TextBox and add Numeric with Name set to ProductPrice.

10. Duplicate the second row, change the Label Text, remove the Numeric and add FileInput with Name set to ProductPicture.

11. Invoke createProduct with product property as parameter on TemplateForm Submit event.

12. Run the application and you will see the Radzen DataGrid component data-bound to the Products table of the Sample database. Click Add Product button to add new product and click delete button to delete existing products.