Creating Blazor WebAssembly (WASM) App with ASP.NET Web API Project

This article explains about the creating Blazor Web Assembly (WASM) application with ASP.NET Core Web API project.

Creating of ASP.NET Web API project

1. Select “ASP.NET Web Application with .NET Framework” from the project templates in Visual Studio and click on Create.

2. Now, name the project and select the version of framework and click on the Create.

3. Now, select the Web API template from the list of templates. Ensure both MVC and Web API are checked and click on Create.

4. Now, ASP.NET Web API application with .NET framework 4.6 is created.
5. Now, open “~/Controllers/ValuesController.cs” file and add the values for Grid component in the “GET” method as below

   public class ValuesController : ApiController
       {
    
           // GET api/values
           public IEnumerable<Order> Get()
           {
               //return new string[] { "value1", "value2" };
               return Enumerable.Range(1, 50).Select(x => new Order()
               {
                   OrderID = 0 + x,
                   CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
                   Freight = 2.1 * x,
                   OrderDate = DateTime.Now.AddDays(-x),
               }).ToList();
           }
          . . .
       }
    
       public class Order
       {
           public int? OrderID { get; set; }
           public string CustomerID { get; set; }
           public DateTime? OrderDate { get; set; }
           public double? Freight { get; set; }
       }
    
   

6. Install the Microsoft.AspNet.WebApi.Cors package. Open App_Start/WebApiConfig.cs file and add the following code in WebApiConfig.Register method to enable the Cross-Orgin. For more details, please refer here .

   public static class WebApiConfig
       {
           public static void Register(HttpConfiguration config)
           {
               // Web API configuration and services
    
               var cors = new EnableCorsAttribute("URL for WebAssembly application", "*", "*");
               config.EnableCors(cors);
    
               // Web API routes
               config.MapHttpAttributeRoutes();
    
    
               config.Routes.MapHttpRoute(
                   name: "DefaultApi",
                   routeTemplate: "api/{controller}/{id}",
                   defaults: new { id = RouteParameter.Optional }
               );
           }
       }
    
   

7. Run the application and navigate to “/api/values” in the browser to view the values. Please refer below image for the output.

Creation of Blazor Web Assembly (WASM) application

1. Create a Blazor Web Assembly application with Syncfusion Grid component referring to the getting started documentation .
2. Add the below lines of code in “~/Pages/index.razor” page to retrieve the data from the above created Web API project.

    
   @inject HttpClient Http
    
   <SfGrid TValue="Order" AllowPaging="true" DataSource="@GridData">
       <GridColumns>
           <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
           <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
           <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
           <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
       </GridColumns>
   </SfGrid>
    
   @code{
    
       public List<Order>? GridData { get; set; }
    
       public class Order
       {
           public int? OrderID { get; set; }
           public string? CustomerID { get; set; }
           public DateTime? OrderDate { get; set; }
           public double? Freight { get; set; }
    
       }
    
       protected override async Task OnInitializedAsync()
       {
           GridData = await Http.GetFromJsonAsync<List<Order>>("URL of Web API values");
       } 
       
   }
    
   

3. Now, first run the Web API project and navigate to /api/values page and then run Web Assembly application. The Grid component in Blazor WebAssembly project gets the data from the Web API project. Please refer the below image for the output of Blazor Web Assembly application.

View complete sample in GitHub