05_12 Index페이지 구현

05_12 Index페이지 구현

 

VideoAppCore프로젝트 - Pages - Videos - _ 폴더 생성 

_ 에 FrmDbcontextTest.razor 이동.

 

Videos 폴더에 Create.razor, Details.razor, Edit.razor, Index.razor 생성

 

Index.razor

@page "/Videos/Index"
@page "/Videos"

<h3>Index</h3>

@code {

}

 

Edit.razor

@page "/Videos/Edit/{id}"

<h3>Edit</h3>

@code {

}

 

Details.razor

@page "/Videos/Details/{id}"

<h3>Details</h3>

@code {

}

 

Create.razor

@page "/Videos/Create"

<h3>Create</h3>

@code {

}

 

Delete.razor 

@page "/Videos/Delete/{id}"

<h3>Delete</h3>

@code {

}

 

 

Index.razor에 다음과 같이 코드를 추가.

@page "/Videos/Index"
@page "/Videos"

<h3>Index</h3>

@inject IVideoRepositoryAsync repository

<div>
    <a href="/Videos/Create" class="btn btn-primary">Create</a>
</div>


@if (videos == null)
{
    <p> Loading... </p>
}
else if(videos.Count == 0)
{
    <p> No Data.. </p>
}
else
{

    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>URL</th>
                <th> &nbsp; </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var video in videos)
            {
                <tr>
                    <td>@video.Id</td>
                    <td>@video.Title</td>
                    <td>@video.Url</td>
                    <td>
                        <a href="/Videos/Edit/@video.Id">Edit</a>
                        <a href="/Videos/Delete/@video.Id">Delete</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}


@code {
    List<Video> videos;

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(3000);
        videos = await repository.GetVideoAsync();
    }
}