Blazor/BlazorApp/Components/Pages/BlogPage/Blog.razor
2024-10-12 16:04:03 +09:00

57 lines
1.4 KiB
Plaintext

@page "/blog"
@rendermode InteractiveServer
<h3>Blog</h3>
@*
Dependency Injection (DI)를 사용하는 블로그 앱
목표: Blazor의 DI 패턴을 이해하고 데이터 관리
포인트
• @inject 사용
• 서비스 라이프사이클 관리 (싱글턴, 트랜지언트, 스코프드)
설명: 블로그 포스트를 추가, 삭제, 수정할 수 있는 간단한 블로그 앱을 만들어보세요. 데이터를 관리하는 서비스 클래스를 DI로 주입해 데이터를 처리합니다.
*@
@if (BlogService.Instance.ReadPosts() == null || BlogService.Instance.ReadPosts().Count == 0)
{
<p>No posts available.</p>
}
else
{
<ul>
@foreach (var post in BlogService.Instance.ReadPosts())
{
<li>
<h4>@post.Title</h4>
<p>@post.Content</p>
<button disabled="@(isEdit)" @onclick="() => EditPost(post.Id)">Edit</button>
<button disabled="@(isEdit)" @onclick="() => RemovePost(post.Id)">Delete</button>
</li>
}
</ul>
}
<hr />
@* *@
<h3>@(isEdit ? "Edit Post" : "Add New Post")</h3>
@* *@
<div class="form-group">
<label>Title:</label>
<InputText @bind-Value="title" />
</div>
@* *@
<div class="form-group">
<label>Content:</label>
<InputTextArea @bind-Value="content" />
</div>
@* *@
<button @onclick = "SavePost">@(isEdit ? "Done" : "Add")</button>