forked from Study/Blazor
57 lines
1.4 KiB
Plaintext
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>
|
|
|