问单击时，Blazor WebAssembly不进行HttpClient调用
EN

Stack Overflow用户

提问于 2021-08-18 01:40:37

回答 1查看 199关注 0票数 1

所以我经常使用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设置了默认值后，它会显示默认结果，当我更改它并单击submit时，它会将我的新搜索字符串传递给我的处理程序，但还是会重新加载，并显示默认结果。

我还尝试使用@bind和@bind-value代替value="“

我意识到上面的代码远不是最优的，但我总是遵循先让它工作，然后让它变得漂亮的原则。

blazor-webassembly

razor

blazor

即时通信 IM 首购99.9元/

丰富 UI 组件助您极速集成聊天、会话、群组、直播弹幕等完备 IM 功能，全球接入，全平台跨终端互通，安全可靠

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-08-18 01:43:00

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

应该是

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

普通的绑定值不支持Model=，但是您应该能够使用@bind- <form>。只针对JavaScript使用value=。

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