asp.net-core
コンポーネントの表示

ビューコンポーネントを作成する

ビューコンポーネントは、再利用可能なロジックとビューをカプセル化します。それらは次のように定義されます。

• ビューのデータを取得および準備し、どのビューをレンダリングするかを決定するロジックを含むViewComponentクラス。
• 1つまたは複数のビュー

それらにはロジックが含まれているため、部分ビューよりも柔軟性があり、依然として懸念が良好に分離されています。

シンプルなカスタムビューコンポーネントは、次のように定義されます。

public class MyCustomViewComponent : ViewComponent
{        
    public async Task<IViewComponentResult> InvokeAsync(string param1, int param2)
    {
        //some business logic

        //renders ~/Views/Shared/Components/MyCustom/Default.cshtml
        return View(new MyCustomModel{ ... });
    }
}

@*View file located in ~/Views/Shared/Components/MyCustom/Default.cshtml*@
@model WebApplication1.Models.MyCustomModel
<p>Hello @Model.UserName!</p>

それらは任意のビュー（またはViewComponentResult返すことによってコントローラ）から呼び出すことができます。

@await Component.InvokeAsync("MyCustom", new {param1 = "foo", param2 = 42})

ログインビューコンポーネント

デフォルトのプロジェクトテンプレートは、ユーザーがログインしているかどうかを調べるためのロジックを含む部分ビュー_LoginPartial.cshtmlを作成し、そのユーザー名を検索します。

以下の例は、ViewコンポーネントをViewコンポーネントに変換する方法を示しています（ロジックが含まれていて、2つのサービスが注入されているため）。

コンポーネントの表示クラス

public class LoginViewComponent : ViewComponent
{
    private readonly SignInManager<ApplicationUser> signInManager;
    private readonly UserManager<ApplicationUser> userManager;

    public LoginViewComponent(SignInManager<ApplicationUser> signInManager, UserManager<ApplicationUser> userManager)
    {
        this.signInManager = signInManager;
        this.userManager = userManager;
    }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        if (signInManager.IsSignedIn(this.User as ClaimsPrincipal))
        {                
            return View("SignedIn", await userManager.GetUserAsync(this.User as ClaimsPrincipal));
        }
        return View("SignedOut");
    }
}

SignedInビュー（〜/ Views / Shared / Components / Login / SignedIn.cshtml）

@model WebApplication1.Models.ApplicationUser

<form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">Hello @Model.UserName!</a>
        </li>
        <li>
            <button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button>
        </li>
    </ul>
</form>

SignedOutビュー（〜/ Views / Shared / Components / Login / SignedOut.cshtml）

<ul class="nav navbar-nav navbar-right">
    <li><a asp-area="" asp-controller="Account" asp-action="Register">Register</a></li>
    <li><a asp-area="" asp-controller="Account" asp-action="Login">Log in</a></li>
</ul>

_Layout.cshtmlからの呼び出し

@await Component.InvokeAsync("Login")

コントローラーアクションからの復帰

フレームワークによって提供される基本Controllerクラスから継承する場合は、簡易メソッドViewComponent()を使用して、アクションからビューコンポーネントを返すことができます。

public IActionResult GetMyComponent()
{
    return ViewComponent("Login", new { param1 = "foo", param2 = 42 });
}

POCOクラスをコントローラとして使用する場合は、 ViewComponentResultクラスのインスタンスを手動で作成できます。これは上記のコードと同じです：

public IActionResult GetMyComponent()
{
    return new ViewComponentResult 
    { 
        ViewComponentName = "Login",
        Arguments = new { param1 = "foo", param2 = 42 } 
    };
}