如何在blazor中显示列表页面

如何解决如何在blazor中显示列表页面

我正在blazor中使用代码优先方法，并且使用代码优先方法成功创建了mydatabase

我首先创建一个项目，然后选择Visual Studio 2019-> 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条记录，我想以明亮的颜色显示它们

查看我的辉煌输出

myproject的层次结构

在这里给这个消息打个歉意

编辑：我将此行添加到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");
            });
        }
    }
}

解决方法

您忘记了对API的调用，请参见the docs

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

还有，记住页面的方向必须为localhost:44326/employee

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

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

在启动类中的configure service方法中，应该包含以下内容：

 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调用失败的更多信息。

为什么要与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();
    }
}

如何在blazor中显示列表页面

如何解决如何在blazor中显示列表页面

解决方法

相关推荐