asp.net-core
Visa komponenter

Skapa en vykomponent

Visa komponenter kapslar återanvändbara delar av logik och vyer. De definieras av:

• En ViewComponent-klass som innehåller logiken för att hämta och förbereda data för vyn och bestämma vilken vy som ska visas.
• En eller flera vyer

Eftersom de innehåller logik är de mer flexibla än delvisa åsikter medan de fortfarande främjar en god oro.

En enkel anpassad vykomponent definieras som:

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>

De kan åberopas från valfri vy (eller till och med en kontroller genom att returnera en ViewComponentResult )

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

Logga in Visa komponent

Standardprojektmallen skapar en partiell vy _LoginPrior.cshtml som innehåller lite logik för att ta reda på om användaren är inloggad eller inte och ta reda på dess användarnamn.

Eftersom en vykomponent kan passa bättre (eftersom det är logik involverat och till och med två tjänster injicerade) visar följande exempel hur man konverterar LoginPartial till en vykomponent.

Visa komponentklass

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-vy (i ~ / Visningar / Delad / Komponenter / Logga in / 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-vy (i ~ / Visningar / Delad / Komponenter / Logga in / 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>

Inbjudan från _Layout.cshtml

@await Component.InvokeAsync("Login")

Återgå från Controller Action

När du ärver från Controller tillhandahålls av ramverket kan du använda ViewComponent() att återställa en vykomponent från åtgärden:

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

Om du använder en POCO-klass som en kontroller kan du manuellt skapa en instans av klassen ViewComponentResult . Detta skulle motsvara koden ovan:

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