许多大公司仍然在用VB开发Webforms。如果他们想在未来将他们的应用程序迁移到Blazor，就可能用到下面的技术。
在Visual Studio 2019中创建Blazor Server项目
请使用Visual Studio 2019创建一个Blazor服务器项目
您可以看到c#中的项目结构。
现在，我们可以添加一个新的VB.NET类库项目的解决方案。
我们可以在VB中快速添加一个Employee类并添加两个属性，如下所示。
我们可以把这个VB.NET库加到我们现有的Blazor Server项目。
在Blazor Server项目的“Pages”文件夹中添加一个新组件Employees。
在组件页面中添加以下代码。
Employees.razor
@using VBNETClassLibrary
@page "/employees"
<h3>Employee List</h3>
@if (employees == null)
{
<p>Loading...</p>
}
else
{
<table class='table'>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
@foreach (var employee in employees)
{
<tr>
<td>@employee.Name</td>
<td>@employee.Age</td>
</tr>
}
</tbody>
</table>
}
@code {
List<Employee> employees = new List<Employee>();
protected override void OnInitialized()
{
employees.Add(new Employee { Name = "Sarathlal Saseendran", Age = 38 });
employees.Add(new Employee { Name = "Anil Soman", Age = 43 });
}
}
你可以注意到我们在组件内用的是VB.NET类库。
我们可以通过添加Employees 路由来修改共享组件NavMenu。
NavMenu.razor
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">BlazorCsharpVB</a>
<button class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="employees">
<span class="oi oi-list-rich" aria-hidden="true"></span> Employees
</NavLink>
</li>
</ul>
</div>
@code {
private bool collapseNavMenu = true;
private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
最后运行该应用
网友评论