# HTMX مع ASP.net

<datetime class="hidden">2025-11-28T12:00</datetime>

<!--category-- HTMX, ASP.NET Core, Web Development, HTMX.NET -->
## أولاً

إذا كنت قد بنيت تطبيقات ASP.NET الأساسية الرئيسية MVC، فأنت تعرف المشكلة: أن الخوف من "انقر فلاش" عندما يبحر المستخدمون بين الصفحات. إعادة تحميل صفحة كاملة، متصفح الكروم متقلب، المحتوى يقفز حول الصفحة الجديدة. إنه يعمل، لكنه لا يعمل، لكنه لا يعمل. */ / /  /* محدثاً حديثاً.

تقنية إعادة شظايا HTML الجزئية من الخادم ومبادلتها في DOM يحل هذا - وهو ليس جديداً. كنت أستخدم هذا النمط منذ أيام الفصل، وحتى قبل ذلك مع الفانيلا جافاسكربت و `XMLHttpRequest`ما تغير هو كيف *أنج* لقد أصبح مع HTMX.

HTMX يعطينا طريقة تفسيرية للقيام بما قمنا به دائماً: إرجاع HTML المدعم بالخادم ومبادلته في الصفحة. لا مزيد من الكتابة المخصصة جافاسكربت لكل تفاعل. لا مزيد من الاختيار بين تطوير جانب الخادم "الأفضل" وتجربة المستخدم السلس. مع HTMX، نحصل على الاثنين.

> **المادة المصاحبة:** تركز هذه المادة على جانب التكامل الأساسي لـ ASP.NET.NET. للحصول على الغوص العميق في أحداث HTMX، دورة الحياة، والإمتدادات الجمركية، انظر مقالتي المرافقة: [جولة شاملة من توسيعات HTMX واستخدام HTMX مع ASP.net](/blog/htmxandaspnetcore).

في هذه المقالة، سأريكم كيف يدمج HTMX بشكل جميل مع ASP.Net conure جزئيات كم ممتاز **المقر المقر المقر المقر فقط** المكتبة تجعلها أفضل، وكيف [غالباً luccid.](https://github.com/scottgal/mostlylucid.pagingtaghelper) NuGet الحزمة استخدامات HTMX يوفر واجهة قوية مع حد أدنى من الإعدادات.

النهج هو إطار- غير مفهوم أيضاً - أضاف جانغو شظايا قوالب في النسخة 6.0، لـ رايلز توربو أورامز، والنظام البيئي الأوسع نطاقاً على الشبكة يتبنى أنماط HTML فوق الأسلاك. إنه الوقت المناسب لبناء تطبيقات مزودة بالحواسيب.

[TOC]

## ما هو HTMX؟

HTMX هي مكتبة تسمح لكم بالوصول إلى ميزات المتصفح الحديثة مباشرة من HTML، بدلاً من كتابة جافاسكربت. تمد HTML بخصائص تسمح لكم بعمل طلبات AJAX، مبادلة المحتوى، وخلق تفاعلات غنية - كل ذلك بدون ترك العلام.

الصفات الرئيسية التي ستستخدمها في أغلب الأحيان:

- `hx-get`, `hx-post`, `hx-put`, `hx-delete` - جعل طلبات HTTP
- `hx-target` - يُحدّد مكان وضع الرد
- `hx-swap` - التحكم في كيفية مبادلة المحتوى (innerHTMTML, exterHTMTML, et al.)
- `hx-trigger` - تحديد ما يحفز الطلب (انقر، تغيير، تحميل، وما إلى ذلك)
- `hx-push-url` - حدِّث المتصفح URL دون تحميل كامل لصفحة

ها هو جمالها: ما زلت تكتب رمز جانب الخادم، تعيد HTML إلى حاسوب الخدمة. لا Json APISs، لا قوالب جانب العميل، لا خطوط أنابيب بناء. فقط HTML جيدة الطراز القديم على السلك.

## نمط قديم كعجاكس نفسه

قبل HTMX، حققنا نفس التأثير مع مراسم أكثر بكثير. هذا ما بدا عليه التحديث الجزئي في عصر الفصل:

```javascript
// jQuery circa 2010
$('#load-more').click(function() {
    $.ajax({
        url: '/posts/page/' + currentPage,
        success: function(html) {
            $('#posts-container').append(html);
            currentPage++;
        }
    });
});
```

وحتى في وقت سابق، مع الفانيلا جافاسكربت:

```javascript
// Vanilla JS circa 2005
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById('content').innerHTML = xhr.responseText;
    }
};
xhr.open('GET', '/partial-content', true);
xhr.send();
```

نمط جانب الخادم كان متطابقاً - اعيد شظايا HTML، استبدلها بـ DOM. HTMX فقط يحرك هذا المنطق من جافاسكربت إلى خواص HTML، مما يجعلها تفسيرية، قابلة للاكتشاف، وأقل عرضة للخطأ. الابتكار ليس التقنية، بل هي الواجهة.

SPS.NET المطورون يفعلون ذلك منذ سنوات تحديثات في WebForms (2005) `PartialView()` في MVC منذ اليوم الأول، `Html.RenderAction()` ما ينقصنا هو طريقة أنيقة وموحدة لتوصيله على جانب العميل. HTMX يملأ تلك الفجوة بشكل مثالي.

الصناعة الأوسع كانت تعيد اكتشاف هذه الأنماط أيضاً. مصطلحات مثل "SSR" (Server-Side Rendering)، و"Hybrid translation"، و"ISlands systeming" هي أساساً تصف ما تفعله أطر جانب الخوادم دائماً، ولكن بالعيون الطازجة. ومن المؤكد أن نهج الخواديم المطورة مقاييس، والأداء، و- مع الأدوات الصحيحة- توفر خبرة مستخدم ممتازة.

## وضع نظام HTMX في نظام البيانات المسبقة عن

أولاً، إدراج HTMX بوصة تخطيط أنت استخدام a CDN أو الإيطالية محليّاً:

```html
<script src="https://unpkg.com/htmx.org@2.0.0"></script>
```

هذا كل شيء. لا خطوة بناء، لا تثبّت npm، لا تثبّت، لا تشكيل لحزمة ويب. فقط ضع علامة نص وأنت ذاهب إلى السباقات.

## ألف - الألبـيـبـيـجـس: العنصر المتعلق بإسناد العميل

فيما يتعلق بردود الفعل تجاه العملاء (عناصر العرض/التخبئة، الولايات المتقاطعة، ولاية UI المحلية)، [الألابين](https://alpinejs.dev/) في 15KB gzzlippit، يوفر تفاعلاً بيانياً مثل Vue/react بدون التلويح.

```html
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

وهنا كيف يعملون معاً:

```razor
<div x-data="{ open: false }">
    <button x-on:click="open = !open">Toggle</button>
    <div x-show="open" x-transition>
        <button hx-get="/api/data" hx-target="#results">Load Data</button>
    </div>
</div>
```

Alben comes محليّ UI (Thuggle)، HTMX مقابِل خادم نداءات (Data get). طوال هذه المقالة، سترى هذا النمط - Albin لـ عميل تفاعلات HTMX لـ خادم.

## مكتبة HTMXNet

[(السكين)](https://khalidabuhakmeh.com/about)- - - - - - - [المقر المقر المقر المقر فقط](https://github.com/khalidabuhakmeh/Htmx.Net) توفر المكتبة التكامل الأساسي من الدرجة الأولى لشبكة ASP.NET. `Htmx` وقد عقد مؤتمراً بشأن `Htmx.TagHelpers` NuGet رزم، تشعر بشعورها الأصلي ل.NET وجعل العمل مع HTMX متعة مطلقة. سوف تجد المزيد من عمل خالد الممتاز [لا يُحَجْجَه](https://github.com/khalidabuhakmeh).

### عدد أفراد

```bash
dotnet add package Htmx
dotnet add package Htmx.TagHelpers
```

في `_ViewImports.cshtml`:

```razor
@addTagHelper *, Htmx.TagHelpers
```

### طريقة التمديد ESEHHttmx()

والسمة الأكثر فائدة هي: `Request.IsHtmx()` طريقة التمديد، التي تخبرك ما إذا كان الطلب قد جاء من HTMX. هذا يسمح لك بإرجاع إما عرض كامل أو فقط جزئي:

```csharp
[HttpGet]
public async Task<IActionResult> Index(int page = 1, int pageSize = 20)
{
    var posts = await blogViewService.GetPagedPosts(page, pageSize);

    if (Request.IsHtmx())
        return PartialView("_BlogSummaryList", posts);

    return View("Index", posts);
}
```

هذا النمط رائع تماماً، عمل متحكم واحد يخدم كلا الأمرين:

- تحميلات صفحة كاملة (عندما يبحر المستخدمون مباشرة أو تنشيء)
- تحديثات جزئية (عندما تقدم HTMX الطلب)

لا نقاط نهاية منفصلة API، لا منطق تكراري، لا JUSON تسلسلية أعلى.

> **تصور مشترك:** العديد من المطورين على شبكة الإنترنت يعتقدون أنك بحاجة إلى `_` (بالإنكليزيات) `_BlogSummaryList.cshtml`(و) أن تحصل على جزء جزئي من النص، أنت لا تفعل! `PartialView()` تُخبر ASP.net contry لتخطي التخطيط - إنها تقول "انسى التخطيط، فقط اعيد هذا الجزء". يمكنك استخدام هذا الجزء. `return PartialView("SearchResults", model)` اتفاقية التأكيد الصادرة من ASP.net صفحات الويب (WebMatrix) حيث منعت الملفات من الخدمة مباشرة عن طريق URL - ولكن MVC دائماً ما حمى كل وجهات النظر من الوصول المباشر على أي حال. إنها مجرد اتفاقية تسمية للمساعدة في تحديد وجهات النظر. *موج* (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة) (بدولارات الولايات المتحدة)

### HTMXX.Net مُساعدات في مجال الوسم

HTMX.NET توفر أجهزة مساعدة على الوسم تعمل مع أجهزة التحكم المنظفة. بدلاً من كتابة خطوط المسار، يمكنك استخدام مراجع شديدة التصميم:

```razor
<button
    hx-controller="Comment"
    hx-action="GetCommentForm"
    hx-post
    hx-target="#commentform">
    Reply
</button>
```

هذا يولّد المسار الصحيح باستخدام نظام توجيه ASP.NET Kor. إذا قمت بإعادة تسمية متحكمك أو إجراءك، فإن مؤشر تعريفك سيمسكه. أفضل بكثير من الأوتار السحرية!

هنا مثال حقيقي من نظام تعليق هذه المدونة:

```razor
<button
    class="btn btn-outline btn-sm mb-4"
    hx-action="Comment"
    hx-controller="Comment"
    hx-post
    hx-vals
    x-on:click.prevent="window.mostlylucid.comments.setValues($event)"
    hx-on="htmx:afterSwap: window.scrollTo({top: 0, behavior: 'smooth'})"
    hx-swap="outerHTML"
    hx-target="#commentform">
    Comment
</button>
```

لاحظ كيف يلعب HTMX بشكل جيد مع الألبيين.`x-on:click.prevent`) لتلك الأجزاء العرضية من التفاعل مع العملاء.

### أجهزة المساعدة الأخرى العاملة بالشبكات HTMX الأخرى

كما توفر المكتبة ما يلي:

- `Request.IsHtmxNonBoosted()` - تحقق إذا كان طلب HTMX ولكن ليس مدعوماً
- `Request.IsHtmxRefresh()` -تحقق إذا كان طلب استعادة تاريخ التاريخ
- مساعدات استجابة استجابة لرراسمات HTMX HTMX (الضرر، إعادة التوجيه، وما إلى ذلك)

## مثال حقيقي - عالمي: البحث مع الجزئيات

هنا متحكم البحث من هذه المدونة، يظهر نمط العودة من ثلاثة مستويات:

```csharp
[HttpGet]
[OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request", "pagerequest" })]
public async Task<IActionResult> Search(
    string? query,
    int page = 1,
    int pageSize = 10,
    [FromHeader] bool pagerequest = false)
{
    var searchModel = await BuildSearchModel(query, page, pageSize);

    if (pagerequest && Request.IsHtmx())
        return PartialView("_SearchResultsPartial", searchModel.SearchResults);

    if (Request.IsHtmx())
        return PartialView("SearchResults", searchModel);

    return View("SearchResults", searchModel);
}
```

ثلاثة مسارات عودة لثلاثة سيناريوهات:

1. طلبات الإضافات - الحد الأدنى الجزئي (يرد بيان قائمة النتائج)
2. تغييرات المرشح - جزء جزئي من القسم (النتائج مع المرشّحات)
3. الملاحة المباشرة - صفحة كاملة (النص + كل شيء)

الرأي المُنَظَم`_SearchResultsPartial.cshtml`(يستخدم مساعد بطاقة الإشباع:

```razor
@model Mostlylucid.Models.Blog.PostListViewModel
<div class="pt-2" id="content">
    @if (Model.Data?.Any() is true)
    {
        <div class="inline-flex w-full items-center justify-center pb-4">
            @if (Model.TotalItems > Model.PageSize)
            {
                <pager
                    x-ref="pager"
                    link-url="@Model.LinkUrl"
                    hx-boost="true"
                    hx-target="#content"
                    hx-swap="show:none"
                    page="@Model.Page"
                    page-size="@Model.PageSize"
                    total-items="@Model.TotalItems"
                    hx-headers='{"pagerequest": "true"}'>
                </pager>
            }
        </div>
        @foreach (var post in Model.Data)
        {
            <partial name="_ListPost" model="post"/>
        }
    }
</div>
```

يُخفّضُ المُسَاعِد بطاقةِ المُسْتَلْقَمَة:

- `hx-boost="true"` - تقاطعات الوصلات، تحويلات إلى AJAX
- `hx-target="#content"` - أين يحقن الرد
- `hx-headers='{"pagerequest": "true"}'` - رئيس رئيس الراسات المخصصة يقول للمتحكم انها مائلة
- عمليات التحقق من مراقب المراقبة `Request.IsHtmx() && pagerequest` فقط الحد الأدنى الجزئي

## الحزمة الأولى التي غالباً ما تكون غير مكلورة.

لقد كتبت [غالباً luccid.](https://github.com/scottgal/mostlylucid.pagingtaghelper) إلى تجنب تكرار شفرات هو HTMX الأول لكن يعمل بدون جافاسكربت أيضاً.

### عدد أفراد

```bash
dotnet add package mostlylucid.pagingtaghelper
```

مضاف `_ViewImports.cshtml`:

```razor
@addTagHelper *, mostlylucid.pagingtaghelper
```

### ك الرئيسية

تنفيذ تنفيذ تنفيذ `IPagingModel<T>` و أنتِ فعلتِ ما يلي:

```csharp
public class BasePagingModel<T> : IPagingModel<T> where T : class
{
    public int Page { get; set; }
    public int TotalItems { get; set; }
    public int PageSize { get; set; }
    public string LinkUrl { get; set; }
    public List<T> Data { get; set; }
}
```

**ما تحصل عليه:**

- الحاجة إلى التشكيلة الصفرية
- أُطُر العمل المتعددة التُعَدَّد (الإطارات الموحدة المتعددة (الإطارات الإطارية للتدفقات البيئية المتعددة + ديزيوكي، وبوتسراب 5، ووجهات نظر مُعَلَّمة)
- دعم
- 8 لغات
- تروي تروي تروي تروير تروي ترويض ترويض ترويض
- تعزيز تدريجي (أشغال بدون جافSccrbr)
- دعم رمزي مستمر لقواعد بيانات NSSQL

الـ شارة مساعدة توليد روابط حفظ استعلام إستفسار سلاسل دعم مخصص الترويسة و تكامل مع HTMX (انظر المثال أعلاه).

## HTMX HTMX)(

وهنا كيف يتوافق النظام بأكمله مع بعضها البعض:

```mermaid
graph TB
    A[Browser] -->|"Initial page load"| B[Controller Action]
    B -->|"Request.IsHtmx() = false"| C[Return Full View]
    C --> D[Render Layout + Partial]

    A -->|"User clicks pagination/filter"| E[HTMX Request]
    E -->|"hx-get with headers"| F[Same Controller Action]
    F -->|"Request.IsHtmx() = true"| G{Check Headers}
    G -->|"pagerequest header"| H[Return Minimal Partial]
    G -->|"No special header"| I[Return Section Partial]

    H --> J[Swap Content in Target]
    I --> J

    J -->|"User clicks another link"| E

    style B stroke:#333,stroke-width:2px
    style F stroke:#333,stroke-width:2px
    style C stroke:#0066cc,stroke-width:2px
    style H stroke:#00cc66,stroke-width:2px
    style I stroke:#00cc66,stroke-width:2px
```

## مقارنة الإطارات الأخرى

### جو جو جو جو جو جو

اضف Django قالب جزئي صحيح في النسخة 6.0 (كانون الأول/ديسمبر 2024) مع قالب شظايا. قبل ذلك، استخدم Django المطورون عادة بطاقات إدراج أو حزم أطراف ثالثة مثل django- render-bol. كان لدى ASP.Net kor. `PartialView()` في عام 2016 - أُطر مختلفة، جداول زمنية مختلفة، ولكن نفس الوجهة: شظايا HTML لHTMX.

### سكّات

روبي على السكك الحديدية لديها توربو أورامز (جزء من Hotwair)، وهو مشابه في الروح:

```erb
<%= turbo_frame_tag "posts" do %>
  <%= render @posts %>
<% end %>
```

الفرق هو أن Turbo يحتاج إلى Turbo علامات إطار محددة على كل من الطلب والإجابة. HTMX أكثر مرونة - أي نقطة نهاية يمكن لأي نقطة نهاية أن تعيد أي HTML، وتقرر أين تذهب مع `hx-target`.

### يحيى

تتخذ فيفيو فينيكس فينيكس في Elexir نهجاً مختلفاً مع اتصالات الوب الساكنة Socket و حالة الخادم الجانبي:

```elixir
def handle_event("load_more", _params, socket) do
  {:noreply, assign(socket, posts: load_more_posts())}
end
```

لايف فيو عبقرية في التطبيقات في الوقت الحقيقي، لكنه يتطلب بنية تحتية WebSocket وذاكرة خادم للاتصالات. HTMX يستخدم HTTP القديم جداً - عديم الجنسية، قابل للإختباء، قابل للقياس. بالنسبة لمدوّنة، هذا مثالي.

## لجنة البلدان

**مساق**الـ: `OutputCache` تفريق `hx-request` ترويسة ، كشّف الصفحات الكاملة والجزئيات بشكل منفصل:

```csharp
[OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request", "pagerequest" })]
```

**الشبكة**: HTML المستخدم في الخوادم غالباً ما يكون أصغر من JSON + قوالب جانب العميل، تتطلب رحلات أقل ذهاباً وإياباً، والمخابئ بشكل صحيح.

**اسند سسيسيس**HTMX (14KB) + Alpin.js (15KB) + مساعد وسم الندب (0KB، الخادم - الجانب) = أقل من 30KB المجموع. مقارنة ذلك بتطبيق رد نموذجي (200KB+).

## & متقدم

**تحديثات UUI** - مجموعة HTMX و ألبين للتغذية الفورية:

```razor
<div x-data="{ count: @Model.CommentCount }">
    <button hx-post="/comment/like" x-on:click="count++" hx-on::after-request="count = $event.detail.xhr.response">
        Likes: <span x-text="count"></span>
    </button>
</div>
```

يُحدّث العدّ فوراً (opfitisti)، ثم يتزامن مع ردّ الخادم.

**مسوّات من خارج من** - أجزاء محدثة متعددة الصفحات من أحد الردود:

```razor
<div id="main-content"><!-- Main response --></div>
<div id="notification-count" hx-swap-oob="true"><span>5 new</span></div>
```

أغطي هذا النمط بتعمق [إظهار النخبة والتجاوز مع HTMX](/blog/showingtoastandswappingwithhtmx).

**قوالب مع WebAPI** -أحياناً تريد تجربة في منتصف الطريق: HTML المطور بالخادم لمعظم الأشياء، لكن JSON من شبكة ويبAPI لمحتوى ديناميكي محدد. HTMX's [توسيع نطاق الهاتف الهاتف الهاتف الهاتف الفرعي](https://htmx.org/extensions/client-side-templates/) يَتْركُك تَعمَلُ هذا:

```html
<script src="https://unpkg.com/htmx-ext-client-side-templates@2.0.0/client-side-templates.js"></script>
<script src="https://unpkg.com/mustache@latest"></script>

<div hx-ext="client-side-templates">
    <template id="post-template" type="text/mustache">
        {{#posts}}
        <div class="post">
            <h3>{{title}}</h3>
            <p>{{excerpt}}</p>
        </div>
        {{/posts}}
    </template>

    <button hx-get="/api/posts"
            hx-target="#post-list"
            mustache-template="post-template">
        Load Posts
    </button>
    <div id="post-list"></div>
</div>
```

يعمل هذا النهج مع Jasche أو Handlebars أو Nunjucks قوالب. ترجع WebAPI JSON ، لكن HTMX يتعامل مع جانب الموكل. إنه مفيد بشكل خاص عندما يكون لديك API موجود أو تحتاج إلى تقاسم البيانات مع تطبيقات محمولة. لمزيد من التفاصيل عن امتدادات HTMX بما في ذلك متصفحات العميل الجانبية ، انظر [« وزززززززز](/blog/htmxandaspnetcore).

## النوتات

**جاريفكفكفكفكفكفكفكفكفكفكفكفكفكفكفكفكفكفكفك هذا** (أ) تثبيت: [مُسند مُسند مُسند مُسند](https://chromewebstore.google.com/detail/htmx-debugger/) - يُظهرُ كُلّ طلب، إستجابة، ومبادلة في الوقت الحقيقي.

### CSRF CCons

تحتاج علامات ASP.NET المضادة للتزوير إلى مناولة خاصة مع AJAX. HTMX.NET توفر عدة خيارات نظيفة. `HtmxAntiforgeryScriptEndpoint`:

```csharp
// In Program.cs
app.MapHtmxAntiforgeryScript();
```

```html
<!-- In your layout head -->
<script src="@HtmxAntiforgeryScriptEndpoints.Path" defer></script>
```

أو استخدم مُنَفِّذ المُوَقَّع: `<meta name="htmx-config" includeAspNetAntiforgeryToken="true" />`انظر: [مقال خالد على HTMX مضاد للتزوير](https://khalidabuhakmeh.com/htmx-requests-with-aspnet-core-anti-forgery-tokens) لتفاصيل كاملة.

### Alpin.js @ Shashand in Razor

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `@click` حالات تضارب مع `@` ا_ستخدِم الواجهة الصريحة بدلاً من ذلك:

```razor
<button x-on:click="doSomething()">Click me</button>  <!-- Instead of @click -->
<div x-bind:class="isOpen ? 'block' : 'hidden'"></div>  <!-- Instead of :class -->
```

أو يمكن أن يكون مع: `@@click`لكن الصياغة الصريحة أكثر وضوحاً

### تَدِِِِِِِِِِِِِِْْْْْْْْْْْْْْْْْْْْْْْْْْ

**مورِد:** افتراضياً، يقوم HTMX بدفع كل طلب إلى التاريخ. بالنسبة للمشابك/المرشحات حيث لا تريد تلوث التاريخ:

```razor
<paging model="@Model" hx-push-url="false">  <!-- Don't add history entries -->
```

الاستخدام في حالة الاستخدام `hx-replace-url="true"` إلى تحديث URL بدون إضافة خانات.

**مشكلة فانتوم الجزئية:** يظهر متصفح المتصفح الخلفي/ التام فقط جزء جزئي فقط مع عدم وجود تخطيط. أصلح مع `hx-history-elt` على وعاء المحتوى الخاص بك:

```html
<div class="container mx-auto" id="contentcontainer" hx-history-elt>
    @RenderBody()
</div>
```

هذا يُخبر HTMX أيّ عنصر إلى لمحة، يُحافظ على التخطيط المحيط عند إستعادة التاريخ.

### CCDN Ccachch (Cludflare, et............)

**كائن::** يعمل HTMX محليًّا لكنّه يتخلّف وراء a CDN - المحتوى الخاطئ يصبح مخبّأً.

**السبب:** CD CDNs `HX-Request` الترويسة. خادمك يرجع محتوى مختلفاً بناءً على هذا الترويسة، لكن CDN يخبئها بشكل متطابق.

**أولاً - الهدف الأساسي:** `VaryByHeaderNames`:

```csharp
[OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request" })]
```

**تثبيت CD CDSS:** لا يشمل هذا `HX-Request` لـ مفتاح الخزنة لـ لـ سحاب الوميض: shashboard TM Caching TM Kache قواعد الـ مخصص مخبئ مفتاح □ ترويسات □ متضمنة `HX-Request`.

### نقاش hx- مُؤَتَفِجَة

[`hx-boost`](https://htmx.org/attributes/hx-boost/) يحول الروابط العادية إلى طلبات AJAX. [صفحة HTMX HTMX H](https://htmx.org/quirks/) يوصي بعض أعضاء الفريق الأساسي بتجنبه (التوصيات) `<head>` فالاحتمالات تؤثر على موقع السلوك ، في حين يجدها الآخرون مناسبة لتحقيق مكاسب سريعة .

```razor
<div hx-boost="true" hx-target="#contentcontainer">
    <a asp-action="Show" asp-route-slug="@post.Slug">Read More</a>
</div>
```

استخدام هذه المدونة له على نطاق واسع. عند استهداف حاويات محددة، صراحة `hx-get` أكثر وضوحاً، ولكن `hx-boost` يعمل إذا أنت ثابت. عاجز عن الانتقائي مع `hx-boost="false"` على عناصر الطفل.

## ثالثاً - استنتاج

HTMX مع ASP.NET أساس الجزئيات تمثل عودة لبساطة جانب الخادوم بدون التضحية بـ UX الحديثة. تحصل على:

- دال- التفاعلات التي تشبه تفاعلات
- تقديم خدمات جانب الخادم (معظمها لـ SEO)
- مُحَسَّب مُسْتَبْرَج
- مصغر مُ جافScr م سكر
- التعزيز التدريجي
- (ب) التوجيه المأمون النوعي باستخدام شبكة HTMX.net
- مائل مائلة إلى الصفر مع مُساعد مُرْجِل مُعَلِّم غالباً

النهج المستخدم في الخوادم قد قاوم اختبار الزمن، ومع HTMX، أخيراً لديه الأداة الأنيقة في جانب العميل التي تستحقها. يمكنك بناء تطبيقات قوية ومؤدية على الإنترنت باستخدام الأنماط التي نجحت لعقود من الزمن - لقد كانوا فقط في انتظار الأداة الصحيحة لجعلها تلمع مرة أخرى.

## مواد ذات صلة بشأن هذه القائمة

### المادة المصاحبة

هذه المادة جزء من سلسلة من جزئين عن HTMX مع ASP.net fror:

1. **هذه المادة المادة** - التركيز على التكامل الأساسي لشبكة APSP.net، والآراء الجزئية، وشبكة HTMX.net، والوصلة
2. **[جولة شاملة من عمليات توسيع نطاقات HTMX](/blog/htmxandaspnetcore)** - الغوص العميق في أحداث HTMX، ودورة الحياة، وبنية التمديد، والتمديدات الجمركية

### مواد HTMX أكثر

- [إضافة قائمة مع HTMX](/blog/addpagingwithhtmx) - المادة الأصلية المتعلقة بتنفيذ العُقْن مع المُنَفِّط الأكبر سناً
- [تجميع البيانات الأساسية مع HTMX](/blog/aspnetcachingwithhtmx) - الغوص العميق في استراتيجيات تجميع الطلبات الخاصة بطلبات HTMX
- [AUT مع Alben و HTMX](/blog/autorefreshwithalpineandhtmx) - الجمع بين الألبينات والجز مع HTMX لمكونات التفاعل
- [جعل موقعك اكثر شبها بـ HTMX](/blog/htmxtomakeyoursitemorespalike) - ملاحـة شبيهة بملاحـة SSPA بدون أُطر جافاسكربت
- [استخدام Quit Altert لمؤشرات HX](/blog/usingsweetalertforhxindicators) - مؤشرات تحميل جميلة مع HTMX
- [إظهار النخبة والتجاوز مع HTMX](/blog/showingtoastandswappingwithhtmx) - إخطارات النخب المُسرَّب

## & ما

**الوثائق: الوثائق الرسمية**

- [وثائق الأمم المتحدة](https://htmx.org/docs/) - وثائق HTMX الرسمية
- [أمثلة](https://htmx.org/examples/) - أمثلة عملية لأنماط HTMX
- [تمديدات HTMXX HTMX](https://htmx.org/extensions/) - الملحقات الرسمية HTMX
- [الوثائق](https://alpinejs.dev/) - الوثائق الرسمية المتعلقة بالآجلس
- [أمثلة](https://alpinejs.dev/examples) - الأنماط العملية للألبان والحاجج
- [أولاً - موجز آراء أساسية](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/partial) - دليل مايكروسوفت إلى الآراء الجزئية
- [مجموع الناتج الأساسي من الناتج](https://learn.microsoft.com/en-us/aspnet/core/performance/caching/output) - الوثائق الرسمية المتعلقة بكسوج الوثائق

**& الأدوات:**

- [HTMX.Net GetHub](https://github.com/khalidabuhakmeh/Htmx.Net) - رمز مصدر المكتبة HTMXNET
- [هولندا(ن)](https://www.nuget.org/packages/Htmx/) - HTMX.Net on NuGet
- [Httmx. TAGFs No get](https://www.nuget.org/packages/Htmx.TagHelpers/) - HTMX HTMX مُساعدات مُعَلِّم على النوّة
- [الموقع الشبكي للمخلق](https://khalidabuhakmeh.com/) - إنشاء شبكة HTMX.NET، بمدونات ممتازة
- [حُنْب حُصُل](https://github.com/khalidabuhakmeh) - مشاريع أكثر براعة من المصادر المفتوحة
- [معظمها luccided. pachjjt hub](https://github.com/scottgal/mostlylucid.pagingtaghelper) -رمز رمزي للمساعد في طلبي
- [غالباً luccid. pajet gan](https://www.nuget.org/packages/mostlylucid.pagingtaghelper/) -الحزمة على (نوجت)

**الموارد:**

- [HTMx ديسرس](https://htmx.org/discord) - الدعم المجتمعي النشط
- [HTMXXX HTMX](https://htmx.org/essays/) - مقالات مدروسة عن فلسفة HTMX
- [كتاب نُظم](https://hypermedia.systems/) - كتاب مجاني على الإنترنت عن بناء تطبيقات فرط الضغط