강의 제목 7. TodoListInMemory_초간단 인-메모리 TODO 리스트 만들기
간단한 ToDoList 페이지
- 페이지에서 할일을 메모를 하고 체크 박스를 통해 완료 유무 체크
- 강의 에서는 inMemory방식으로만 진행 했으며 개인적으로 DB연동 페이지도
만들어 봤습니다.
InMemory TodoList
- TOdoListInMemoery 하단 박스에 할일 작성후 enter를 하면 할일 목록이 추가됨.
- 남은 할일은 체크박스가 체크 되지 않은(완료되지 않은) 목록의 count
- 할일을 완료 하면 체크 박스를 체크 하면 남은 할일 count가 줄어듬.
- TodoListInMemory.razor 페이지 추가
@page "/TodoListInMemory"
<h2>TodoListInMemory</h2>
<form @onsubmit="Save">
<input @bind=@newTodo/>
</form>
<h3>남은 할일 @todoList.Count(t => !t.IsDone) 개 남았습니다.</h3>
<br />
@if (@todoList != null)
{
<ul>
@foreach (var todo in todoList)
{
<li>
<input type="checkbox" @bind="@todo.IsDone" />
<input @bind="@todo.todo" />
</li>
}
</ul>
}
else
{
<p>로딩중 .....</p>
}
@code {
List<Todo> todoList = new List<Todo>();
string newTodo = string.Empty;
//page 로드시 발생하는 이벤트.
protected override void OnInitialized()
{
for (int i = 1; i <= 10; i++)
todoList.Add(new Todo() { ID = i, todo = $"할일 {i.ToString("00")}" ,IsDone = false });
}
void Save()
{
int maxCount = todoList.Count + 1;
todoList.Add(new Todo() { ID = maxCount, todo = newTodo, IsDone = true });
newTodo = string.Empty;
}
}- NavMenu.razor에 페이지 링크 추가
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">BlazorApp</a>
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="Idea">
<span class="oi oi-list-rich" aria-hidden="true"></span> Idea
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="TodoListInMemory">
<span class="oi oi-list-rich" aria-hidden="true"></span> TodoListInMemory
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="TodoList">
<span class="oi oi-list-rich" aria-hidden="true"></span> TodoList
</NavLink>
</div>
</nav>
</div>
@code {
private bool collapseNavMenu = true;
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}todoList DB연동
- TOdoListInMemoery 전체적인 기능은 비슷 하며 이미 등록한 할일을 삭제하는 기능 및
DB연동 추가. - DB는 ER CORE를 사용
- 모델을 따로 관리 하기 위해 모델 프로젝트 새로 생성 후 Todo.cs 추가
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace BlazorApp.Models
{
public class Todo
{
public int ID { get; set; }
public string todo { get; set; }
public bool IsDone { get; set; }
}
}- Repository 인터페이스(ITodoRepository.cs) 및 클래스(TodoRepository.cs) 추가.(DB 연동)
using BlazorApp.Models;
namespace BlazorApp.Control
{
public interface ITodoRepository
{
Task<Todo> SetTodo(Todo todo);
Task<Todo> DeleteTodo(Todo todo);
Task<List<Todo>> GetAllTodos();
}
}using BlazorApp.Data;
using BlazorApp.Models;
using Microsoft.EntityFrameworkCore;
namespace BlazorApp.Control
{
public class TodoRepository : ITodoRepository
{
readonly ApplicationDbContext _context;
//생성자
public TodoRepository(ApplicationDbContext context)
{
_context = context;
}
public async Task<Todo> DeleteTodo(Todo todo)
{
_context.Todos.Remove(todo);
_context.SaveChanges();
return todo;
}
//todo List Db에서 가져오기
public async Task<List<Todo>> GetAllTodos()
{
return await _context.Todos.ToListAsync();
}
//todo List Db에 insert
public async Task<Todo> SetTodo(Todo todo)
{
_context.Todos.Add(todo);
_context.SaveChanges();
return todo;
}
}
}- ApplicationDbContext.cs Todo Dbset 추가
using BlazorApp.Models;
using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore;
namespace BlazorApp.Data
{
public class ApplicationDbContext : IdentityDbContext
{
public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
: base(options)
{
}
/*모델 추가*/
public DbSet<Idea> Ideas { get; set; }
public DbSet<Todo> Todos { get; set; }
}
}패키지 관리자 콘솔 에서
1. Add-Migration 마이그레이션 추가.
2. Update-Database 데이터 베이스 동기화
- TodoList.razor 페이지 추가
@page "/TodoList"
@inject ITodoRepository TodoReposiroty
<h2>TodoListInMemory</h2>
<form @onsubmit="SetTodoList">
<input @bind=@newTodo/>
</form>
<h3>남은 할일 @todoList.Count(t => !t.IsDone) 개 남았습니다.</h3>
<br />
@if (todoList != null)
{
<ul>
@foreach (var todo in todoList)
{
<li>
<input type="checkbox" @bind="@todo.IsDone" />
<input @bind="@todo.todo" />
<input type="button" @onclick="() => DeleteTodo(todo)" value="삭제">
</li>
}
</ul>
}
else
{
<p>로딩중 .....</p>
}
@code {
List<Todo> todoList = new List<Todo>();
string newTodo = string.Empty;
void a(string message)
{
// 여기에 메소드 실행 시 수행할 코드를 작성합니다.
Console.WriteLine(message);
}
//page 로드시 발생하는 이벤트.
protected override async Task OnInitializedAsync()
{
await GetTodos();
}
private async Task<List<Todo>> GetTodos()
{
todoList = await TodoReposiroty.GetAllTodos();
return todoList;
}
private async Task SetTodoList()
{
await TodoReposiroty.SetTodo(new Todo() { todo = newTodo });
await GetTodos();
newTodo = string.Empty;
}
private async Task DeleteTodo(Todo todo)
{
await TodoReposiroty.DeleteTodo(todo);
await GetTodos();
}
}
