02_02 TodoListInMemory

새프로젝트 - blazor - blazor서버앱 - 인증은 개별인증을 한다 .

 

새로운 프로젝트를 만들었으면 솔루션 - 우클릭 - 프로젝트추가 - 클래스라이브러리(닷넷스탠다드) - BlazorApp.Model로 프로젝트를 만들자. 

 

BlazorApp.Model 프로젝트 - 우클릭 - 추가 - 새항목 - TodoItem.cs파일 추가 

다음과 같이 프로퍼티들을 추가하자. 

namespace BlazorApp.Models
{
    public class TodoItem
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public bool IsDone { get; set; }
    }
}

 

pages폴더 - 추가 - 새항목 - blazor 구성요소(Component) 추가 - 이름은 TodoListInMemory 로 생성 

다음과 같이 코드를 입력하자. 

 

@page "/TodoListInMemory" //라우팅 설정 

<h3> 할일 목록 이다.</h3>
<h4> 할일 목록: @todos.Count(t => t.IsDone) </h4> //@를 사용하여 동적으로 요소변경


<ul>
    @foreach(var todo in todos) 
    {
        <li>
            <input type="checkbox" @bind = "@todo.IsDone" /> //bind를 사용하여 todos.item과연결
            <input value="@todo.Title" />
        </li>
    }
</ul>


<form @onsubmit ="@Save"> //form이 submit하면 Save함수 실행 
    할일추가: 
    <input type ="text" @bind="@newTodo" /> //input에서 입력하면 newTodo에 저장 
    <input type ="button" value = "확인" @onclick="@Save" /> //button클릭시 Save함수실행
</form>



@code{
    IList<TodoItem> todos = new List<TodoItem>();
    string newTodo = "";

    public void Save(){
        todos.Add(new TodoItem { Title = newTodo, IsDone = true });
        newTodo = "";
    }
}

 

 

 

 

 

 

예시화면