asp.net-core
Komponenten anzeigen

Erstellen Sie eine Ansichtskomponente

Ansichtskomponenten kapseln wiederverwendbare Teile von Logik und Ansichten. Sie werden definiert durch:

• Eine ViewComponent-Klasse mit der Logik zum Abrufen und Vorbereiten der Daten für die Ansicht und zum Entscheiden, welche Ansicht gerendert werden soll.
• Eine oder mehrere Ansichten

Da sie Logik enthalten, sind sie flexibler als partielle Ansichten und fördern dennoch eine gute Trennung der Bedenken.

Eine einfache benutzerdefinierte Ansichtskomponente ist definiert als:

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>

Sie können von jeder Ansicht (oder sogar von einem Controller durch Rückgabe eines ViewComponentResult ) ViewComponentResult

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

Login View Component

Die Standardprojektvorlage erstellt eine Teilansicht _LoginPartial.cshtml, die ein wenig Logik enthält, um herauszufinden, ob der Benutzer angemeldet ist oder nicht, und seinen Benutzernamen herauszufinden.

Da eine Ansichtskomponente möglicherweise besser geeignet ist (da Logik involviert ist und sogar zwei Services eingefügt wurden), zeigt das folgende Beispiel, wie Sie LoginPartial in eine Ansichtskomponente konvertieren.

Component-Klasse anzeigen

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-Ansicht (in ~ / Ansichten / Freigegeben / Komponenten / Anmelden / 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-Ansicht (in ~ / Ansichten / Freigegeben / Komponenten / Anmelden / 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>

Aufruf aus _Layout.cshtml

@await Component.InvokeAsync("Login")

Rückkehr von der Controller-Aktion

Beim Erben von der Basis- Controller Klasse, die vom Framework bereitgestellt wird, können Sie die Komfortmethode ViewComponent() , um eine Ansichtskomponente aus der Aktion zurückzugeben:

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

Wenn Sie eine POCO-Klasse als Controller verwenden, können Sie manuell eine Instanz der ViewComponentResult Klasse ViewComponentResult . Dies würde dem obigen Code entsprechen:

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