如何在 blazor 中显示列表页面

Question

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

首先我创建一个项目，然后选择一个 Visual Studio 2019 -> blazor 应用程序 -> blazor 服务器应用程序

为什么我的员工列表页面没有在 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; }
    }
}

EmployeAccessLayer.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;
            }
        }
    }
}

EmployeeController.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;
}

NavMenu.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 输出

我的项目的层次结构

在这里给这个没什么地址发消息抱歉

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

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

但是当我运行项目并在地址栏中写下这一行时，会出现以下错误

Startup.cs

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");
            });
        }
    }
}

Answer 1

为什么要为您的 blazor 服务器应用程序提供一个 rest-api？ 您可以在代码部分中使用注入的 DbContext 直接查询数据库。

您将 dbcontext 添加到服务集合 (ConfigureServices)。 现在您可以在代码部分中使用这些上下文：

@page  "/employee/"
@using Microsoft.EntityFrameworkCore;
@inject MyDbContext Context

<h3>GetEmployee</h3>

@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 {

    private List<Emp> empList;

    protected override async Task OnInitializedAsync()
    {
        this.empList = await Context.emps.ToListAsync();
    }
}

Answer 2

您忘记调用您的 API 请参阅 the docs

  protected override async Task OnInitializedAsync() => 
        empList= await Http.GetFromJsonAsync<Emp[]>("api/Employee/Index");

另外，记住你的页面方向必须是localhost:44326/employee

Answer 3

HttpClient 未在 Startup.cs 中注册为服务，这是我想到此问题 https://i.stack.imgur.com/zSpC6.png 的原因。

public void ConfigureServices(IServiceCollection services)
{
  services.AddScoped<HttpClient>();
  .....
}

Answer 4

在配置服务方法的启动类中，您应该有以下内容：

 services.AddHttpClient("httpClient",client => 
 {
    client.BaseAddress = new Uri("https://localhost:44326/");
 });

或者如果你关注documentation:

services.AddScoped(sp => 
  new HttpClient
  {
   BaseAddress = new Uri("https://localhost:44326/")
  });

您的控制器路由不正确。

如果您的控制器上有[Route("api/[controller]")]，您只需要在您的方法上方使用[Route("Index")]。

您在代码中使用它的方式是 api 路由正在寻找 api/Employee/api/Employee/Index

将您的 api 代码更改为：

namespace BlazorServerApp.Controllers
{
  [Route("api/[controller]")]
  [ApiController]
  public class EmployeeController : ControllerBase
  {
   //.....your code here
   // .... your code here
    [HttpGet]
    [Route("Index")]
    public IEnumerable<Emp> Index()
    {
       return (IEnumerable<Emp>)_employeAccessLayer.GetAllEmployees();
    }
  }
}

我个人更喜欢像这样使用GetAsync(...)：

protected override async Task OnInitializedAsync()
{    
    var response = await Http.GetAsync("api/employee/index", HttpCompletionOption.ResponseContentRead);
    if (response.IsSuccessStatusCode)
    {
      empList = await JsonSerializer.DeserializeAsync<Emp[]>(await response.Content.ReadAsStreamAsync(), new JsonSerializerOptions() { PropertyNameCaseInsensitive = true });      
    }
    else                
      empList = new List<Emp>();
}

这样您可以获得更多关于调用 api 失败原因的信息。