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: 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


Leverage Radzen on LinkedIn

Yes, we are on LinkedIn and you should follow us!

Now, you have the opportunity to showcase your expertise by adding Radzen Blazor Studio and Radzen Blazor Components as skills to your LinkedIn profile. Present your skills to employers, collaborators, and clients.

All you have to do is go to our Products page on LinkedIn and click the + Add as skill button.

by Vladimir Enchev

Send an email with Angular, .NET Core and Radzen

This blog post demonstrates how to invoke POST request from an Angular 5 application to .NET Core 2.x Web API controller and send an email using System.Net.Mail.SmtpClient.
Read more