Blazor WebAssembly 没有在点击时调用 HttpClient

Question

所以我经常使用 ASP.NET 并认为我会去 blazor 找乐子。所以我只使用 WebAssembly 客户端，尝试使用免费套餐 bing api.

创建搜索视图

每次我点击 HttpClient GetAsync 方法时，整个页面都会重新加载。所以，这是视图

@page "/"
@inject ApiCallHandler Handler

<div class="flex-wrap d-md-inline-block">
    <form Model="@searchString">
        <span>
            <input type="text" class="form-text" value="@searchString" />
            <button type="submit" class="btn btn-primary" @onclick="Search">Search</button>
        </span>
    </form>

    @if (imageResponse == null)
    {

    }
    else
    {
        if (imageResponse.IsSuccess == false)
        {
            <p>Unable to fetch images</p>
        }
        <div class="flex-wrap align-content-center">
            @for (int i = 0; i < imageResponse.Value.Count(); i++)
            {
                var image = imageResponse.Value[i];
                <img class="thmb" src='@image.ThumbnailUrl' />
            }
        </div>
    }
</div>

@code {
    private ImageResponseModel imageResponse;

    public string searchString { get; set; }

    private async Task Search()
    {
        imageResponse = await Handler.ImageSearch(searchString);
    }
}

这是引用的处理程序。

using BingSearch.Models;
using BingSearch.Models.ResponseModels;
using Microsoft.AspNetCore.Components;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Threading.Tasks;

namespace BingSearch.Services
{
    public class ApiCallHandler
    {
        private HttpClient _client;

        public ApiCallHandler()
        {
            _client = new HttpClient() { BaseAddress = new Uri("https://api.bing.microsoft.com/v7.0/images/search") };
            _client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", "MyKeyYouCantHaveIt!");
        }

        public async Task<ImageResponseModel> ImageSearch(string searchString)
        {
            searchString = searchString.Replace(" ", "+");

            var response = await _client.GetAsync($"?q={searchString}&count=10");

            if (response.IsSuccessStatusCode)
            {
                var imageResponse =  JsonConvert.DeserializeObject<ImageResponseModel>(await response.Content.ReadAsStringAsync());
                imageResponse.IsSuccess = response.IsSuccessStatusCode;
                return imageResponse;
            }
            else
            {
                return new ImageResponseModel() { IsSuccess = response.IsSuccessStatusCode};
            }
        }
    }
}

基本上，我一直在尝试使用原始 blazor 模板作为灵感将其组合在一起，但随后基本上将其剥离回 return 只是一些图像。我让它在硬编码 protected override async Task OnInitializedAsync() 的情况下工作得很好，以产生一些结果。但它只是不能通过点击调用！事实上，当我同时启动并为 searchString 设置默认值时，它会显示默认结果，当我更改它并单击提交时，将我的新搜索字符串传递给我的处理程序，但再次重新加载并显示默认结果结果。

我也试过使用@bind 和@bind-value 而不是 value=""

我意识到上面的代码远非最佳，但我始终遵循先让它工作，再让它漂亮的原则。

Answer 1

<button type="submit" class="btn btn-primary" @onclick="Search">Search</button>

应该是

<button type="button" class="btn btn-primary" @onclick="Search">Search</button>

普通的 <form> 不支持 Model= 但您应该可以使用 @bind-value。 value= 仅用于 JavaScript.

<form >
    <span>
        <input type="text" class="form-text" @bind-value="@searchString" />
        <button type="button" class="btn btn-primary" @onclick="Search">Search</button>
    </span>
</form>

Blazor WebAssembly 没有在点击时调用 HttpClient

Blazor WebAssembly not making HttpClient call on click

c#

razor

blazor

blazor-webassembly