how to call blazor server app(login webapi) in blazor webassembly app(client side)

Question

First I create blazor server app and create a login webapi and then add a blazor webassembly app project for call the webapi

blazor server app project:

see response of login webapi blazor server app

blazor webassembly app project:

EmpsController.cs

        [HttpPost]
        public Emp checkLogin(string username, string password)
        {
            Emp hasemp = _context.emps.Where(e => e.username == username & e.password == password).FirstOrDefault();
            return hasemp;
        }

Index.razor

@page "/"
@using CrudBlazorServerApp.Data
@using System.Net.Http.Headers;
<h3>Login</h3>
@inject HttpClient Http

<div>
    <input id="txtusername" type="text" placeholder="Enter Your UserName" /><br />
    <input id="txtpassword" type="text" placeholder="Enter Your Password" /><br />
    <input type="submit" />


    @if (empList.username == "" || empList.username == null)
    {
        var data = new
        {
            message = "Enter Username ",
        };
    }
    else if (empList.password == "" || empList.password == null)
    {
        var data = new
        {
            message = "Enter Password",
        };
    }
    else
    {
        @if(empList.username == "txtusername" || empList.username == "txtpassword") //here I am trying to check the when user enter the valid username and password
        {
            var data = new
            {
                message = "Success",
                data = new { empList.username, empList.password }
            };
            //if username and password correct than redirect the registraion page
        }
        else
        {

            var data = new
            {
                message = "Username and Password incorrect ",
            };
        }
    }
</div>

@code{
                Emp empList=new Emp();
    protected override async Task OnInitializedAsync() =>
        empList = await Http.GetFromJsonAsync<Emp>("https://localhost:44333/api/emps/checkLogin?username=" + empList.username + "&password=" + empList.password);
}  

see error image:

see my database I have only one record:

Hierarchy Of Project:

my webapi work fine server side but now I am trying to call the login webapi on client side

this is error:

 Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Failed to compare two elements in the array.
System.InvalidOperationException: Failed to compare two elements in the array.  
---> System.InvalidOperationException: The following routes are ambiguous:

'DisplayEmployeeData' in 'CrudBlazorClientApp.Pages.Login'

'DisplayEmployeeData' in 'CrudBlazorClientApp.Pages.DisplayEmployeeData'


  at Microsoft.AspNetCore.Components.RouteTableFactory.RouteComparison (Microsoft.AspNetCore.Components.Routing.RouteEntry x, Microsoft.AspNetCore.Components.Routing.RouteEntry y) <0x2f1d0b8 + 0x0025e> in <filename unknown>:0 
  at System.Collections.Generic.ComparisonComparer`1[T].Compare (T x, T y) <0x2f1d078 + 0x00012> in <filename unknown>:0 
  at System.Linq.EnumerableSorter`2[TElement,TKey].CompareAnyKeys (System.Int32 index1, System.Int32 index2) <0x2f1cf40 + 0x00024> in <filename unknown>:0 
  at System.Collections.Generic.ComparisonComparer`1[T].Compare (T x, T y) <0x2f1ce80 + 0x00012> in <filename unknown>:0 
  at System.Collections.Generic.ArraySortHelper`1[T].InsertionSort (T[] keys, System.Int32 lo, System.Int32 hi, System.Comparison`1[T] comparer) <0x2f1cdc0 + 0x00064> in <filename unknown>:0 
  at System.Collections.Generic.ArraySortHelper`1[T].IntroSort (T[] keys, System.Int32 lo, System.Int32 hi, System.Int32 depthLimit, System.Comparison`1[T] comparer) <0x2f1cc58 + 0x000ae> in <filename unknown>:0 
  at System.Collections.Generic.ArraySortHelper`1[T].IntrospectiveSort (T[] keys, System.Int32 left, System.Int32 length, System.Comparison`1[T] comparer) <0x2f1c9d0 + 0x00032> in <filename unknown>:0 

main issue is here which value I need to compare when user enter right or wrong value with the database I am checking both "txtusername" and txtusername.Text

@if(empList.username == "txtusername" || empList.username == "txtpassword") //here I am trying to check the when user enter the valid username and password
        {

Answer 1

The controller action has a httpost attribute and you call it with a get(GetFromJsonAsync)? The attribute has to be HttpGet.