C# 如何正确使用.NETCore5.x和Blazor来允许用户执行搜索，然后高效、适当地显示结果，就像Blazor一样？_C#_Blazor Server Side_.net 5

C# 如何正确使用.NETCore5.x和Blazor来允许用户执行搜索，然后高效、适当地显示结果，就像Blazor一样？

C# 如何正确使用.NETCore5.x和Blazor来允许用户执行搜索，然后高效、适当地显示结果，就像Blazor一样？,c#,blazor-server-side,.net-5,C#,Blazor Server Side,.net 5,我是C#、.NETCore和Blazor的新手，我试图在“正确”利用Blazor功能的同时让一个站点正常工作我需要这样做才能工作： @inherits LayoutComponentBase <div> <div> <TopBanners /> </div> <div> <QuickStatusIndicators /> </div> &l

我是C#、.NETCore和Blazor的新手，我试图在“正确”利用Blazor功能的同时让一个站点正常工作

我需要这样做才能工作：

@inherits LayoutComponentBase
<div>
    <div>
        <TopBanners />
    </div>
    <div>
        <QuickStatusIndicators />
    </div>
    <div>
        <div>
            @Body
        </div>
    </div>
</div>

@page "/"
<div class="text-center">
    <HeaderLarge />
    <form method="POST" action="#">
        <DefaultSearch />
        <SearchOptions />
    </form>
</div>

@code {

}

<div id="mainSearchContainer">
    <div id="mainSearchFormContainer">
        <input id="mainSearchInputField" name="queryString" type="text" />
    </div>
</div>

@code {

}

@page "/search"
...
@inject IHttpClientFactory clientFactory
<h3>Search</h3>
<div>
    <input type="text" id="queryString" name="queryString" @bind="queryString" />
    <button @onclick="GetSearchResults">Get It</button>
</div>
<div id="search_response_area">
    @if (fetchedResults != null)
    {
        @foreach (var result in fetchedResults.documents)
        {
            // ...
        }
    }
</div>

@code {
    try
    {
        HttpClient client = new HttpClient();
        client.BaseAddress = new Uri(@"http://192.168.1.234:8080");
        string searchstr = JsonConvert.SerializeObject(search);
        StringContent content = new StringContent(searchstr, Encoding.UTF8, "application/json");
        using HttpResponseMessage httpResponse = await client.PostAsync(("/api/...", content);
        httpResponse.EnsureSuccessStatusCode();
        if (httpResponse.StatusCode == System.Net.HttpStatusCode.OK)
        {
            string response = await httpResponse.Content.ReadAsStringAsync();
            fetchedResults = JsonConvert.DeserializeObject<SearchResultSet>(response);
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
    }
}

@page "/"
...
@inject IHttpClientFactory clientFactory
<div class="text-center">
    <HeaderLarge />
        @if (fetchedResults == null)
        {
            <DefaultSearch />
            <SearchOptions />
        } else {
            <SearchResultsPage />
        }
</div>

@code {
    try
    {
        HttpClient client = new HttpClient();
        client.BaseAddress = new Uri(@"http://192.168.1.234:8080");
        string searchstr = JsonConvert.SerializeObject(search);
        StringContent content = new StringContent(searchstr, Encoding.UTF8, "application/json");
        using HttpResponseMessage httpResponse = await client.PostAsync(("/api/...", content);
        httpResponse.EnsureSuccessStatusCode();
        if (httpResponse.StatusCode == System.Net.HttpStatusCode.OK)
        {
            string response = await httpResponse.Content.ReadAsStringAsync();
            fetchedResults = JsonConvert.DeserializeObject<SearchResultSet>(response);
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
    }
}

用户导航到站点：192.168.1.100

在输入字段中输入查询

我的代码联系了一个招摇过市的API来检索数据

将使用用户请求的数据生成一个“新”页面

简单，是的。。。我已经用标准HTML、PHP、JavaScript、Java做了数百次了，但从未用Blazor做过

我在网站顶部有一个部分，无论用户进入哪个页面，我都希望保持“静态”。像这样：

用户从这里开始

此处显示的结果

\u Hosts.cshtml

页面调用

MainLayout.razor

，其结构如下：

@inherits LayoutComponentBase
<div>
    <div>
        <TopBanners />
    </div>
    <div>
        <QuickStatusIndicators />
    </div>
    <div>
        <div>
            @Body
        </div>
    </div>
</div>

@page "/"
<div class="text-center">
    <HeaderLarge />
    <form method="POST" action="#">
        <DefaultSearch />
        <SearchOptions />
    </form>
</div>

@code {

}

<div id="mainSearchContainer">
    <div id="mainSearchFormContainer">
        <input id="mainSearchInputField" name="queryString" type="text" />
    </div>
</div>

@code {

}

@page "/search"
...
@inject IHttpClientFactory clientFactory
<h3>Search</h3>
<div>
    <input type="text" id="queryString" name="queryString" @bind="queryString" />
    <button @onclick="GetSearchResults">Get It</button>
</div>
<div id="search_response_area">
    @if (fetchedResults != null)
    {
        @foreach (var result in fetchedResults.documents)
        {
            // ...
        }
    }
</div>

@code {
    try
    {
        HttpClient client = new HttpClient();
        client.BaseAddress = new Uri(@"http://192.168.1.234:8080");
        string searchstr = JsonConvert.SerializeObject(search);
        StringContent content = new StringContent(searchstr, Encoding.UTF8, "application/json");
        using HttpResponseMessage httpResponse = await client.PostAsync(("/api/...", content);
        httpResponse.EnsureSuccessStatusCode();
        if (httpResponse.StatusCode == System.Net.HttpStatusCode.OK)
        {
            string response = await httpResponse.Content.ReadAsStringAsync();
            fetchedResults = JsonConvert.DeserializeObject<SearchResultSet>(response);
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
    }
}

@page "/"
...
@inject IHttpClientFactory clientFactory
<div class="text-center">
    <HeaderLarge />
        @if (fetchedResults == null)
        {
            <DefaultSearch />
            <SearchOptions />
        } else {
            <SearchResultsPage />
        }
</div>

@code {
    try
    {
        HttpClient client = new HttpClient();
        client.BaseAddress = new Uri(@"http://192.168.1.234:8080");
        string searchstr = JsonConvert.SerializeObject(search);
        StringContent content = new StringContent(searchstr, Encoding.UTF8, "application/json");
        using HttpResponseMessage httpResponse = await client.PostAsync(("/api/...", content);
        httpResponse.EnsureSuccessStatusCode();
        if (httpResponse.StatusCode == System.Net.HttpStatusCode.OK)
        {
            string response = await httpResponse.Content.ReadAsStringAsync();
            fetchedResults = JsonConvert.DeserializeObject<SearchResultSet>(response);
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
    }
}

而且，

DefaultSearch.razor

看起来像这样：

@inherits LayoutComponentBase
<div>
    <div>
        <TopBanners />
    </div>
    <div>
        <QuickStatusIndicators />
    </div>
    <div>
        <div>
            @Body
        </div>
    </div>
</div>

@page "/"
<div class="text-center">
    <HeaderLarge />
    <form method="POST" action="#">
        <DefaultSearch />
        <SearchOptions />
    </form>
</div>

@code {

}

<div id="mainSearchContainer">
    <div id="mainSearchFormContainer">
        <input id="mainSearchInputField" name="queryString" type="text" />
    </div>
</div>

@code {

}

@page "/search"
...
@inject IHttpClientFactory clientFactory
<h3>Search</h3>
<div>
    <input type="text" id="queryString" name="queryString" @bind="queryString" />
    <button @onclick="GetSearchResults">Get It</button>
</div>
<div id="search_response_area">
    @if (fetchedResults != null)
    {
        @foreach (var result in fetchedResults.documents)
        {
            // ...
        }
    }
</div>

@code {
    try
    {
        HttpClient client = new HttpClient();
        client.BaseAddress = new Uri(@"http://192.168.1.234:8080");
        string searchstr = JsonConvert.SerializeObject(search);
        StringContent content = new StringContent(searchstr, Encoding.UTF8, "application/json");
        using HttpResponseMessage httpResponse = await client.PostAsync(("/api/...", content);
        httpResponse.EnsureSuccessStatusCode();
        if (httpResponse.StatusCode == System.Net.HttpStatusCode.OK)
        {
            string response = await httpResponse.Content.ReadAsStringAsync();
            fetchedResults = JsonConvert.DeserializeObject<SearchResultSet>(response);
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
    }
}

@page "/"
...
@inject IHttpClientFactory clientFactory
<div class="text-center">
    <HeaderLarge />
        @if (fetchedResults == null)
        {
            <DefaultSearch />
            <SearchOptions />
        } else {
            <SearchResultsPage />
        }
</div>

@code {
    try
    {
        HttpClient client = new HttpClient();
        client.BaseAddress = new Uri(@"http://192.168.1.234:8080");
        string searchstr = JsonConvert.SerializeObject(search);
        StringContent content = new StringContent(searchstr, Encoding.UTF8, "application/json");
        using HttpResponseMessage httpResponse = await client.PostAsync(("/api/...", content);
        httpResponse.EnsureSuccessStatusCode();
        if (httpResponse.StatusCode == System.Net.HttpStatusCode.OK)
        {
            string response = await httpResponse.Content.ReadAsStringAsync();
            fetchedResults = JsonConvert.DeserializeObject<SearchResultSet>(response);
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
    }
}


@代码{
}

我一直在研究如何在Blazor中通过POST请求访问API端点，我的示例似乎没有使用“正常”形式。这很有效，一般情况下如下所示：

@inherits LayoutComponentBase
<div>
    <div>
        <TopBanners />
    </div>
    <div>
        <QuickStatusIndicators />
    </div>
    <div>
        <div>
            @Body
        </div>
    </div>
</div>

@page "/"
<div class="text-center">
    <HeaderLarge />
    <form method="POST" action="#">
        <DefaultSearch />
        <SearchOptions />
    </form>
</div>

@code {

}

<div id="mainSearchContainer">
    <div id="mainSearchFormContainer">
        <input id="mainSearchInputField" name="queryString" type="text" />
    </div>
</div>

@code {

}

@page "/search"
...
@inject IHttpClientFactory clientFactory
<h3>Search</h3>
<div>
    <input type="text" id="queryString" name="queryString" @bind="queryString" />
    <button @onclick="GetSearchResults">Get It</button>
</div>
<div id="search_response_area">
    @if (fetchedResults != null)
    {
        @foreach (var result in fetchedResults.documents)
        {
            // ...
        }
    }
</div>

@code {
    try
    {
        HttpClient client = new HttpClient();
        client.BaseAddress = new Uri(@"http://192.168.1.234:8080");
        string searchstr = JsonConvert.SerializeObject(search);
        StringContent content = new StringContent(searchstr, Encoding.UTF8, "application/json");
        using HttpResponseMessage httpResponse = await client.PostAsync(("/api/...", content);
        httpResponse.EnsureSuccessStatusCode();
        if (httpResponse.StatusCode == System.Net.HttpStatusCode.OK)
        {
            string response = await httpResponse.Content.ReadAsStringAsync();
            fetchedResults = JsonConvert.DeserializeObject<SearchResultSet>(response);
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
    }
}

@page "/"
...
@inject IHttpClientFactory clientFactory
<div class="text-center">
    <HeaderLarge />
        @if (fetchedResults == null)
        {
            <DefaultSearch />
            <SearchOptions />
        } else {
            <SearchResultsPage />
        }
</div>

@code {
    try
    {
        HttpClient client = new HttpClient();
        client.BaseAddress = new Uri(@"http://192.168.1.234:8080");
        string searchstr = JsonConvert.SerializeObject(search);
        StringContent content = new StringContent(searchstr, Encoding.UTF8, "application/json");
        using HttpResponseMessage httpResponse = await client.PostAsync(("/api/...", content);
        httpResponse.EnsureSuccessStatusCode();
        if (httpResponse.StatusCode == System.Net.HttpStatusCode.OK)
        {
            string response = await httpResponse.Content.ReadAsStringAsync();
            fetchedResults = JsonConvert.DeserializeObject<SearchResultSet>(response);
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
    }
}

@page”/search
...
@注入IHttpClientFactory客户端工厂
搜寻
了解了
@if（fetchedResults！=null）
{
@foreach（fetchedResults.documents中的var结果）
{
// ...
}
}
@代码{
尝试
{
HttpClient=新的HttpClient（）；
client.BaseAddress=新Uri（@“http://192.168.1.234:8080");
字符串searchstr=JsonConvert.SerializeObject（搜索）；
StringContent=newstringcontent（searchstr，Encoding.UTF8，“application/json”）；
使用HttpResponseMessage httpResponse=wait client.PostAsync（（“/api/…”，content）；
httpResponse.EnsureAccessStatusCode（）；
if（httpResponse.StatusCode==System.Net.HttpStatusCode.OK）
{
字符串响应=wait httpResponse.Content.ReadAsStringAsync（）；
fetchedResults=JsonConvert.DeserializeObject（响应）；
}
}
捕获（例外情况除外）
{
控制台写入线（例如消息）；
}
}

所以，我的问题是，我是走

路线还是坚持我发现的方法，使用这样的方法成功地工作：

@inherits LayoutComponentBase <div> <div> <TopBanners /> </div> <div> <QuickStatusIndicators /> </div> <div> <div> @Body </div> </div> </div>

@page "/" <div class="text-center"> <HeaderLarge /> <form method="POST" action="#"> <DefaultSearch /> <SearchOptions /> </form> </div> @code { }

<div id="mainSearchContainer"> <div id="mainSearchFormContainer"> <input id="mainSearchInputField" name="queryString" type="text" /> </div> </div> @code { }

@page "/search" ... @inject IHttpClientFactory clientFactory <h3>Search</h3> <div> <input type="text" id="queryString" name="queryString" @bind="queryString" /> <button @onclick="GetSearchResults">Get It</button> </div> <div id="search_response_area"> @if (fetchedResults != null) { @foreach (var result in fetchedResults.documents) { // ... } } </div> @code { try { HttpClient client = new HttpClient(); client.BaseAddress = new Uri(@"http://192.168.1.234:8080"); string searchstr = JsonConvert.SerializeObject(search); StringContent content = new StringContent(searchstr, Encoding.UTF8, "application/json"); using HttpResponseMessage httpResponse = await client.PostAsync(("/api/...", content); httpResponse.EnsureSuccessStatusCode(); if (httpResponse.StatusCode == System.Net.HttpStatusCode.OK) { string response = await httpResponse.Content.ReadAsStringAsync(); fetchedResults = JsonConvert.DeserializeObject<SearchResultSet>(response); } } catch (Exception ex) { Console.WriteLine(ex.Message); } }

@page "/" ... @inject IHttpClientFactory clientFactory <div class="text-center"> <HeaderLarge /> @if (fetchedResults == null) { <DefaultSearch /> <SearchOptions /> } else { <SearchResultsPage /> } </div> @code { try { HttpClient client = new HttpClient(); client.BaseAddress = new Uri(@"http://192.168.1.234:8080"); string searchstr = JsonConvert.SerializeObject(search); StringContent content = new StringContent(searchstr, Encoding.UTF8, "application/json"); using HttpResponseMessage httpResponse = await client.PostAsync(("/api/...", content); httpResponse.EnsureSuccessStatusCode(); if (httpResponse.StatusCode == System.Net.HttpStatusCode.OK) { string response = await httpResponse.Content.ReadAsStringAsync(); fetchedResults = JsonConvert.DeserializeObject<SearchResultSet>(response); } } catch (Exception ex) { Console.WriteLine(ex.Message); } }

@page/“ ... @注入IHttpClientFactory客户端工厂 @if（fetchedResults==null） { }否则{ } @代码{ 尝试 { HttpClient=新的HttpClient（）； client.BaseAddress=新Uri（@“http://192.168.1.234:8080"); 字符串searchstr=JsonConvert.SerializeObject（搜索）； StringContent=newstringcontent（searchstr，Encoding.UTF8，“application/json”）；使用HttpResponseMessage httpResponse=wait client.PostAsync（（“/api/…”，content）； httpResponse.EnsureAccessStatusCode（）； if（httpResponse.StatusCode==System.Net.HttpStatusCode.OK） { 字符串响应=wait httpResponse.Content.ReadAsStringAsync（）； fetchedResults=JsonConvert.DeserializeObject（响应）； } } 捕获（例外情况除外） { 控制台写入线（例如消息）； } }
并让新的
SearchResultsPage.razor
包含
@foreach（fetchedResults.documents中的var结果）
代码

如果我继续进行
，我该如何继续？
目标是获取JSON序列化数据，以便您可以将其反序列化为对象进行表示。我看不到像在普通（阅读：而不是Blazor）页面中那样尝试打包和处理表单帖子有什么特别的好处
我认为你对后一个例子的理解是正确的。我觉得这更像是“无稽之谈”。
@Brian，与后面的代码片段类似，可能类似于：

@page "/search" @inject HttpClient Http <div> <input type="text" id="queryString" name="queryString" @bind="queryString" /> <button @onclick="GetSearchResults">Get It</button> </div> <div id="search_response_area"> @if (fetchedResults != null) { @foreach (var result in fetchedResults.documents) { // ... } } </div> @code { private FetchedResultsModel fetchedResults = null; private async Task GetSearchResults() { ... fetchedResults = await Http.GetJsonAsync<FetchedResultsModel>(<...url to get search results...>); } }
}

我正在一个小测试应用程序中成功地获取JSON，但我不想建造一座金门大桥来跨越小溪。我尝试了后面的示例，但是
位于不同的文档中，它无法访问
Index.razor
的
获取结果，我从中进行API调用。这非常令人沮丧.Blazor在某种程度上打破了可导航页面的概念。我想在任何地方显示结果，都会有一个组件，并将未打包的JSON类作为参数传递。因此，基本上，您在上一篇文章中显示的最后一件事是：“我认为您应该重新考虑如何使用http客户端。在上述代码中注入IHttpClientFactory后，您可能已经在DI中注册了HttpClient，因此应该通过注入的IHttpClientFactory（var client=clientFactory.CreateClient（））创建一个客户端。”不是因为几个原因每次都创建新实例。在这里看一下如何正确使用IHttpClientFactory谢谢您的输入，但我的目标是让页面“更改”从搜索页面到结果页面。我想在用户单击“搜索”按钮后，将搜索区域（上图中灰色阴影的表单区域）替换为结果区域（上图中灰色阴影的数据区域）。您的解决方案似乎是保留这两个区域（表单和数据）同时在页面上。我认为blazor框架面向SPA…正确…这就是为什么我试图在输入搜索条件时隐藏数据区域。然后，当结果从API返回时，隐藏表单区域并显示数据区域两个变量，所以当检索到搜索结果时，您（例如）会更改div的可见性。。。。