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

TestProject.zip

다운로드

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

 

728x90

 

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

 

300x250

 

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

 

▶ Views/Shared/Components/Favorite/Alternate.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>

 

▶ Controllers/TestController.cs

using Microsoft.AspNetCore.Mvc;

namespace TestProject.Controllers
{
    /// <summary>
    /// 테스트 컨트롤러
    /// </summary>
    public class TestController : Controller
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

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

        /// <summary>
        /// 인덱스 페이지 처리하기
        /// </summary>
        /// <returns>액션 결과</returns>
        public IActionResult Index()
        {
            return View();
        }

        #endregion
    }
}

 

▶ Views/Test/Index.cshtml

@{
    Layout = null;
}
<p>IViewComponentHelper 인터페이스 : InvokeAsync 메소드를 사용해 뷰 컴포넌트의 특정 뷰 호출하기</p>
<hr />
@await Component.InvokeAsync("Favorite", new { page = "Alternate" })