Combine C# And VB.NET In the Same Blazor Project

Introduction


I have written various articles on C# Corner about Blazor and this time I want to write an article about combining VB.NET and C#. I have found that many big companies are still using Webforms with VB.NET and if they want to migrate their application to Blazor in the future, it is possible. That is the reason for writing this article.

Create Blazor Server Project in Visual Studio 2019


Please use Visual Studio 2019 to create a Blazor server project
Combine C# And VB.NET In Same Blazor Project
 
You can see the project structure which is in C#.
 
Combine C# And VB.NET In Same Blazor Project 
 
Now, we can add a new VB.NET Class library project to the solution.
 
Combine C# And VB.NET In Same Blazor Project 
 
We can quickly add an Employee class in VB.NET project and add two properties as shown below.
 
Combine C# And VB.NET In Same Blazor Project 
 
We can add this VB.NET library to our existing Blazor server project.
 
Add a new component, Employees, inside the “Pages” folder of Blazor server project.
 
Add the below code inside the component page.
 
Employees.razor
  1. @using VBNETClassLibrary  
  2. @page "/employees"  
  3.   
  4. <h3>Employee List</h3>  
  5.   
  6. @if (employees == null)  
  7. {  
  8.     <p>Loading...</p>  
  9. }  
  10.   
  11. else  
  12. {  
  13.     <table class='table'>  
  14.         <thead>  
  15.             <tr>  
  16.                 <th>Name</th>  
  17.                 <th>Age</th>  
  18.             </tr>  
  19.         </thead>  
  20.         <tbody>  
  21.             @foreach (var employee in employees)  
  22.             {  
  23.                 <tr>  
  24.                     <td>@employee.Name</td>  
  25.                     <td>@employee.Age</td>  
  26.                 </tr>  
  27.             }  
  28.         </tbody>  
  29.     </table>  
  30. }  
  31.   
  32. @code {  
  33.   
  34.     List<Employee> employees = new List<Employee>();  
  35.     protected override void OnInitialized()  
  36.     {  
  37.         employees.Add(new Employee { Name = "Sarathlal Saseendran", Age = 38 });  
  38.         employees.Add(new Employee { Name = "Anil Soman", Age = 43 });  
  39.     }  
  40.   
  41. }  
You can notice that we have used VB.NET class library inside the component.
 
Combine C# And VB.NET In Same Blazor Project 
 
We can modify the shared component NavMenu by adding the Employees routing.
 
NavMenu.razor
  1. <div class="top-row pl-4 navbar navbar-dark">  
  2.     <a class="navbar-brand" href="">BlazorCsharpVB</a>  
  3.     <button class="navbar-toggler" @onclick="ToggleNavMenu">  
  4.         <span class="navbar-toggler-icon"></span>  
  5.     </button>  
  6. </div>  
  7.   
  8. <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">  
  9.     <ul class="nav flex-column">  
  10.         <li class="nav-item px-3">  
  11.             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">  
  12.                 <span class="oi oi-home" aria-hidden="true"></span> Home  
  13.             </NavLink>  
  14.         </li>  
  15.         <li class="nav-item px-3">  
  16.             <NavLink class="nav-link" href="counter">  
  17.                 <span class="oi oi-plus" aria-hidden="true"></span> Counter  
  18.             </NavLink>  
  19.         </li>  
  20.         <li class="nav-item px-3">  
  21.             <NavLink class="nav-link" href="fetchdata">  
  22.                 <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data  
  23.             </NavLink>  
  24.         </li>  
  25.         <li class="nav-item px-3">  
  26.             <NavLink class="nav-link" href="employees">  
  27.                 <span class="oi oi-list-rich" aria-hidden="true"></span> Employees  
  28.             </NavLink>  
  29.         </li>  
  30.     </ul>  
  31. </div>  
  32.   
  33. @code {  
  34.     private bool collapseNavMenu = true;  
  35.   
  36.     private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;  
  37.   
  38.     private void ToggleNavMenu()  
  39.     {  
  40.         collapseNavMenu = !collapseNavMenu;  
  41.     }  
  42. }  
We can run the application:
 
Combine C# And VB.NET In Same Blazor Project 
 
We have successfully run the application.

Conclusion


In this post, we have seen how to combine VB.NET with a Blazor Server project which is in C#. The intention for this application is to motivate people to do migration from previous VB.NET webforms applications to the current Blazor framework.