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: cdd1.png
  3. Invoke getCustomers() on Page Load event and bind the first DropDown to the ${result.value}: cdd2.png
  4. Invoke getOrders() on first DropDown Change event with CustomerID parameter equal to ${event.CustomerID} and set orders Page property equal to ${result.value}: cdd3.png
  5. Invoke getOrderDetails() on second DropDown Change event with OrderID parameter equal to ${event.OrderID} and set details Page property equal to ${result.value}: cdd4.png
  6. Set new detail Page property equal to ${event} on third DropDown Change event and bind the Form component: cdd5.png cdd6.png
  7. Run the application and select cascading values: cdd-run.png

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: cdd-dotnetcore1.png
  • ODataControllers with GET, PATCH, PUT, DELETE and POST actions: cdd-dotnetcore2.png
  • Angular page designed by you visually using Radzen designer: cdd-angular1.png
  • All needed server calls to retrieve data: cdd-angular2.png

Enjoy!