[C#/ASP.NET MVC] ViewComponent 클래스 : 뷰 컴포넌트 사용하기

728x90

반응형

728x170

TestProject.zip

다운로드

▶ Models/DataModel.cs

namespace TestProject.Models
{
    /// <summary>
    /// 데이터 모델
    /// </summary>
    public class DataModel
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region ID - ID

        /// <summary>
        /// ID
        /// </summary>
        public int ID { get; set; }

        #endregion
        #region 성명 - Name

        /// <summary>
        /// 성명
        /// </summary>
        public string Name { get; set; }

        #endregion
        #region 직함 - Title

        /// <summary>
        /// 직함
        /// </summary>
        public string Title { get; set; }

        #endregion
    }
}

 

728x90

 

▶ Models/DataRepository.cs

using System.Collections.Generic;
using System.Linq;

namespace TestProject.Models
{
    /// <summary>
    /// 데이터 저장소
    /// </summary>
    public class DataRepository
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 소스 리스트
        /// </summary>
        private readonly List<DataModel> sourceList = new List<DataModel>()
        {
            new DataModel { ID = 1, Name = "김철수", Title = "차장" },
            new DataModel { ID = 2, Name = "이영희", Title = "과장" },
            new DataModel { ID = 3, Name = "홍길동", Title = "대리" }
        };

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 리스트 구하기 - GetList()

        /// <summary>
        /// 리스트 구하기
        /// </summary>
        /// <returns>리스트</returns>
        public List<DataModel> GetList()
        {
            return this.sourceList;
        }

        #endregion
        #region 리스트 구하기 - GetList(name)

        /// <summary>
        /// 리스트 구하기
        /// </summary>
        /// <param name="name">성명</param>
        /// <returns>리스트</returns>
        public List<DataModel> GetList(string name)
        {
            return this.sourceList.Where(n => n.Name.ToLower().Equals(name.ToLower())).ToList();
        }

        #endregion
        #region 데이터 구하기 - GetData(id)

        /// <summary>
        /// 데이터 구하기
        /// </summary>
        /// <param name="id">ID</param>
        /// <returns>데이터</returns>
        public DataModel GetData(int id)
        {
            return this.sourceList.Where(n => n.ID == id).SingleOrDefault();
        }

        #endregion
    }
}

 

300x250

 

▶ ViewComponents/DataListViewComponent.cs

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Threading.Tasks;

using TestProject.Models;

namespace TestProject.ViewComponents
{
    /// <summary>
    /// 데이터 리스트 뷰 컴포넌트
    /// </summary>
    public class DataListViewComponent : ViewComponent
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 비동기 호출하기 - InvokeAsync(name)

        /// <summary>
        /// 비동기 호출하기
        /// </summary>
        /// <param name="name">성명</param>
        /// <returns>뷰 컴포넌트 결과 태스크</returns>
        public async Task<IViewComponentResult> InvokeAsync(string name)
        {
            List<DataModel> list = await GetListAsync(name);

            return View(list);
        }

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 리스트 비동기 구하기 - GetListAsync(name)

        /// <summary>
        /// 리스트 비동기 구하기
        /// </summary>
        /// <param name="name">성명</param>
        /// <returns>리스트 태스크</returns>
        private Task<List<DataModel>> GetListAsync(string name)
        {
            return Task.FromResult(GetList(name));
        }

        #endregion
        #region 리스트 구하기 - GetList(name)

        /// <summary>
        /// 리스트 구하기
        /// </summary>
        /// <param name="name">성명</param>
        /// <returns>리스트</returns>
        private List<DataModel> GetList(string name)
        {
            DataRepository repository = new DataRepository();

            return repository.GetList(name);
        }

        #endregion
    }
}

 

▶ Views/Shared/Components/DataList/Default.cshtml

@using TestProject.Models
@model List<DataModel>
<ul>
    @foreach(DataModel data in Model)
    {
        <li>@data.ID, @data.Name, @data.Title</li>
    }
</ul>

 

▶ Controllers/DataController.cs

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;

using TestProject.Models;

namespace TestProject.Controllers
{
    /// <summary>
    /// 데이터 컨트롤러
    /// </summary>
    public class DataController : Controller
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 인덱스 페이지 처리하기 - Index()

        /// <summary>
        /// 인덱스 페이지 처리하기
        /// </summary>
        /// <returns>액션 결과</returns>
        public IActionResult Index()
        {
            DataRepository repository = new DataRepository();

            List<DataModel> list = repository.GetList();

            return View(list);
        }

        #endregion
    }
}

 

▶ Views/Data/Index.cshtml

@using TestProject.Models
@model IEnumerable<DataModel>
@{
    ViewData["Title"] = "Data Page";
}
<h3>데이터 목록 출력</h3>
<ul>
    @foreach (DataModel data in Model)
    {
        <li>@data.ID : @data.Name, @data.Title</li>
    }
</ul>
<hr />
<h3>뷰 컴포넌트 사용</h3>
<div>
    @await Component.InvokeAsync("DataList", new { name = "이영희" })
</div>

728x90

반응형

그리드형(광고전용)

• 카카오스토리
• 트위터
• 페이스북

'C# > ASP.NET MVC' 카테고리의 다른 글

[C#/ASP.NET MVC] RAZOR 구문에서 @ 기호 사용하기  (0)	2020.10.05
[C#/ASP.NET MVC] RAZOR 구문에서 변수 사용하기  (0)	2020.10.05
[C#/ASP.NET MVC] ControllerBase 클래스 : Content 메소드 사용하기  (0)	2020.10.05
[C#/ASP.NET MVC] Controller 클래스 : 액션 메소드 사용하기  (0)	2020.10.05
[C#/ASP.NET MVC] IRazorPage 인터페이스 : Layout 속성을 사용해 레이아웃 적용 방지하기  (0)	2020.10.05
[C#/ASP.NET MVC] ViewComponent 클래스 : 뷰 컴포넌트 사용하기  (0)	2020.10.04
[C#/ASP.NET MVC] @inject 지시문 : 뷰 페이지에서 의존성 주입하기  (0)	2020.10.04
[C#/ASP.NET MVC] RouteAttribute 클래스 : 어트리뷰트 라우팅 사용하기  (0)	2020.10.04
[C#/ASP.NET MVC] DeveloperExceptionPageExtensions 클래스 : UseDeveloperExceptionPage 확장 메소드를 사용해 개발자 예외 페이지 사용 설정하기  (0)	2020.10.04
[C#/ASP.NET MVC] WelcomePageExtensions 클래스 : UseWelcomePage 확장 메소드를 사용해 환영 페이지 표시하기  (0)	2020.10.04
[C#/ASP.NET MVC] StatusCodePagesExtensions 클래스 : UseStatusCodePages 확장 메소드를 사용해 상태 코드 페이지 미들웨어 추가하기  (0)	2020.10.04