Consuming OpenAPI (Swagger) services

The OpenAPI (formerly known as Swagger) is a way to provide a formal specification of your REST API. Radzen Blazor Studio makes it easy to consume such API. It scaffolds for you:

• Service classes which make HTTP requests to the REST service and optionally authenticate.
• Model classes for all entities.
• Various pages that allow to to quickly make a full CRUD application from the service.

Connect to OpenAPI service

In the following tutorial we will show how to:

1. Create an OpenAPI data source in Radzen Blazor Studio.
2. Generate code for it.
3. Display data.

The tutorial uses the public PetStore service available at https://petstore3.swagger.io.

Configure the OpenAPI connection

1. Create a new Blazor application in Radzen Blazor Studio or open an existing one.
2. Click the button.
3. Select OpenAPI as the data source type in the Create or update data source dialog. This opens the OpenAPI connection editor.
4. Enter the PetStore connection details
   • Set Name to PetStore. The name must be a valid C# identifier. It is used for namespaces and service class names.
   • Set Specification Url or file to https://petstore3.swagger.io/api/v3/openapi.json.
5. Click Next. Radzen Blazor Studio will infer the metadata and display all REST endpoints (paths).
6. Check the items from the service that you want to generate code for (models and methods). Click Next.
7. Click Finish

This procedure will generate the following code:

1. A service class that can invoke the service methods PetStoreService.cs
2. Various model classes: (Pet.cs, Category.cs et. al.)

Display data returned from the service

In this step we will display the Pet entities returned by the findPetsByStatus method.

1. Right click the Pages directory and select New Page….
2. Pick CRUD from the available templates.
3. Expand the Entities tree and select Pet. This will display the Specify CRUD methods dialog.
4. Set Read method to FindPetsByStatus. The generated page will use the FindPetsByStatus() method of the PetStoreService generated in the previous step.
5. Click OK
6. Uncheck Alow editing, Alow inserting and Alow editing. We don’t need those pages for this demo.
7. Click Finish.
8. Open the Pets.razor page and go to methods design mode.
9. Select the OnOnitializedAsync method from the dropdown.
10. Select the Invoke statement and set the status parameter to "available".
11. Run the application and click the Pets item in the left-hand navigation menu.

You should see something like this: