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"
  4. <h3>Employee List</h3>
  6. @if (employees == null)
  7. {
  8. <p>Loading...</p>
  9. }
  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. }
  32. @code {
  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. }
  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>
  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>
  33. @code {
  34. private bool collapseNavMenu = true;
  36. private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
  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.