COMPONENT Archives - icodebroker

[C#/ASP.NET MVC/.NETCORE] IViewComponentHelper 인터페이스 : InvokeAsync 메소드를 사용해 뷰 컴포넌트의 특정 뷰 호출하기

■ IViewComponentHelper 인터페이스의 InvokeAsync 메소드를 사용해 뷰 컴포넌트의 특정 뷰를 호출하는 방법을 보여준다. ▶ Models/FavoriteModel.cs


namespace TestProject.Models
{
    /// <summary>
    /// 즐겨찾기 모델
    /// </summary>
    public class FavoriteModel
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region ID - ID

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

        #endregion
        #region 제목 - Title

        /// <summary>
        /// 제목
        /// </summary>
        public string Title { get; set; }

        #endregion
        #region URL - URL

        /// <summary>
        /// URL
        /// </summary>
        public string URL { get; set; }

        #endregion
    }
}

namespace TestProject.Models

{

/// <summary>

/// 즐겨찾기 모델

/// </summary>

public class FavoriteModel

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region ID - ID

/// <summary>

/// ID

/// </summary>

public int ID { get; set; }

#endregion

#region 제목 - Title

/// <summary>

/// 제목

/// </summary>

public string Title { get; set; }

#endregion

#region URL - URL

/// <summary>

/// URL

/// </summary>

public string URL { get; set; }

#endregion

}

▶ ViewComponents/FavoriteViewComponent.cs


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

using TestProject.Models;

namespace TestProject.ViewComponents
{
    /// <summary>
    /// 즐겨찾기 뷰 컴포넌트
    /// </summary>
    public class FavoriteViewComponent : ViewComponent
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 호출하기 - Invoke()

        /// <summary>
        /// 호출하기
        /// </summary>
        /// <returns>뷰 컴포넌트 결과</returns>
        public IViewComponentResult Invoke(string page)
        {
            List<FavoriteModel> list = new List<FavoriteModel>()
            {
                new FavoriteModel { ID = 1, Title = "ICODEBROKER", URL = "https://icodebroker.tistory.com/" },
                new FavoriteModel { ID = 2, Title = "구글"       , URL = "https://www.google.com/"          },
                new FavoriteModel { ID = 3, Title = "유튜브"     , URL = "https://www.youtube.com/"         },
                new FavoriteModel { ID = 4, Title = "다음"       , URL = "https://www.daum.net/"            },
                new FavoriteModel { ID = 5, Title = "네이버"     , URL = "https://www.naver.com/"           }
            };

            return View(page, list);
        }

        #endregion
    }
}

using Microsoft.AspNetCore.Mvc;

using System.Collections.Generic;

using TestProject.Models;

namespace TestProject.ViewComponents

{

/// <summary>

/// 즐겨찾기 뷰 컴포넌트

/// </summary>

public class FavoriteViewComponent : ViewComponent

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 호출하기 - Invoke()

/// <summary>

/// 호출하기

/// </summary>

/// <returns>뷰 컴포넌트 결과</returns>

public IViewComponentResult Invoke(string page)

{

List<FavoriteModel> list = new List<FavoriteModel>()

{

new FavoriteModel { ID = 1, Title = "ICODEBROKER", URL = "https://icodebroker.tistory.com/" },

new FavoriteModel { ID = 2, Title = "구글" , URL = "https://www.google.com/" },

new FavoriteModel { ID = 3, Title = "유튜브" , URL = "https://www.youtube.com/" },

new FavoriteModel { ID = 4, Title = "다음" , URL = "https://www.daum.net/" },

new FavoriteModel { ID = 5, Title = "네이버" , URL = "https://www.naver.com/" }

};

return View(page, list);

}

#endregion

}

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


@using TestProject.Models
@model List<FavoriteModel>
<p>디폴트 뷰</p>
<ul>
    @foreach(FavoriteModel favorite in Model)
    {
        <li><a href="@favorite.URL" target="_blank">@favorite.Title</a></li>
    }
</ul>

@using TestProject.Models

@model List<FavoriteModel>

<ul>

@foreach(FavoriteModel favorite in Model)

{

<li><a href="@favorite.URL" target="_blank">@favorite.Title</a></li>

}

</ul>

[C#/ASP.NET MVC/.NETCORE] ViewComponent 클래스 : 데이터를 표시하는 뷰 컴포넌트 만들기

■ ViewComponent 클래스를 사용해 데이터를 표시하는 뷰 컴포넌트를 만드는 방법을 보여준다. ▶ Models/TestModel.cs


namespace TestProject.Models
{
    /// <summary>
    /// 테스트 모델
    /// </summary>
    public class TestModel
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region ID - ID

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

        #endregion
        #region 제목 - Title

        /// <summary>
        /// 제목
        /// </summary>
        public string Title { get; set; }

        #endregion
    }
}

namespace TestProject.Models

{

/// <summary>

/// 테스트 모델

/// </summary>

public class TestModel

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region ID - ID

/// <summary>

/// ID

/// </summary>

public int ID { get; set; }

#endregion

#region 제목 - Title

/// <summary>

/// 제목

/// </summary>

public string Title { get; set; }

#endregion

}

▶ ViewComponents/TestListViewComponent.cs


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

using TestProject.Models;

namespace TestProject.ViewComponents
{
    /// <summary>
    /// 테스트 목록 뷰 컴포넌트
    /// </summary>
    public class TestListViewComponent : ViewComponent
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 호출하기 - Invoke()

        /// <summary>
        /// 호출하기
        /// </summary>
        /// <returns>뷰 컴포넌트 결과</returns>
        public IViewComponentResult Invoke()
        {
            List<TestModel> list = new List<TestModel>()
            {
                new TestModel { ID = 1, Title = "ASP.NET Core" },
                new TestModel { ID = 2, Title = "Bootstrap"    },
                new TestModel { ID = 3, Title = "C#"           },
                new TestModel { ID = 4, Title = "Dapper"       },
                new TestModel { ID = 5, Title = "Azure"        },
                new TestModel { ID = 6, Title = "jQuery"       },
                new TestModel { ID = 7, Title = "Angular"      }
            };

            return View(list);
        }

        #endregion
    }
}

using Microsoft.AspNetCore.Mvc;

using System.Collections.Generic;

using TestProject.Models;

namespace TestProject.ViewComponents

{

/// <summary>

/// 테스트 목록 뷰 컴포넌트

/// </summary>

public class TestListViewComponent : ViewComponent

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 호출하기 - Invoke()

/// <summary>

/// 호출하기

/// </summary>

/// <returns>뷰 컴포넌트 결과</returns>

public IViewComponentResult Invoke()

{

List<TestModel> list = new List<TestModel>()

{

new TestModel { ID = 1, Title = "ASP.NET Core" },

new TestModel { ID = 2, Title = "Bootstrap" },

new TestModel { ID = 3, Title = "C#" },

new TestModel { ID = 4, Title = "Dapper" },

new TestModel { ID = 5, Title = "Azure" },

new TestModel { ID = 6, Title = "jQuery" },

new TestModel { ID = 7, Title = "Angular" }

};

return View(list);

}

#endregion

}

▶ Views/Shared/TestList/Default.cshtml


@model List<TestProject.Models.TestModel>
<ul>
    @foreach(TestModel test in Model)
    {
        <li>@test.Title</li>
    }
</ul>

@model List<TestProject.Models.TestModel>

<ul>

@foreach(TestModel test in Model)

{

<li>@test.Title</li>

}

</ul>

▶ Controllers/TestController.cs

[C#/ASP.NET MVC/.NETCORE] ViewComponent 클래스 : 저작권을 표시하는 뷰 컴포넌트 만들기

■ ViewComponent 클래스를 사용해 저작권을 표시하는 뷰 컴포넌트를 만드는 방법을 보여준다. ▶ ViewComponents/CopyrightViewComponent.cs


using Microsoft.AspNetCore. Mvc;
using System;

namespace TestProject.ViewComponents
{
    /// <summary>
    /// 저작권 뷰 컴포넌트
    /// </summary>
    public class CopyrightViewComponent : ViewComponent
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 호출하기 - Invoke()

        /// <summary>
        /// 호출하기
        /// </summary>
        /// <returns>뷰 컴포넌트 결과</returns>
        public IViewComponentResult Invoke()
        {
            string viewName = "Default";

            if(DateTime.Now.Second % 2 == 0)
            {
                viewName = "Alternate";
            }

            return View(viewName);
        }

        #endregion
    }
}

using Microsoft.AspNetCore. Mvc;

using System;

namespace TestProject.ViewComponents

{

/// <summary>

/// 저작권 뷰 컴포넌트

/// </summary>

public class CopyrightViewComponent : ViewComponent

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 호출하기 - Invoke()

/// <summary>

/// 호출하기

/// </summary>

/// <returns>뷰 컴포넌트 결과</returns>

public IViewComponentResult Invoke()

{

string viewName = "Default";

if(DateTime.Now.Second % 2 == 0)

{

viewName = "Alternate";

}

return View(viewName);

}

#endregion

}

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


<div class="text-center">
    Copyright &copy; @DateTime.Now.Year all right reserved.
</div>

</div>

▶ Views/Shared/Components/Copyright/Alternate.cshtml


<div class="text-center">
    Copyright &copy; @DateTime.Now.Year <em>Icodebroker</em> all right reserved.
</div>

</div>

▶ Controllers/TestController.cs

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

■ ViewComponent 클래스에서 뷰 컴포넌트를 사용하는 방법을 보여준다. ▶ 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
    }
}

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

}

▶ 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
    }
}

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

}

▶ 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
    }
}

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>

@using TestProject.Models

@model List<DataModel>

<ul>

@foreach(DataModel data in Model)

{

<li>@data.ID, @data.Name, @data.Title</li>

}

</ul>

▶ Controllers/DataController.cs