Comment puis-je appeler une action de contrôleur lors du rendu d'une vue partielle?

Je suis entrain de créer une vue partielle pour une barre latérale qui affiche les messages les plus populaires dans mon site. Comment puis-je créer un contrôleur séparé pour le chargement du modèle requis par la vue partielle? (Le IEnumerable<Post> avec le populaire postes)

Actuellement, j'ai créé une classe contrôleur qui se charge de la populaire postes, mais je continue à recevoir des erreurs lors du rendu de l'partielle comme je ne peux pas appeler le contrôleur de charge et de la partielle du modèle. Par exemple, si je l'appelle à partir d'un point de vue où j'ai rendu un seul poste, le type de modèle ne correspond pas (Post vs IEnumerable<Post>)

C'est mon SidebarController:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using GoBaron.Front.Models;

namespace GoBaron.Front.Controllers
{
    public class SidebarController : Controller
    {
        private readonly ApplicationDbContext _context;

        public SidebarController(ApplicationDbContext context)
        {
            _context = context;
        }

        public async Task<IActionResult> PopularPosts()
        {
            return PartialView(await _context.Posts
                .Where(p => p.IsActive == true)
                .OrderByDescending(p => p.Id)
                .Take(5)
                .ToListAsync());
        }
    }
}

Et c'est ma vue partielle PopularPosts.cshtml:

@model IEnumerable<GoBaron.Front.Models.Post>
@using GoBaron.Front.Data.Extensions

@if (Model.Any())
{
    <div class="sidebar-item" id="topTrending">
        <header class="sidebar-item__header">
            <h1>Najpopularniejsze</h1>
        </header>
        <div class="sidebar-item__content">
            @foreach (var item in Model)
            {
                <a asp-controller="Post" asp-action="Details" asp-route-id="@item.Id" asp-route-slug="@item.Title.ConvertToSlug()" title="@item.Title">
                    <div class="sidebar-post-item" style="background-image:url('@item.PosterUrl')">
                        <span class="sidebar-post-item__counter">+5</span>
                        <span class="sidebar-post-item__title">@item.Title</span>
                    </div>
                </a>
            }
        </div>
    </div>
}

Quand je veux, dont le populaire postes de barre latérale, par exemple dans la mise en page, je viens de rajouter:

@await Html.PartialAsync("~/Views/Sidebar/PopularPosts.cshtml")

OriginalL'auteur Delavor | 2017-03-16

15

C'est un bon cas d'utilisation pour un La Vue De Composant au lieu d'une vue partielle. Non seulement vous avez besoin pour rendre un avis, vous devez également exécuter que peu de logique que les charges de la Populaire Postes à partir de la db.

À la place d'un Contrôleur de, créer un nouveau ViewComponent classe. Il contient la logique qui prépare le modèle de la vue de composant dans son InvokeAsync méthode, et il peut prendre n'importe quel nombre de paramètres. Dans votre cas InvokeAsync ne prend pas de paramètres, va charger le populaire postes à partir de la db et le rendu de la vue component:
```
public class PopularPostsViewComponent: ViewComponent
{
    private readonly ApplicationDbContext _context;

    public PopularPostsViewComponent(ApplicationDbContext context)
    {
        _context = context;
    }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        var posts = await _context.Posts
            .Where(p => p.IsActive == true)
            .OrderByDescending(p => p.Id)
            .Take(5)
            .ToListAsync();

        return View(posts);
    }
}
```
Maintenant, vous avez besoin pour créer la vue de ce point de vue component. La valeur par défaut nom de la vue Default.cshtml (comme quand vous return View() sans spécifier de nom de la vue) et il devrait être situé dans Views/Shared/Components/PopularPosts/Default.cshtml. Ce sera essentiellement le même que votre vue partielle:
```
@model IEnumerable<GoBaron.Front.Models.Post>
@using GoBaron.Front.Data.Extensions

@if (Model.Any())
{
    <div class="sidebar-item" id="topTrending">
        <header class="sidebar-item__header">
            <h1>Najpopularniejsze</h1>
        </header>
        <div class="sidebar-item__content">
            @foreach (var item in Model)
            {
                <a asp-controller="Post" asp-action="Details" asp-route-id="@item.Id" asp-route-slug="@item.Title.ConvertToSlug()" title="@item.Title">
                    <div class="sidebar-post-item" style="background-image:url('@item.PosterUrl')">
                        <span class="sidebar-post-item__counter">+5</span>
                        <span class="sidebar-post-item__title">@item.Title</span>
                    </div>
                </a>
            }
        </div>
    </div>
}
```
Puis, à partir de tout autre point de vue, vous rendrait votre point de vue composant au lieu d'une partielle, la réussite de tous les paramètres requis par InvokeAsync. Dans votre cas, vous prenez pas de paramètres de sorte qu'il sera:
```
@await Component.InvokeAsync("PopularPosts")
```
Enfin, si vous êtes dans .Net de Base 1.1 ou supérieur, vous pouvez également invoquer celle-ci comme une balise helper:
```
<vc:popular-posts></vc:popular-posts>
```
PS. J'ai écrit un l'article décrivant les usages pour les partiels, balise d'aides et de voir les composants que vous pourriez trouver intéressant.

Je voudrais faire un site web appel api pour récupérer des données et de les afficher dans une section d'une page web, mais je ne veux pas de cela pour retarder le chargement du reste de la page. Serait-ce la solution de l'aide de la vue de composant avec invokeasync parvenir? Ou est ma seule solution pour utiliser une sorte de Javascript ,comme React.js?

OriginalL'auteur Daniel J.G.

Vous devez vous connecter pour publier un commentaire.