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 模板作为灵感将其组合在一起，但随后基本上将其剥离回来仅返回一些图像。我用硬编码的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>