[Blazor] 프로젝트 생성 및 blazor 페이지 관리자 페이지에 추가.

1. 기존 프로젝트명을 VisualAcademy > HyeongGyu_Project로 변경.
2. 각 기능별 프로젝트 생성
   1) Apis(ASP .Net Core API 템플릿) : RestApi 담당 프로젝트
   2) Models(.NET Standard 2.1) : Model담당 (.NET기반 프로젝트에서 공통으로 사용할 수 있도록 Standard로 생성
   3) Models.Tests(MSTest) : Test를 위해 생성 (아직 사용해 보지 않아 사용 법은 아직 모름.,..)
   4) SingleSignOn(ASP .NET Core 빈페이지) : 각 웹프로젝트의 인증 관련 로직 구성 예정. 로그인,로그아웃 등.
   5) SqlServer(SQL Server 데이터베이스 프로젝트) : 아마 MS-SQL 연결 관련 로직 구성할 듯...
3. Admin프로젝트(관리자 페이지) 에서 navigation 메뉴에 샘플 메뉴 추가.
4. 기존 blazor강의에서 만든 TodoListInMemory페이지 생성

---

1. Model 생성

1. HyeongGyu_Project.Models에 Todo.cs파일 생성

namespace HyeongGyu_Project.Models
{
    public class Todo
    {
        public int ID { get; set; }
        public string todo { get; set; }
        public bool IsDone { get; set; }
    }
}

2. HyeongGyu_Project, HyeongGyu_Project.Admin 페이지에서
   HyeongGyu_Project.Models 프로젝트 참조 추가 후 _imports.razor 파일에서
   using HyeongGyu_Project.Models 추가(페이지 별로 using을 하지 않기 위해)

• _imports.razor

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using HyeongGyu_Project.Admin
@using HyeongGyu_Project.Admin.Shared

@using MatBlazor

@using HyeongGyu_Project.Models

2. TodoListPage만들기

1. Pages/Sampls/TodoListInMemory.razor 생성.
   기존에 만들었던 페이지 복사 하기
   만약 Todo 객체가 에러가 난다면 HyeongGyu_Project.Models 참조 추가 및 using 구문 추가했는지 확인 필요.

@page "/Samples/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 = false });
        newTodo = string.Empty;
    }

}

3. navigation에서 메뉴 추가하기

1. _Layout.cshtml에서 네비 메뉴 부분을 복사해서 변경으로 주석친 부분을 수정 함.
   id 를collapseDemo로 바꾼 이유는 아래 복사한 부분과 id가 같으면 메뉴를 open할때 같이 열리기 때문.

            <!--Blazor강의에서 만든 샘플 파일 메뉴 추가.-->
            <!-- Divider -->
            <hr class="sidebar-divider">

            <!-- Heading -->
            <div class="sidebar-heading">
                DEMO <!--변경-->
            </div>

            <!--<div id="collapseDemo" class="collapse" aria-labelledby="headingPages" 에서 id를 변경하지 않고 그대로 사용 하면 기존 메뉴와 동시에 동작됨.-->
            <!-- Nav Item - Pages Collapse Menu -->
            <li class="nav-item">
                <a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseDemo"<!--변경--> aria-expanded="true"
                   aria-controls="collapseDemo"<!--변경-->>
                    <i class="fas fa-fw fa-folder"></i>
                    <span>Samples<!--변경--></span>
                </a>
                <div id="collapseDemo"<!--변경--> class="collapse" aria-labelledby="headingPages"
                     data-parent="#accordionSidebar">
                    <div class="bg-white py-2 collapse-inner rounded">
                        <h6 class="collapse-header">LECTURE SAMPLES:</h6>
                        <a class="collapse-item" href="/Samples/TodoListInMemory">TodoListInMemory</a><!--변경-->
                        <a class="collapse-item" href="/Pages/Register">Register</a>
                        <a class="collapse-item" href="/Pages/ForgotPassword">Forgot Password</a>
                        <div class="collapse-divider"></div>
                        <h6 class="collapse-header">Other Pages:</h6>
                        <a class="collapse-item" href="/Pages/NotFoundPage">404 Page</a>
                        <a class="collapse-item" href="/Pages/BlankPage">Blank Page</a>
                    </div>
                </div>
            </li>

2. 완료 화면