how to display list page in blazor

Question

User-91993069 posted

I am working with codefirst approach in blazor and mydatabase created successfully using code first approach

fist I create a project and then select a visual studio 2019 -> blazor app -> blazor server app

why my employee list page not render in blazor

I want to display emp table record in blazor but issue is not render

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("Index")]
        public IEnumerable<Emp> Index()
        {
            return (IEnumerable<Emp>)_employeAccessLayer.GetAllEmployees();
        }
    }
}

GetEmployee.razor

@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;
    protected override async Task OnInitializedAsync() =>
        empList = await Http.GetJsonAsync<Emp[]>("employee/Index");
}

NavMenu.razor  //here I want to add emloyee link when user click employee then display the database data

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

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

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

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

but when I am run the project and write this line in address bar then give below error

see my database image I have 2 record in table I want to display them in blazor

see my blazor output

hierarchy of myproject

I want to display 2 record on that page in blazor?

help

Answer 1

User-474980206 posted

Because you registered a named client, a http factory is registered, not a client. Your inject should be a factory, see docs

   https://docs.microsoft.com/en-us/aspnet/core/fundamentals/http-requests?view=aspnetcore-3.1

though it’s not clear why you are using an httpclient to call back to the same website. Why don’t you just inject a  IEmployeAccessLayer

note: this is all razor page code, not blazor

Answer 2

User-91993069 posted

if I am not writing httpclient then here give an error:

@*@inject HttpClient Http*@

@code {
            Emp[] empList;

            protected override async Task OnInitializedAsync()
            {
                empList = await Http.GetJsonAsync<Emp[]>("employee/index");  //the name http does not exist in the current context
            }
    }

this is all razor page code, not blazor  

what do your means I am newbie in blazor

Answer 3

User-474980206 posted

As you are using server blazor, there is no need to make an http call to the same site.  You would use http if you where writing a WASM blazor api, or calling a different server. 

as you registered a named httpclient, you must fetch by name, you can not inject it. Instead you inject a http factory, and call the factory to get the http client. Read the services docs, and http client docs, don’t just copy code, or if you do, only copy from one example. 

also oninitalizedasync will fire twice, so you should check if the data call was already done.

note: server blazor was just a stopgap, you really should be using client blazor.

Answer 4

User-91993069 posted

your means get method means(below code) call in blazor webassembly app(client side) project?

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

Answer 5

User-91993069 posted

Hello bruce

thanks for your time

I create another project webassembly client side project

and then I create razor component

GetRecordData.razor

@page  "/employee/"
@inject HttpClient Http
<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 {
    Emp[] empList;
    protected override async Task OnInitializedAsync() =>
        empList = await Http.GetJsonAsync<Emp[]>("employee/Get");
}

EmployeeController.cs

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

        public EmployeeController(MyDbContext myDbContext)
        {
            _myDbContext = myDbContext;
        }

        [HttpGet]
        [Route("Get")]
        public async Task<List<Emp>> Get()
        {
            return await _myDbContext.emps.ToListAsync();
        }
    }
}

but give an error:

Answer 6

User-474980206 posted

The error means the website that blazor is calling threw an error. Use the browser network debugger to see the error. 

Answer 7

User-91993069 posted

Hello beuce 

thanks for support

can you help more

see webapi response is 200 ok

when I am debugging I could not understood the error:

what is error?