Sie finden alle Quellcode für die Blog-Beiträge auf GitHub

Teile aus der Serie über das Hinzufügen von Entity Framework zu einem Core-Projekt von .

Teil 1- gefunden werden kann Hierher.

Teil 2- gefunden werden kann Hierher.

Einleitung

In den vorherigen Teilen haben wir die Datenbank und den Kontext für unsere Blog-Posts eingerichtet und die Dienste hinzugefügt, um mit der Datenbank zu interagieren... In diesem Beitrag werden wir detailliert darlegen, wie diese Dienstleistungen jetzt mit den vorhandenen Controllern und Ansichten arbeiten.

Steuergeräte

Out Controller für Blogs sind wirklich ziemlich einfach... im Einklang mit der Vermeidung der '.Fat-Controller... Antimuster... das Muster, das wir in den Tagen von ASP...NET MVC vorgestellt haben...

Das Muster des Fat Controllers in der ASP-MVC

I MVC-Frameworks eine gute Praxis ist es, so wenig wie möglich in Ihren Steuerungsmethoden zu tun Das liegt daran, dass der Controller für die Bearbeitung der Anfrage und die Rücksendung einer Antwort verantwortlich ist... Es sollte nicht für die Geschäftslogik der Anwendung verantwortlich sein.

Das Anti-Muster von ' ist, wo der Controller zu viel macht. Dies kann zu einer Reihe von Problemen führen.

1. Vervielfältigung von Code in mehreren Aktionen Eine Aktion sollte eine einzelne Einheit der Arbeit sein, die das Modell einfach bevölkert und die Ansicht zurückgibt... Wenn du dich in mehreren Aktionen wiederholst, ist es ein Zeichen, dass du diesen Code in eine separate Methode umfaktorieren solltest.
2. Code, der schwer zu testen ist Durch die Verwendung von '-Fat Controllern können Sie es schwierig machen, den Code zu testen. .-Testing sollte versuchen, alle möglichen Pfade durch den code zu folgen. MKK3-Test und das kann schwierig sein, wenn der Code nicht gut ist. --Testen und konzentriert sich auf eine einzige Verantwortung
3. Code, der schwer zu pflegen ist Maintainability ist ein zentrales Anliegen beim Bau von Anwendungen.. , nachdem Sie ' kitchen Waschbecken.' , Aktionsmethoden können leicht führen zu Ihnen als auch anderen Entwicklern mit dem Code Änderungen machen, die andere Teile der Anwendung brechen.
4. Code, der schwer zu verstehen ist Dies ist ein zentrales Anliegen für Entwickler... Wenn Sie an einem Projekt mit einer großen Codebase arbeiten, kann es schwierig sein zu verstehen, was in einer Controller-Aktion passiert, wenn es zu viel tut..

Der Blog-Controller

Die Blog-Steuerung ist relativ einfach.Es hat Hauptaktionen von 4 und eine Kompattenaktion von ' für die alten Blog Links.

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)

Im Gegenzug nennen diese Aktionen die IBlogService um die Daten zu erhalten, die sie benötigen IBlogService ist in der vorheriger Beitrag.

Im Gegenzug sind diese Aktionen wie folgt:

• Dies ist die Liste der Blog-Posts in englischer Sprache. Wir können diese später erweitern, um mehrere Sprachen zu ermöglichen. page und pageSize als Parameter) Dies ist für die Pagination der Ergebnisse .
• Dies ist der individuelle Blog-Post. Es nimmt die slug der Stelle und der language als Parameter....-TShis ist die Methode, mit der du gerade diesen Blogbeitrag liesst.
• Kategorie: Dies ist die Liste der Blog-Posts für eine bestimmte Kategorie: category, page und pageSize als Parameter
• Dies zeigt einen Blog-Post für eine bestimmte Sprache, es nimmt die slug und language als Parameter
• Das ist eine Kompatibilitätsaktion für die alten Blog-Links. slug und language als Parameter

Caching

Wie in einem früherer Posten wir implementieren OutputCache und ResponseCahce um die Ergebnisse der Blog-Posts zu verbergen Dies verbessert die Benutzererfahrung und reduziert die Belastung auf dem Server.

Diese werden mit den entsprechenden Action-Dekoratoren implementiert, die die für die Aktion verwendeten Parameter angeben. hx-request für HTMX-Anfragen, für Prüfungen mit Index wir spezifizieren diese

    [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)})]

Ansichten

Die Ansichten für den Blog sind relativ einfach... sie sind meist nur eine Liste von Blog-Posts... mit ein paar Details für jeden Beitrag... Views/Blog Die Hauptansichten sind:

_PostPartial.cshtml

Dies ist die partielle Ansicht für einen einzigen Blog-Post. Post.cshtml Ansicht

@model Mostlylucid.Models.Blog.BlogPostViewModel

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

_BlogSummaryList.cshtml

Dies ist die partielle Ansicht für eine Liste von Blog-Posts. Index.cshtml sowohl auf der Homepage als auch auf der

@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>

Dabei wird die _ListPost Teilansicht, um die einzelnen Blog-Posts zusammen mit der Hilfe für das Paging-Tag was uns erlaubt, die Blog-Posts zu blättern.

_ListPost.cshtml

Das _Listpost Teilansicht wird verwendet, um die einzelnen Blog-Posts in der Liste zu zeigen. _BlogSummaryList Ansicht

@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>

Wie Sie hier haben wir einen Link zu den einzelnen Blog-Posten, die Kategorien für den Post, die Sprachen, die der Beitrag verfügbar ist, in,,. die Zusammenfassung des post, das publizierte Datum und die Lesezeit,

Wir haben auch HTMX-Link-Tags für die Kategorien und Sprachen, damit wir die lokalisierten Beiträge und die Beiträge für eine bestimmte Kategorie anzeigen können.

Wir haben zwei Möglichkeiten, HTMX hier zu verwenden, das gibt die volle URL und eine, die nur .' .HTML ist .' . . ( .i . . .e .SK5 . keine URL .). . Dies liegt daran, dass wir die vollständige URL für die Kategorien und die Sprachen verwenden möchten .

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

Dieser Ansatz bevölkert eine vollständige URL für den einzelnen Blog-Post und nutzt hx-boost die Anfrage, HTMX zu verwenden, setzt dies die hx-request header zu 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>

Alternativ verwendet dieser Ansatz die HTMX-Tags, um die Kategorien für die Blogposts zu erhalten. hx-controller, hx-action, hx-push-url, hx-get, hx-target und hx-route-category Tags, um die Kategorien für die Blog-Beiträge zu erhalten, während hx-push-url ist eingestellt auf true um die URL in die Browser-History zu schieben

Es wird auch in unserem Index Aktionsmethode für die HTMX-Anfragen

  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);
    }

Wo es uns ermöglicht, entweder die vollständige Ansicht oder einfach nur die Teilansicht für HTMX-Anfragen zurückzugeben.

Startseite

In der HomeController wir beziehen uns auch auf diese Blog-Services, um die neuesten Blog-Posts für die Homepage erhalten. Index Aktionsmethode

   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);
    }

Wie Sie sehen, verwenden wir hier die IBlogService um die neuesten Blog-Posts für die Homepage zu erhalten GetUserInfo Methode, um die Benutzerinformationen für die Homepage zu erhalten

Auch dies hat eine HTMX-Anforderung, die Teilansicht für die Blogbeiträge zurückzugeben, um uns zu erlauben, die Blogeinträge in der Homepage einzufügen.

Schlussfolgerung

In unserem nächsten Teil gehen wir in qualvolle Details, wie wir die IMarkdownBlogService um die Datenbank mit den Blog-Posts aus den Markdown-Dateien zu bevölkern.Dies ist ein wichtiger Teil der Anwendung, da es uns erlaubt, die Markdown Dateien zu verwenden, um die Datenbanken mit den blog posts zu befüllen.