# Htmx مع Asp.Net Core
2024-08-01T03:42
## المقدمة
استخدام HTMX مع ASP.NET Core هو طريقة عظيمة لبناء تطبيقات ديناميكية على شبكة الإنترنت مع JavaScript الحد الأدنى
إنه ' ما كنت أسميه 'Hybrid' تصميم شبكة الإنترنت حيث تقوم بترجمة الصفحة بالكامل باستخدام сервер | - | الشفرة الجانبية ثم تستخدم HTMX لتحديث أجزاء الصفحة ديناميكيا |.
في هذه المقالة, سأريكم كيف تبدأ مع HTMX في برنامج ASP.NET Core
[TOC]
## المتطلبات الأساسية
HTMX - Htmx هي حزمة جاواscript الطريقة السهلة لإدخالها في مشروعك هي أن تستخدم CDN. (انظر [هنا](https://htmx.org/docs/#installing) )
```html
```
يمكنك بالطبع تحميل نسخة أيضاً وتضميها 'من الناحية الفنية' (أو استخدام LibMan أو npmM SK3
## بِت ASP.NET
أوصي أيضاً بដំឡើង مُساعد الخرائط Htmx من [هنا](https://github.com/khalidabuhakmeh/Htmx.Net)
هذين كلاهما من [خالد أبواكمه
](https://mastodon.social/@khalidabuhakmeh@mastodon.social)
```shell
dotnet add package Htmx.TagHelpers
```
والمجموعة Htmx Nuget من [هنا](https://www.nuget.org/packages/Htmx/)
```shell
dotnet add package Htmx
```
المساعد على تسمية يسمح لك بفعل هذا:
```razor
@Model.Title
```
### طريقة بديلة.
**ملاحظة: هذه المقاربة لديها عقبة رئيسية; إنها لا تنتج href للروابط البريدية . هذه مشكلة في SEO وإمكانية الوصول إلىها . هذا يعني أيضاً أن هذه الروابط سوف تفشل إذا لم يكن HTMX لسبب ما**
المقاربة البديلة هي استخدام ` hx-boost="true"` attribute and normal asp.net core tag helpers. شاهد [هنا](https://htmx.org/docs/#hx-boost) لمعرفة المزيد عن hx-boost (بالرغم من أن المذكرات قليلة نوعاً ما
هذا سوف ينتج مدخلاً طبيعياً لكنه سوف يتم التقاطه من قبل HTMX والمحتوى تم تحميله ديناميكياً.
إذن كالتالي:
```razor
@Model.Title
```
### الجزئيات
HTMX تعمل بشكل جيد مع المشاهد الجزئية. يمكنك استخدام HT MX لتحميل المشهد الجزئي في حاسوبك على صفحةك. هذا عظيم لشحن أجزاء من صفحةك ديناميكياً دون إعادة ផ្ទុក صفحة كاملةM SK2
في هذه التطبيق لدينا مستودع في ឯកសារ Layout.cshtml نريد تحميل منظر جزئي إلى.
```razor
@RenderBody()
```
عادة يعرض المحتوى الجانبي للម៉ាស៊ីន، لكن باستخدام مساعد الشعار HTMX حولك يمكنك أن ترى نحن نهدف `hx-target="#contentcontainer"` التي ستقوم بتحميل المشهد الجزئي في الوعاء.
في مشروعنا لدينا المنظر الجزئي لـ BlogView الذي نريد شحنه إلى الوعاء.
ثم في جهاز التحكم في المدونات لدينا
```csharp
[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 إذا لم نعيد مظهراً كاملاً
بإستخدام هذا يمكننا أن نضمن أننا ندعم أيضاً الاستفسار المباشر مع القليل من الجهد الحقيقي.
في هذه الحالة وجهة نظرنا الكاملة تشير إلى هذا الجزء
```razor
@model Mostlylucid.Models.Blog.BlogPostViewModel
@{
ViewBag.Title = "title";
Layout = "_Layout";
}
```
وهكذا لدينا الآن طريقة بسيطة جدا لتحميل المشاهد الجزئية إلى صفحةنا باستخدام HTMX.