如何在Blazor中创建div元素

Question

我正在使用Blazor服务器端和.Net 5编写一个应用程序。我希望当我在搜索框中写文本时，它会在新的div中显示结果。但是，不会显示搜索结果。当我调试来自服务的代码时，工作正常。

@page "/"
@using MovieSearch.Service
@using MovieSearch.Data
@using MovieSearch.Helpness
@inject IOMDbService service
<div class="movie-search">
<div class="search-container">
<form action="/">
<input type="text" placeholder="Find a movie" @bind-value="@searchTerm" />
<button type="submit" @onclick="FindMovies"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="movies">
@if(moviesResult != null)
{
if(!moviesResult.Success)
{
foreach(var error in moviesResult.Errors)
{
<p>@error.Message</p>
}
}
else
{
foreach(var movie in moviesResult.Value)
{
<div class="movie">
<p>@movie.Title</p>
<img src="@movie.Poster" />
</div>
}
}
}
</div>
@code
{
private string searchTerm;
private Result<IEnumerable<Movie>> moviesResult;
async Task FindMovies()
{
moviesResult = await service.FindMovies(searchTerm);
}
}

我可以做些什么来查看结果？

Answer 1

尝试从更改代码的这一部分

<form action="/">
<input type="text" placeholder="Find a movie" @bind-value="@searchTerm" />
<button type="submit" @onclick="FindMovies"><i class="fa fa-search"></i></button>
</form>

到这个

<input type="text" placeholder="Find a movie" @bind-value="@searchTerm" />
<button @onclick="FindMovies"><i class="fa fa-search"></i></button>

换句话说，删除表单标签，同时删除按钮上的类型。我相信blazor现在实际上是在尝试将表单发布到您在表单中指定的任何操作，而不是分配给按钮的onclick处理程序。