Potete trovare il codice sorgente per i post del blog su GitHub

Partie 1 & | | 2 della serie sull'aggiunta del Cadre di Entità a un progetto |. | Core |NET

Si può trovare la parte 1. Qui..

Si può trovare la parte 2. Qui..

Introduzione

Nelle parti precedenti abbiamo creato la base di dati e il contesto per i nostri post di blog, e abbiamo aggiunto i servizi per interagire con la databaseM SK1 In questo post, vi spiegheremo come questi servizi funzionano ora con i controller esistenti e le prospettive .

Controllitori

I controller di fuori per blog sono davvero molto semplici; in linea con l'evizione dell'anti-pattern 'Fat ControllerM SK2 uno schema ideintificato all'inizio dell'ASP

Il modello del Fat Controller in ASP.NET MVC

I MVC frameworks una buona pratica è fare il più poco possibile nei vostri metodi di controller. Questo perché il controller è responsabile della gestione della richiesta e del ritorno della risposta. Non dovrebbe essere responsabile della logica di business dell'applicazioneMSC2 Questa è la responsabilità del modelloM SK3

L'anti-pattern 'Fat Controller' è dove il controller fa troppoM SK2 Questo può portare ad un certo numero di problemi , compresiMSC4

1. Duplicazione del codice in diverse azioni: Un'azione dovrebbe essere una singola unità di lavoro, semplicemente riempire il modello e restituire la visuale. Se vi ritrovate a ripetere il codice in diverse azioniM SK2 è un segno che dovreste rifare questo codice in un metodo separato .
2. Code difficile da testare: Tenendo 'controllitori grassi' potreste renderlo difficile testare il codice . L'esperimento dovrebbe cercare di seguire tutti i percorsi possibili attraverso il codeM SK3 e questo può essere difficile se il codice non è buonoMNK4 strutturato e focalizzato su una singola responsabilitàMMK5
3. codice difficile da mantenere: La sostenibilità è una questione chiave quando si costruiscono applicazioni. Con 'fornaio da cucinaM SK2 metodi di azione possono facilmente portare a voi e agli altri sviluppatori che usano il codice per fare cambiamenti che rompono altre parti dell'applicazione
4. Code difficile da capire: Questo è un problema chiave per gli sviluppatori. Se lavorate su un progetto con una grande base di codici, può essere difficile capire cosa sta succedendo in un'azione di controllo se fa troppo.

Il Controller del Blog

Il controllo del blog è relativamente semplice. Ha 4 le azioni principali ( e una ' l'azione di compensazioneM SK4 per i vecchi link del blogMSC5 Questi sonoMSSK6

Task<IActionResult> Index(int page = 1, int pageSize = 5)

Task<IActionResult> Show(string slug, string language = BaseService.EnglishLanguage)

Task<IActionResult> Category(string category, int page = 1, int pageSize = 5)

Task<IActionResult> Language(string slug, string language)

IActionResult Compat(string slug, string language)

A loro volta, queste azioni chiamano IBlogService per ottenere i dati di cui hanno bisogno. IBlogService è dettagliato nel precedente post.

A loro volta queste azioni sono le following:

• Index: Questa è la lista dei post del blog M SK1defaults to English Language; potremmo estenderlo più tardi per permettere di usare più lingue ). VoiMSC4 vedrete che ci vuole page e pageSize come parametri. Questo è per la paginazione. dei risultatiM SK2
• Mostrare: Questo è il post individuale del blog. Ci vuole il slug e del posto. language come parametri. Questo è il metodo che state usando per leggere questo post di blog.
• Category: Questa è la lista dei post del blog per una categoria specifica. Ci vuole il category, page e pageSize come parametri.
• Langue: Questo mostra un post di blog per una determinata lingua. Ci vuole il slug e language come parametri.
• Compatire: Questa è un'azione di compatibilità per i vecchi link del blog. slug e language come parametri.

Il caching

Come è stato detto in un post precedente che implementiamo. OutputCache e ResponseCahce per immagazzinare i risultati dei post del blog. Questo migliora l'esperienza utente e riduce la carica sul server.

Questi sono implementati usando gli appropriate decoratori dell'azione che specificano i parametri usati per l'azione (, così come hx-request per le richieste HTMX). Per examinare con Index Noi specifichiamo questi:

    [ResponseCache(Duration = 300, VaryByHeader  = "hx-request", VaryByQueryKeys = new[] {nameof(page), nameof(pageSize)}, Location = ResponseCacheLocation.Any)]
    [OutputCache(Duration = 3600, VaryByHeaderNames = new[] {"hx-request"} ,VaryByQueryKeys = new[] { nameof(page), nameof(pageSize)})]

Vederi

Le prospettive per il blog sono relativamente semplici. Sono in gran parte solo una lista di post del blogM SK1 con alcuni dettagli per ogni post. Le prospette sono nel Views/Blog folder. Le vedute principali sono:

_PostPartial.cshtml

Questa è la vista parziale per un singolo post di blog. È usata dentro il nostro sito. Post.cshtml visione.

@model Mostlylucid.Models.Blog.BlogPostViewModel

@{
    Layout = "_Layout";
}
<partial name="_PostPartial" model="Model"/>

_BlogSummaryList.cshtml

Questa è la vista parziale per una lista di post del blog. È usata dentro il nostro sito. Index.cshtml vista e nella homepage.

@model Mostlylucid.Models.Blog.PostListViewModel
<div class="pt-2" id="content">

    @if (Model.TotalItems > Model.PageSize)
    {
        <pager
            x-ref="pager"
            link-url="@Model.LinkUrl"
               hx-boost="true"
               hx-push-url="true"
               hx-target="#content"
               hx-swap="show:none"
               page="@Model.Page"
               page-size="@Model.PageSize"
               total-items="@Model.TotalItems"
            class="w-full"></pager>
    }
    @if(ViewBag.Categories != null)
{
    <div class="pb-3">
        <h4 class="font-body text-lg text-primary dark:text-white">Categories</h4>
        <div class="flex flex-wrap gap-2 pt-2">
            @foreach (var category in ViewBag.Categories)
            {
                <a hx-controller="Blog" hx-action="Category" hx-push-url="true" hx-get hx-target="#contentcontainer" hx-route-category="@category" href>
                    <span class="inline-block rounded-full dark bg-blue-dark px-2 py-1 font-body text-sm text-white outline-1 outline outline-green-dark dark:outline-white">@category</span>
                </a>
            }
        </div>
    </div>
}
@foreach (var post in Model.Posts)
{
    <partial name="_ListPost" model="post"/>
}
</div>

Si usa la _ListPost una visione parziale per mostrare i singoli post del blog insieme al Paging tag helper che ci permette di paginare i post del blog.

_ListPost.cshtml

L'informazione figura nella parte dispositiva. _La vista parziale di Listpost è usata per mostrare i singoli post del blog nella lista. È usata all'interno della _BlogSummaryList visione.

@model Mostlylucid.Models.Blog.PostListModel

<div class="border-b border-grey-lighter pb-8 mb-8">
 
    <a asp-controller="Blog" asp-action="Show" hx-boost="true"  hx-swap="show:window:top"  hx-target="#contentcontainer" asp-route-slug="@Model.Slug"
       class="block font-body text-lg font-semibold transition-colors hover:text-green text-blue-dark dark:text-white  dark:hover:text-secondary">@Model.Title</a>
    <div class="flex space-x-2 items-center py-4">
    @foreach (var category in Model.Categories)
    {
    <a hx-controller="Blog" hx-action="Category" class="rounded-full bg-blue-dark font-body text-sm text-white px-2 py-1 outline outline-1 outline-white" hx-push-url="true" hx-get hx-target="#contentcontainer" hx-route-category="@category" href>@category
    </a>
    }

    @{ var languageModel = (Model.Slug, Model.Languages, Model.Language); }
        <partial name="_LanguageList" model="languageModel"/>
    </div>
    <div class="block font-body text-black dark:text-white">@Model.Summary</div>
    <div class="flex items-center pt-4">
        <p class="pr-2 font-body font-light text-primary light:text-black dark:text-white">
            @Model.PublishedDate.ToString("f")
        </p>
        <span class="font-body text-grey dark:text-white">//</span>
        <p class="pl-2 font-body font-light text-primary light:text-black dark:text-white">
            @Model.ReadingTime
        </p>
    </div>
</div>

Come vedete qui abbiamo un link al post individuale del blog, le categorie per il post, le lingue in cui il post è disponibile inM SK3 il riassunto del post , la data pubblicata e il tempo di letturaMSC5

Abbiamo anche tag HTMX per le categorie e le lingue che ci permettono di mostrare i post locali e i post per una categoria specifica.

Abbiamo due modi di usare HTMX qui, uno che dà l'URL completa e uno che è M SK1HTML solo' (iMSC4eMST5 nessun URLMSSK6 Questo perché vogliamo usare l'url completa per le categorie e le lingueMSL7 ma non ci serve la URL completa per il post individuale del blogMSV9

 <a asp-controller="Blog" asp-action="Show" hx-boost="true"  hx-swap="show:window:top"  hx-target="#contentcontainer" asp-route-slug="@Model.Slug"

Questo approccio si occupa di un URL completo per ogni singolo post del blog e usa hx-boost a 'boost' la richiesta di usare HTMX ( questo stabilisce hx-request Header a true).

  <a hx-controller="Blog" hx-action="Category" class="rounded-full bg-blue-dark font-body text-sm text-white px-2 py-1 outline outline-1 outline-white" hx-push-url="true" hx-get hx-target="#contentcontainer" hx-route-category="@category" href>@category
    </a>

Oppure questo approccio usa i tag HTMX per ottenere le categorie dei post del blog. Usa il hx-controller, hx-action, hx-push-url, hx-get, hx-target e hx-route-category tag per ottenere le categorie dei post del blog mentre hx-push-url è stabilito a true per spingere l'URL nella storia del browser.

Viene anche usato nei nostri laboratori. Index Metoda di azione per le richieste HTMX.

  public async Task<IActionResult> Index(int page = 1, int pageSize = 5)
    {
        var posts =await  blogService.GetPagedPosts(page, pageSize);
        if(Request.IsHtmx())
        {
            return PartialView("_BlogSummaryList", posts);
        }
        posts.LinkUrl = Url.Action("Index", "Blog");
        return View("Index", posts);
    }

Dove ci permette di restituire la visione completa o solo la visione parziale per le richieste HTMX, dando un'esperienza simile a M SK1SPA'

La pagina principale

Nell'università. HomeController Ci riferiamo anche a questi servizi di blog per ottenere i post più recenti della pagina principale. Questo è fatto nel Index metodo di azione.

   public async Task<IActionResult> Index(int page = 1,int pageSize = 5)
    {
            var authenticateResult = GetUserInfo();
            var posts =await blogService.GetPagedPosts(page, pageSize);
            posts.LinkUrl= Url.Action("Index", "Home");
            if (Request.IsHtmx())
            {
                return PartialView("_BlogSummaryList", posts);
            }
            var indexPageViewModel = new IndexPageViewModel
            {
                Posts = posts, Authenticated = authenticateResult.LoggedIn, Name = authenticateResult.Name,
                AvatarUrl = authenticateResult.AvatarUrl
            };
            
            return View(indexPageViewModel);
    }

Come vedete qui, noi usiamo il '. IBlogService per ottenere i post più recenti della pagina principale. Usiamo anche il GetUserInfo metodo per ottenere l'informazione dell'utente della pagina di casa.

Di nuovo questo ha una richiesta HTMX per restituire la visione parziale dei post del blog che ci permette di paginare i post del blogs nella pagina di casa.

Conclusione

Nella nostra parte successiva, noi' andremo in dettaglio su come usiamo la IMarkdownBlogService per riempire la base di dati con i post del blog dai file di marcamento. Questa è una parte chiave dell'applicazione perché ci permette di usare i files di marcazione per riempirlo con i posts del blog.