>

인터넷에서 사용 가능한 많은 게시물을 참조하여 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");

  • 답변 # 1

    그래서 약간 리팩토링을해야합니다. 이전 질문에 대한 답변에서 말했듯이 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) 예상대로 작동합니다.

  • 이전 github - git add 오류 - 저장소 데이터베이스 git/objects에 객체를 추가 할 수있는 권한이 없습니다
  • 다음 Javascript가 PHP에서 이러한 변수를 객체로 제공하는 이유는 무엇입니까?