ASP.NET MVC에서 동적 메뉴 만들기 – 전체 방법 가이드

ASP.NET

메뉴는 애플리케이션을 쉽게 탐색할 수 있게 만들어 놀라운 UX를 제공하는 데 중요한 역할을 합니다. 특정 섹션에 대한 접근성을 쉽게 만드는 데 사용할 수 있습니다. 확실한 애플리케이션을 보장하려면 애플리케이션의 요소에 쉽게 액세스할 수 있어야 합니다. 사용자가 감각적으로 실행할 수 있도록 직관적이고 흥미로워야 합니다. 이 포스팅에서는 여러 모듈을 만들 수 있으며 사용자의 권한에 따라 ASP.NET을 통해 적절한 메뉴를 동적으로 구현할 수 있습니다.

ASP.NET MVC에서 동적 메뉴 만들기 - 전체 방법 가이드

 

ASP.NET은 뛰어난 효율성과 정확성으로 웹 앱 개발을 강화하는 오픈 소스 서버측 프레임워크입니다. 이는 유용한 기능을 제공하는 인기 있는 콘텐츠 관리 시스템(CRM), 전자상거래 등의 핵심입니다.

다음은 ASP.NET MVC를 통해 사용자 친화적인 동적 메뉴를 만들기 위한 완전한 튜토리얼을 제공하는 포괄적인 가이드입니다. 프로세스는 한 눈에 5단계만 거치면 매우 간단합니다.

프로세스를 정리하고 동적 메뉴를 효율적으로 생성할 수 있는 방법을 살펴보겠습니다.

ASP.NET MVC에서 동적 메뉴 만들기

1단계: 데이터베이스 테이블 생성

ASP.NET MVC 에서 동적 메뉴를 만들기 위한 첫 번째 단계는 설계된 계층 구조(있는 경우)의 모든 메뉴 항목을 보유할 수 있는 데이터베이스 테이블을 생성하는 것입니다. 데이터베이스 테이블은 아래와 같이 간단한 쿼리로 생성할 수 있습니다.

Create Table Menus(ID int Primary Key Identity(1,1), ParentID int foreign key References Menus(ID), Title varchar(50), Description varchar(250))
 
이 쿼리는 4개의 값을 보유하는 메뉴 테이블을 생성합니다. 이러한 값은 다음과 같습니다.

ID: 자동 생성된 기본 키
상위 ID: 외래 키
제목: 필드 이름
설명: 사용자가 메뉴 위로 마우스를 가져갈 때 표시하려는 정보입니다.

이를 통해 원하는 테이블이 데이터베이스에 생성됩니다.

2단계: 테이블에 값 삽입
간단한 삽입 쿼리를 사용하여 테이블에 데이터를 추가할 수 있습니다. 이제 두 가지 가능성이 있습니다. 즉, 메뉴에 하위 항목을 추가로 포함하는 여러 상위 항목이 있거나 상위 항목만 있을 수 있습니다. 따라서 앱 요구 사항에 따라 값을 삽입해야 합니다.

테이블 메뉴에 값을 삽입하는 쿼리입니다.

Insert Into Menus(null, 'Item One', 'Desc') // First Parent Item

Insert Into Menus(null, 'Item Two, 'Desc') // Second Parent Item

Insert Into Menus(null, 'Item Three', 'Desc') // Third Parent Item

 

Insert Into Menus(1, 'Item Sub One', 'Desc') // Child of First Parent Item

Insert Into Menus(2, 'Item Sub Two', 'Desc') // Child of Second Parent Item

Insert Into Menus(3 'Item Sub Three', 'Desc') // Child of Third Parent Item

위에서 언급한 쿼리를 구현하면 메뉴 테이블에는 메뉴에 세 개의 항목이 포함되고 각 항목에는 추가로 하위 항목이 포함됩니다.

3단계: 테이블에서 데이터 가져오기
이제 다음 단계는 1단계에서 생성된 Menus 테이블에서 메뉴 항목을 가져오고 모든 항목의 목록을 반환하는 것입니다.

이를 위해 MyMenu 클래스에 GetMenus() 함수가 생성됩니다. 이 함수에는 메뉴 항목을 가져오고 목록을 통해 반환하는 데 도움이 되는 루프가 있습니다. 동일한 코드 줄은 다음과 같습니다.

모델의 코드 조각:

public static class MyMenu

{

   /// <summary>

   /// Get List of All Menu Items from Database

   /// </summary>      

   /// <returns>Returns List<Menus> object</returns>

   public static List<Menus> GetMenus()

   {

       using(var context = new ProjectEntities())

       {

            return context.Menu.ToList();

        }

    }

}

4단계: 생성된 메뉴를 화면에 표시
이제 데이터베이스에서 메뉴 항목을 가져왔으면 이를 뷰에 표시할 차례입니다.

보기용 코드 조각:

@{

    List<Menus> myMenu = MyMenu.GetMenus();

    var plist = myMenu.Where(m => m.ParentID == null).ToList(); // This will list main menu items on which we'll apply loop to display them.

    if (plist != null && plist.Count > 0)

    {

        <ul class="nav">

        @foreach (var pitem in plist)

        {

            <li>

                <a href="{URL-Required} title="@Description">@pitem.Title</a>

                @{

                    var clist = myMenu.Where(m => m.ParentID == pitem.ID).ToList();

                    if (clist != null && clist.Count > 0)

                    {

                        <ul>

                            @foreach (var citem in clist)

                            {

    <li><a href="{URL-Required}"title="@Description">@citem.Title</a></li>

                            }

                        </ul>

                    }

                }

            </li>

        }

        </ul>

    }

}

여기서는 ui 및 li HTML 태그가 루프에 사용됩니다. 이렇게 하면 생성된 메뉴를 보기에 표시하는 데 도움이 됩니다. 이제 다음 단계로 넘어갑니다.

5단계: 매력적으로 보이도록 메뉴를 아름답게 꾸미세요.
매력적이고 쉽게 읽을 수 있는 메뉴를 보장하려면 시각적으로 매력적이고 흥미롭게 보이도록 만드는 것이 필수적입니다. CSS를 적절하게 사용하여 원하는 방식으로 메뉴의 모양과 느낌을 향상시킬 수 있습니다. 여기에서는 탐색 편의성을 높이고 매력적인 메뉴를 보장하기 위해 CSS 파일에 다음 코드 덩어리를 통합했습니다.

코드 조각 CSS:

ul, ol, li {list-style: outside none none;}

.nav {float: left;padding: 0;background-color: #5eab1f;}

.nav li {display: inline-block;position: relative;vertical-align: middle;}

.nav li:hover, .nav li.active {background-color: #4c9312;}

.nav li a {color: #fff;float: left;font-size: 15px;padding: 16px 14px; text-decoration: none;}

.nav li ul {background-color: #fff;border-radius: 0 0 5px 5px;box-shadow: 0 2px 3px #000;display: none;min-width: 200px;padding: 20px 0;position: absolute;top: 48px;z-index: 9999;}

.nav li ul:before {border-bottom: 8px solid #fff;border-left: 8px solid transparent;border-right: 8px solid transparent;content: "";left: 28%;position: absolute;top: -8px;}

.nav ul li {float: left;width: 100%;}

.nav ul li a {color: #333;float: left;font-size: 15px;padding: 10px 5%;width: 90%;}

.nav li:hover, .nav li.active {background-color: #4c9312;}

이 CSS는 몇 가지 요구 사항을 고려하여 작성되었으므로 원하는 방식으로 개발하여 시각적 모양에 상당한 변화를 가져올 수 있습니다. 따라서 UX 및 디자인 요구 사항에 따라 CSS를 간소화할 수 있습니다.

 

이 절대 가이드를 따르면 ASP.NET MVC를 통해 아름다운 동적 메뉴를 효율적으로 만들 수 있습니다. 탐색의 편의성을 극대화하면서 각 단계를 철저하게 진행하여 원하는 메뉴를 디자인하는 것이 좋습니다.