홈>
인터넷에서 사용 가능한 많은 게시물을 참조하여 Blaor.Net 응용 프로그램을 개발 중입니다. 내가 직면 한 문제 면도기 파일을 깨끗하고 읽기 쉽게 유지하기 위해 UI에서 seprate 파일로 코드를 이동하려고합니다. 이를 위해 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 호출을하는 대신 별도의 파일에 넣고 싶습니다. 구성 요소는 기본적으로 면도기 페이지의 파일 숨김 코드로 작동합니다
와이즈 비즈하지만 구성 요소를 만들어 면도기로 상속 한 후에는 예외가 발생합니다
와이즈 비즈이 예외 후에 브라우저가 중단되었습니다. 작업 관리자를 통해서만 닫을 수 없습니다
Http.GetJsonAsync>(BaseUrl + "api/Item/GetItems");
관련 질문
- c# : MiniProfiler .Ignore() 확장 메서드는 프로파일링을 비활성화하지 않습니다.
- c# : ASP.NET Core: SPA 기본 페이지 미들웨어는 기본 페이지 '/index.html'을 찾을 수 없기 때문에 반환할 수 없습니다.
- c# : .net5의 EF Core -AddDbContext가 작동하지 않음
- c# : SpecFlow.ExternalData로 인해 dotnet 빌드 실패 -Azure DevOps에 배포할 수 없음
- c# : .NET 6의 새로운 최소 호스팅 모델을 사용하여 통합 테스트에서 Serilog를 침묵시키는 방법
- c# : 키 값이 있는 요청 가져오기에 대해 Odata 8.0.6이 작동하지 않음
- c# : Swagger UI 시도 작업 메서드는 경로 매개변수를 대체하지 않고 대신 "{paramName}" 자리 표시자를 보냅니다.
- MVC C#에서 체크박스의 열거형 값
- c# : 필터 쿼리를 많이 추가하면 solrnet이 충돌합니다.
- c# : .NET 6.0 및 모델 클래스(EF) nullable이 아닌 속성
그래서 약간 리팩토링을해야합니다. 이전 질문에 대한 답변에서 말했듯이
functions
에서 모든 것을 옮겨야합니다. 코드 뒤에 차단하십시오. 기본 클래스를 사용할 때functions
와혼합해서는 안됩니다. 보기에서 차단하십시오.http 호출과 관련하여 이미 수행 된 기본 URL을 추가 할 필요는 없지만 HTTP 클라이언트를 새로 업데이트하지 않아야합니다. 코드 뒤에 인스턴스를 삽입해야합니다.
코드에 몇 가지 다른 사소한 문제가 있으므로 코드의 모양을 보여주기 위해 재 작업하는 것이 더 쉬울 수 있다고 생각했습니다.
백엔드가 올바르게 설정되어있는 한 (예 : CORS) 예상대로 작동합니다.