如何在blazor中显示列表页面

我正在使用 blazor 中的 codefirst 方法，并且使用 code first 方法成功创建了 mydatabase

首先我创建一个项目，然后选择一个 Visual Studio 2019 -> blazor app -> blazor server app

为什么我的员工列表页面没有在 blazor 中呈现

我想在 blazor 中显示 emp 表记录但问题不是渲染

Emp.cs

namespace BlazorServerApp.Pages
{
    public class Emp
    {
        public int empid { get; set; }
        public string empname { get; set; }
        public string empcountry { get; set; }
    }
}

员工访问层.css

namespace BlazorServerApp.DataAccess
{
    public interface IEmployeAccessLayer
    {
        IEnumerable GetAllEmployees();
    }

    public class EmployeAccessLayer : IEmployeAccessLayer
    {
        private MyDbContext _context;
        public EmployeAccessLayer(MyDbContext context)
        {
            _context = context;
        }

        public IEnumerable GetAllEmployees()
        {
            try
            {
                return _context.emps.ToList();
            }
            catch (Exception ex)
            {
                throw;
            }
        }
    }
}

员工控制器.css

namespace BlazorServerApp.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class EmployeeController : ControllerBase
    {
        IEmployeAccessLayer _employeAccessLayer;

        public EmployeeController(IEmployeAccessLayer employeAccessLayer)
        {
            _employeAccessLayer = employeAccessLayer;
        }

        [HttpGet]
        [Route("api/Employee/Index")]
        public IEnumerable<Emp> Index()
        {
            return (IEnumerable<Emp>)_employeAccessLayer.GetAllEmployees();
        }
    }
}

GetEmployee.razor

@*@page "/employee/GetEmployee"*@
@*@page  "/employee"*@
@page  "/employee/"
@inject HttpClient Http

<h3>GetEmployee</h3>

@code {

}
@if (empList == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class='table'>
        <thead>
            <tr>
                <th>EmpID</th>
                <th>EmpName</th>
                <th>EmpCountry</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var emp in empList)
            {
                <tr>
                    <td>@emp.empid</td>
                    <td>@emp.empname</td>
                    <td>@emp.empcountry</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    Emp[] empList;
}

导航菜单.razor

<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>
    </ul>
</div>

查看我的数据库图像 我在表中有 2 条记录我想在 blazor 中显示它们

查看我的 blazor 输出

myproject 的层次结构

在这里给一个消息抱歉在这个没有地址

编辑：我在 GetEmployee.razor 添加这一行

@code {
    Emp[] empList;
    protected override async Task OnInitializedAsync() =>
        empList = await Http.GetJsonAsync<Emp[]>("api/Employee/Index");
}

但是当我运行项目并在地址栏中写下这一行然后给出以下错误

启动文件

namespace BlazorServerApp
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddDbContext<MyDbContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("sqlserverconn")));
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            using (var serviceScope = app.ApplicationServices.GetService<IServiceScopeFactory>().CreateScope())
            {
                var context = serviceScope.ServiceProvider.GetRequiredService<MyDbContext>();
                context.Database.EnsureCreated();
            }

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });
        }
    }
}