Cascading DropDowns with Angular, .NET Core and Microsoft SQL Server

This blog post demonstrates how to implement cascading DropDowns with Angular, .NET Core and Microsoft SQL Server without writing code.

1. Create new Radzen application with .NET Core 2.x server-side project, add new Microsoft SQL Server data-source connected to Northwind database without auto-generated pages and add new empty page.
2. Design your cascading DropDowns page using Rows and Columns with three DropDown components and one Form component:
3. Invoke getCustomers() on Page Load event and bind the first DropDown to the ${result.value}:
4. Invoke getOrders() on first DropDown Change event with CustomerID parameter equal to ${event.CustomerID} and set orders Page property equal to ${result.value}:
5. Invoke getOrderDetails() on second DropDown Change event with OrderID parameter equal to ${event.OrderID} and set details Page property equal to ${result.value}:
6. Set new detail Page property equal to ${event} on third DropDown Change event and bind the Form component:
7. Run the application and select cascading values:

Radzen generates automatically customizable Angular 5 and .NET Core 2.x applications with everything needed:

• DbContext with tables, views, relations and stored procedures from your Microsoft SQL Server database:
• ODataControllers with GET, PATCH, PUT, DELETE and POST actions:
• Angular page designed by you visually using Radzen designer:
• All needed server calls to retrieve data:

Enjoy!