Consuming REST API

With Radzen Blazor Studio you can connect to a REST API in no time. It scaffolds for you:

• Service classes which make HTTP requests to the REST API and optionally authenticate.
• Model classes for all entities returned by the REST API.

How-to video

Connect to a REST API

In the following tutorial we will show how to:

1. Create a REST data source in Radzen Blazor Studio.
2. Define the REST API methods
3. Display data from the REST API in RadzenDataGrid.

The tutorial uses the free Spotify REST API. You can either register for free in the Spotify developer portal or use the Radzen test credentials below. If register your own add https://localhost:5001/api/oauth/spotify/callback to the authorized application Redirect URIs. This is the URL Spotify redirects to after authentication.

You will also need a Spotify account in order to authenticate and use the API.

Configure the REST API connection

1. Create a new Blazor application in Radzen Blazor Studio or open an existing one.
2. Click the button.
3. Select REST as the data source type in the Create or update data source dialog. This opens the REST data source connection editor.
4. Enter the Spotify REST API connection details
   • Set Name to Spotify. The name must be a valid C# identifier. It is used for namespaces and service class names.
   • Set URL to https://api.spotify.com/v1/. This is the base URL of all Spotify REST API methods.
   • Set Authorization type to OAuth2. The Spotify REST API uses OAuth2 for authorization.
   • Set Client ID to da4bd9113dec43578cca7c59c6bf6e44 or use your own if you have a Spotify developer registration.
   • Set Client Secret to 34269665343a4eec93b9e7620e31c62c or use your own.
   • Set Authorization URL to https://accounts.spotify.com/authorize.
   • Set Access token URL to https://accounts.spotify.com/api/token.

Radzen Blazor Studio will create a class called SpotifyService which will fetch data from the Spotify REST API.

Add REST API methods

After configuring the REST API connection details we will add two methods which will fetch data from the Spotify API:

• Get New Releases
• Get Album Tracks

Get New Releases

1. Click the + button next to Spotify in the left-hand side of the REST data source connection editor (it should be open from the previous step). This will add a new empty method to the REST data source.
2. Set Name to GetNewReleases.
3. Leave Operation to GET. This is the HTTP method used to request the API.
4. Set Path to browse/new-releases.
5. Click the Send button. This will make a test HTTP request to the newly configured method in order to infer its response. In this case it will also ask you to log in with your Spotify user credentials in order to authenticate the request.

You can check the inferred C# models in the Models tab. You can change the automatically generated model names by double clicking them.

You can inspect the actual API response from the Response tab. Any errors would be also displayed there. You

Get Album Tracks

1. Click the + button next to Spotify in the left-hand side of the REST data source connection editor (it should be open from the previous step). This will add another empty method to the Spotify REST data source.
2. Set Name to GetAlbumTracks.
3. Set Path to albums/{id}/tracks. Note that there there is a {id} in the path - this is a path parameter and is required by the API method. Radzen Blazor Studio infers it but you need to complete its configuration in the next step.
4. Click the Path tab in the Parameters section. Set Name to id and Type to string. This will configure the id path parameter.
5. Click the Send button. A dialog would open and ask you to provide a value for the id parameter. Use 4aawyAB9vmqN3uQ7FjRGTy as the Spotify documentation suggests.
6. Click the Finish button to generate the code for the Spotify REST data source.

Create page to list the new releases

1. Right click the Pages directory and select New Page….
2. Pick CRUD from the available templates.
3. Expand the Entities tree and select Item. This will display the Specify CRUD methods dialog.
4. Set Read method to GetNewReleases(). The generated page will use the GetNewReleases() method of the SpotifyService generated in the previous step.
5. Set Read response member to Albums.Items. This means that the data grid component will be bound to the Albums.Items property of the response.
6. Click OK
7. Uncheck Alow editing, Alow inserting and Alow editing. We don’t need those pages for this demo.
8. Click Finish.

A new page called Items.razor will be generated. You can run the application and after authenticating with Spotify you will see a data grid showing the latest Spotify releases.

Show the latest album tracks

Now lets show the tracks for an album from the new releases data grid which we created in the previous step.

1. Drag and drop a new RadzenDataGrid component from the toolbox.
2. Click Configuration wizard… from the property grid. This will allow us to data-bind the new RadzenDataGrid instance to the result of the GetAlbumTracks method.
3. Set Method to GetAlbumTracks.
4. Set Member to Items.
5. Click Finish.
6. Click METHODS in the page toolbar to open the method editor.
7. Set Method to OnOnitializedAsync. We will update the generated code to get the tracks of the first item from the latest releases by default.
8. Select the last Invoke statement and set its id argument to items.FirstOrDefault().Id.
9. Now lets display the tracks of the selected latest release. Go to the Items.razor file and switch to UI design mode. Select the first RadzenDataGrid.
10. Handle the RowSelect event.
11. Add a new Invoke statement and invoke the GetAlbumTracks method. Set the id argument to args.Id. Use the Expression Editor to do that quickly (use the “link” icon).
12. Set Result to getAlbumTrack. This will ensure that when the user selects an item from the top data grid the GetAlbumTracks method will be invoked and the result assigned to the getAlbumTrack field to whic the bottom data grid is bound to. As a result selecting a new item will fetch its tracks from the Spotify API and display them in the bottom data grid.

Use REST API protected by AzureAD

Here is how to configure the authorization of a REST API protected by AzureAD:

1. Set Authorization type to OAuth2.
2. Set Client ID and Client Secret from your Azure AD app settings.
3. Set Authorization URL to https://login.microsoftonline.com/<tenant-id>/oauth2/v2.0/authorize (replace tenant-id with your AzureAD tenant id).
4. Set Access Token URL to https://login.microsoftonline.com/<tenant-id>/oauth2/v2.0/token (replace tenant-id with your AzureAD tenant id).