Connecting a Blazor App to Swagger API

Published Feb 18 2022 12:06 PM 2,534 Views
Microsoft

DaveUpton_0-1645217561087.png


@SameerDoshi walks us through creating a new Blazor application and how to use the OpenAPI Visual Studio 2022 extension to create a connected service to a Swagger API.  

 

You will need to install the OpenAPI extension.

DaveUpton_0-1645214574649.png

That will give you the Connected Service Option.

DaveUpton_1-1645214615756.png

 

This video walks you through the following steps:

 

 

References
Github Repos:

 

Call a web API from ASP.NET Core Blazor app | Microsoft Docs
https://docs.microsoft.com/en-us/aspnet/core/blazor/call-web-api

 

%3CLINGO-SUB%20id%3D%22lingo-sub-3186021%22%20slang%3D%22en-US%22%3EConnecting%20a%20Blazor%20App%20to%20Swagger%20API%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3186021%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22DaveUpton_0-1645217561087.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F349567i031A4DF1FD35ECB8%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22DaveUpton_0-1645217561087.png%22%20alt%3D%22DaveUpton_0-1645217561087.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1139441%22%20target%3D%22_blank%22%3E%40SameerDoshi%3C%2FA%3E%26nbsp%3Bwalks%20us%20through%20creating%20a%20new%20Blazor%20application%20and%20how%20to%20use%20the%20OpenAPI%20Visual%20Studio%202022%20extension%20to%20create%20a%20connected%20service%20to%20a%20Swagger%20API.%26nbsp%3B%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EYou%20will%20need%20to%20install%20the%20OpenAPI%20extension.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22DaveUpton_0-1645214574649.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F349561i2FF1D19B457C082D%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22DaveUpton_0-1645214574649.png%22%20alt%3D%22DaveUpton_0-1645214574649.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EThat%20will%20give%20you%20the%20Connected%20Service%20Option.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22DaveUpton_1-1645214615756.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F349562i1FFD3538B5144545%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22DaveUpton_1-1645214615756.png%22%20alt%3D%22DaveUpton_1-1645214615756.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThis%20video%20walks%20you%20through%20the%20following%20steps%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D_8fNkpR1CCo%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3ECreating%20a%20new%20Blazor%20Application%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D_8fNkpR1CCo%26amp%3Bt%3D2m13s%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EConnecting%20to%20a%20Swagger%20API%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D_8fNkpR1CCo%26amp%3Bt%3D4m47s%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3ECalling%20the%20API%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D_8fNkpR1CCo%26amp%3Bt%3D11m25s%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EInjecting%20the%20instantiated%20API%20Client%20(So%20that%20you%20only%20load%20the%20config%20once)%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D_8fNkpR1CCo%26amp%3Bt%3D17m19s%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3ERefreshing%20your%20API%20connection%20after%20updating%20the%20Swagger%20API%3C%2FA%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%3C%2FP%3E%3CDIV%20class%3D%22video-embed-center%20video-embed%22%3E%3CIFRAME%20class%3D%22embedly-embed%22%20src%3D%22https%3A%2F%2Fcdn.embedly.com%2Fwidgets%2Fmedia.html%3Fsrc%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252F_8fNkpR1CCo%253Ffeature%253Doembed%26amp%3Bdisplay_name%3DYouTube%26amp%3Burl%3Dhttps%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253D_8fNkpR1CCo%26amp%3Bimage%3Dhttps%253A%252F%252Fi.ytimg.com%252Fvi%252F_8fNkpR1CCo%252Fhqdefault.jpg%26amp%3Bkey%3Db0d40caa4f094c68be7c29880b16f56e%26amp%3Btype%3Dtext%252Fhtml%26amp%3Bschema%3Dyoutube%22%20width%3D%22600%22%20height%3D%22337%22%20scrolling%3D%22no%22%20title%3D%22YouTube%20embed%22%20frameborder%3D%220%22%20allow%3D%22autoplay%3B%20fullscreen%22%20allowfullscreen%3D%22true%22%3E%3C%2FIFRAME%3E%3C%2FDIV%3E%3CP%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CFONT%20size%3D%226%22%3EReferences%3C%2FFONT%3E%3CBR%20%2F%3E%3CFONT%20size%3D%225%22%3EGithub%20Repos%3A%3C%2FFONT%3E%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3E%3CSTRONG%3ENextflow%20Pipeline%20Project%20included%20in%20this%20video.%26nbsp%3B%3C%2FSTRONG%3E%3CBR%20%2F%3E%3CA%20style%3D%22font-family%3A%20inherit%3B%20background-color%3A%20%23ffffff%3B%22%20href%3D%22https%3A%2F%2Fgithub.com%2Fmicrosoft%2Fnextflow-runner%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fmicrosoft%2Fnextflow-runner%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%3CSTRONG%3EFireBlaze%20%E2%80%93%20Traditional%20API%20implementation%20(the%20hard%20way)%3C%2FSTRONG%3E%3CBR%20%2F%3E%3CA%20style%3D%22font-family%3A%20inherit%3B%20background-color%3A%20%23ffffff%3B%22%20href%3D%22https%3A%2F%2Fgithub.com%2Fmicrosoft%2FFhirBlaze%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fmicrosoft%2FFhirBlaze%3C%2FA%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3ECall%20a%20web%20API%20from%20ASP.NET%20Core%20Blazor%20app%20%7C%20Microsoft%20Docs%3C%2FSTRONG%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Faspnet%2Fcore%2Fblazor%2Fcall-web-api%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Faspnet%2Fcore%2Fblazor%2Fcall-web-api%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-3186021%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Blazor.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F349557i5F0B235339A2FAB2%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22Blazor.png%22%20alt%3D%22Blazor.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EWalkthrough%20setting%20up%20a%20new%20Blazor%20application%20and%20connecting%20to%20a%20Swagger%20API.%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-3186021%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EHLS_Hack%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Version history
Last update:
‎Feb 18 2022 12:52 PM
Updated by: