如何在 blazor webassembly 應用程序（客戶端）中調用 blazor 服務器應用程序（登錄 webapi）

Question

首先，我創建 blazor 服務器應用程序並創建一個登錄 webapi，然后添加一個 blazor webassembly 應用程序項目以調用 webapi

blazor 服務器應用項目：

查看登錄 webapi blazor 服務器應用程序的響應

blazor webassembly 應用項目：

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

看錯誤圖片：

查看我的數據庫我只有一條記錄：

項目層次結構：

我的 webapi 在服務器端工作正常，但現在我試圖在客戶端調用登錄 webapi

這是錯誤：

 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當用戶在數據庫中輸入正確或錯誤的值時我需要比較哪個值我正在檢查“txtusername”和 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

controller 操作具有 httpost 屬性，您可以使用 get(GetFromJsonAsync)? 該屬性必須是 HttpGet。