我正在开发 Blaor.Net 应用程序,参考了互联网上的许多帖子。我面临的问题是,我想将代码从 UI 移动到单独的文件,以保持 razor 文件干净、可读和可理解。为此,我将 UI 端 C# 代码保存到一个从 BaseComponent 继承的单独组件中
@page "/Item"
@using WebApplication1.Shared
@using WebApplication1.Client.Services;
@inherits ItemComponent
@if (ItemList != null)
{
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Category</th>
<th>Metal</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
@foreach (var item in ItemList)
{
<tr>
<td>@item.ID</td>
<td>@item.Name</td>
<td>@item.Category</td>
<td>@item.Metal</td>
<td>@item.Price</td>
<td>@item.Quantity</td>
</tr>
}
</tbody>
</table>
}
@functions{
public List<ItemModel> ItemList;
ItemComponent IC = new ItemComponent();
protected override async Task OnInitAsync()
{
ItemList = IC.GetItems().Result;
}
}
ItemComponent.cs
public class ItemComponent : ComponentBase
{
private string BaseUrl = "http://localhost:52114/";
public async Task<List<ItemModel>> GetItems()
{
HttpClient Http = new HttpClient();
return await Http.GetJsonAsync<List<ItemModel>>(BaseUrl + "api/Item/GetItems");
}
}
我不想在 UI 中进行 api 调用,而是希望将其放在单独的文件中,组件基本上充当此处 razor 页面的文件隐藏代码
Http.GetJsonAsync>(BaseUrl + "api/Item/GetItems");
但是创建组件并将其继承到 razor 后会抛出异常
System.Net.Http.HttpRequestException:无法建立连接,因为目标计算机主动拒绝它。 --->
System.Net.Sockets.SocketException:无法建立连接
因为目标机器主动拒绝了。在
System.Net.Http.ConnectHelper.ConnectAsync(字符串主机,Int32端口,
CancellationToken CancellationToken) --- 内部异常堆栈结束
跟踪 --- 在 System.Net.Http.ConnectHelper.ConnectAsync(String host,
Int32 端口、CancellationToken(cancellationToken)位于
System.Threading.Tasks.ValueTask1.get_Result() 在
System.Net.Http.HttpConnectionPool.ConnectAsync(HttpRequestMessage
请求、布尔值allowHttp2、CancellationToken(取消令牌)
在 System.Threading.Tasks.ValueTask1.get_Result() 处
System.Net.Http.HttpConnectionPool.CreateHttp11ConnectionAsync(HttpRequestMessage
请求,CancellationToken(取消令牌)
System.Threading.Tasks.ValueTask1.get_Result() 在
System.Net.Http.HttpConnectionPool.GetHttpConnectionAsync(HttpRequestMessage
请求,CancellationToken(取消令牌)
System.Threading.Tasks.ValueTask1.get_Result() 在
System.Net.Http.HttpConnectionPool.SendWithRetryAsync(HttpRequestMessage
请求、布尔值 doRequestAuth、CancellationToken(取消令牌)
在 System.Net.Http.RedirectHandler.SendAsync(HttpRequestMessage
请求,CancellationToken(取消令牌)
System.Net.Http.HttpClient.FinishSendAsyncUnbuffered(任务1 sendTask,
HttpRequestMessage 请求,CancellationTokenSource cts,布尔值
disposeCts) 在 System.Net.Http.HttpClient.GetStringAsyncCore(Task1
获取任务)在
Microsoft.AspNetCore.Builder.BlazorMonoDebugProxyAppBuilderExtensions.GetOpenedBrowserTabs(字符串
调试器主机)位于
Microsoft.AspNetCore.Builder.BlazorMonoDebugProxyAppBuilderExtensions.DebugHome(HttpContext
语境)
浏览器在此异常后挂起,无法关闭,只能通过任务管理器关闭
所以你还需要进行一些重构。正如我在回答您之前的问题时所说,您需要将所有内容从functions
块到后面的代码中。当使用基类时你不应该将其与functions
阻止在视图中。
就您的 http 调用而言,您不需要添加已经为您完成的基本 URL,但您也不应该新建 HTTP 客户端。您应该将一个实例注入到您的代码后面。
您的代码中还存在一些其他小问题,因此我认为重新编写它以显示其外观可能会更容易。
@page "/Item"
@inherits ItemComponent
@if (ItemList != null)
{
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Category</th>
<th>Metal</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
@foreach (var item in ItemList)
{
<tr>
<td>@item.ID</td>
<td>@item.Name</td>
<td>@item.Category</td>
<td>@item.Metal</td>
<td>@item.Price</td>
<td>@item.Quantity</td>
</tr>
}
</tbody>
</table>
}
public class ItemComponent : ComponentBase
{
[Inject] HttpClient HttpClient { get; set; }
public List<ItemModel> ItemList;
protected override async Task OnInitAsync()
{
ItemList = await GetItems();
}
public async Task<List<ItemModel>> GetItems()
{
return await HttpClient.GetJsonAsync<List<ItemModel>>("api/Item/GetItems");
}
}
只要您的后端设置正确(例如:CORS),这应该可以按预期工作。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)