Add new pages and components to your Blazor app in Radzen Blazor Studio

foreign my name is Vladimir and Chef and in this video I'm going to show you how you can create visually pages in your Blazer application bind components to some data without writing any code using the designer inner then Blazer Studio so we have our applications scaffolded from the database with all everything needed for update delete and art records for orders order details and products we added security we localize the application we sorted initially orders to orders Page by ID property descending then we customize the application theme and now I'm going to create a new page to list all the order details by selected order so I'm going to create an empty one and choose the name order details by order press finish but then Blazer studio will create empty page to your application where you can drag drop components from our toolbox we can select the toolbox from the left corner inner then laser Studio and as you can see unlisted Blazer components all components available were default from Microsoft your application shared folder components and plain HTML components I'm going to use the drop down component for this page drag it to your page and use the configuration wizard to bind this component to some data to select methods I'm going to choose get orders because this drop down will list orders for text property username and for very property the ID of the order is going to be a single selection drop down so press finish now then Blazers to you generate everything needed for this drop down to display orders the drop down itself is declared in the Razer file like this and you can check the code generated in the C sharp class of the page that will populate orders let's now add a few without writing code in the page class from the data property you can do this from Field section and let's name it order ID [Music] is going to be integer field press ok let's bind now the value property of the drop down component two newly created order ID Fields simply select it and when the selection of this drop down is changed the order ID field value will be updated let's now add a data grid component to our page below the drop down component and populate this data grid using the configuration wizard order details now origin Blazer studio will generate everything needed and we can customize the get order ID call to use the selection of the drop down internet filter by order ID equals to our order ID now let's use the drop down change event to add your event handler where we can again invoke get order details methods again using the same query by order ID filtered by our field order ID and assign the result to order details and that's all when you select an order details in the data grid will be updated now let's run the application to check the result we're going to wait for.net to build the project let's open now order details by order to check the result when you select some order details in the data group will be filtered that's all for now thanks for watching [Music]

Channel: Radzen

Views: 3,022

Keywords:

Id: OfV45bDFsAE

Length: 6min 58sec (418 seconds)

Published: Thu Jun 22 2023