Htmx مع Asp.Net Core (العربية (Arabic))

المقدمة

استخدام HTMX مع ASP.NET Core هو طريقة عظيمة لبناء تطبيقات ديناميكية على شبكة الإنترنت مع JavaScript الحد الأدنى

إنه ' ما كنت أسميه 'Hybrid' تصميم شبكة الإنترنت حيث تقوم بترجمة الصفحة بالكامل باستخدام сервер | - | الشفرة الجانبية ثم تستخدم HTMX لتحديث أجزاء الصفحة ديناميكيا |.

في هذه المقالة, سأريكم كيف تبدأ مع HTMX في برنامج ASP.NET Core

المتطلبات الأساسية

HTMX - Htmx هي حزمة جاواscript الطريقة السهلة لإدخالها في مشروعك هي أن تستخدم CDN. (انظر هنا )

<script src="https://unpkg.com/[email protected]" integrity="sha384-QWGpdj554B4ETpJJC9z+ZHJcA/i59TyjxEPXiiUgN2WmTyV5OEZWCD6gQhgkdpB/" crossorigin="anonymous"></script>

يمكنك بالطبع تحميل نسخة أيضاً وتضميها 'من الناحية الفنية' (أو استخدام LibMan أو npmM SK3

بِت ASP.NET

أوصي أيضاً بដំឡើង مُساعد الخرائط Htmx من هنا

هذين كلاهما من خالد أبواكمه

dotnet add package Htmx.TagHelpers

والمجموعة Htmx Nuget من هنا

 dotnet add package Htmx

المساعد على تسمية يسمح لك بفعل هذا:

    <a hx-controller="Blog" hx-action="Show" hx-push-url="true" hx-get hx-target="#contentcontainer" hx-route-slug="@Model.Slug"
        class="block font-body text-lg font-semibold text-primary transition-colors hover:text-green dark:text-white dark:hover:text-secondary">@Model.Title</a>

طريقة بديلة.

ملاحظة: هذه المقاربة لديها عقبة رئيسية; إنها لا تنتج href للروابط البريدية . هذه مشكلة في SEO وإمكانية الوصول إلىها . هذا يعني أيضاً أن هذه الروابط سوف تفشل إذا لم يكن HTMX لسبب ما

المقاربة البديلة هي استخدام hx-boost="true" attribute and normal asp.net core tag helpers. شاهد هنا لمعرفة المزيد عن hx-boost (بالرغم من أن المذكرات قليلة نوعاً ما هذا سوف ينتج مدخلاً طبيعياً لكنه سوف يتم التقاطه من قبل HTMX والمحتوى تم تحميله ديناميكياً.

إذن كالتالي:

 <a asp-controller="Blog" asp-action="Show" hx-boost="true"  hx-target="#contentcontainer" asp-route-slug="@Model.Slug"
       class="block font-body text-lg font-semibold text-primary transition-colors hover:text-green dark:text-white dark:hover:text-secondary">@Model.Title</a>

الجزئيات

HTMX تعمل بشكل جيد مع المشاهد الجزئية. يمكنك استخدام HT MX لتحميل المشهد الجزئي في حاسوبك على صفحةك. هذا عظيم لشحن أجزاء من صفحةك ديناميكياً دون إعادة ផ្ទុក صفحة كاملةM SK2

في هذه التطبيق لدينا مستودع في ឯកសារ Layout.cshtml نريد تحميل منظر جزئي إلى.

    <div class="container mx-auto" id="contentcontainer">
   @RenderBody()

    </div>

عادة يعرض المحتوى الجانبي للម៉ាស៊ីន، لكن باستخدام مساعد الشعار HTMX حولك يمكنك أن ترى نحن نهدف hx-target="#contentcontainer" التي ستقوم بتحميل المشهد الجزئي في الوعاء.

في مشروعنا لدينا المنظر الجزئي لـ BlogView الذي نريد شحنه إلى الوعاء.

ثم في جهاز التحكم في المدونات لدينا

    [Route("{slug}")]
    [OutputCache(Duration = 3600)]
    public IActionResult Show(string slug)
    {
       var post =  blogService.GetPost(slug);
       if(Request.IsHtmx())
       {
              return PartialView("_PostPartial", post);
       }
       return View("Post", post);
    }

يمكنكم أن تروا هنا لدينا طلب HTMX.IsHtmx() الأسلوبM SK2 هذا سيعيد الحقيقة إذا كان الطلب طلب htMX . إذا كان ذلك نحن نعيد المشهد الجزيئيMSC4 إذا لم نعيد مظهراً كاملاً

بإستخدام هذا يمكننا أن نضمن أننا ندعم أيضاً الاستفسار المباشر مع القليل من الجهد الحقيقي.

في هذه الحالة وجهة نظرنا الكاملة تشير إلى هذا الجزء

@model Mostlylucid.Models.Blog.BlogPostViewModel

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

وهكذا لدينا الآن طريقة بسيطة جدا لتحميل المشاهد الجزئية إلى صفحةنا باستخدام HTMX.