تقنية إرجاع جزء من شظايا HTML من الخادم ومبادلتها في DOM ليست جديدة -- لقد كنت استخدم هذا النمط منذ أيام JQuery، وحتى قبل ذلك مع الفانيلا JavaScript و XMLHttpRequestما تغير هو كيف أنج لقد أصبح مع HTMX.
في حين أن عالم جافاسكربت كان مشغولاً بإختراع إطار آخر كل أسبوعين، ASP.NET المطورون الأساسيون يبنون بشكل هادئ تطبيقات قوية جانب الخادم مع وجهات نظر جزئية. الآن، مع HTMX، يمكننا أن نضيف تفاعلات ديناميكية مثل SPA بدون الغرق في تعقيد جافاسكربت. هو بالأحرى مثل الحصول على كعكتك وأكلها أيضاً - نفس أنماط جانب الخادم التي استخدمناها لسنوات، ولكن مع واجهة تفسيرية حديثة.
المادة المصاحبة: تركز هذه المادة على جانب التكامل الأساسي لـ ASP.NET.NET. للحصول على الغوص العميق في أحداث HTMX، دورة الحياة، والإمتدادات الجمركية، انظر مقالتي المرافقة: جولة شاملة من توسيعات HTMX واستخدام HTMX مع ASP.net.
في هذه المقالة، سأريكم كيف يدمج HTMX بشكل جميل مع ASP.Net conure جزئيات كم ممتاز المقر المقر المقر المقر فقط المكتبة تجعلها أفضل، وكيف غالباً luccid. NuGet حزمة يزوّد قوي مائل مع صفر تشكيل.
على سبيل التلويح: لم يحصل جانغو إلا على نموذج جزئي مناسب في النسخة 6.0 (أفرج عنه في ديسمبر 2024)، في حين كان لدى ASP.NET CORE وجهات نظر جزئية منذ اليوم الأول. أحيانا الكلاب القديمة تعرف القليل من الحيل!
HTMX هي مكتبة تسمح لكم بالوصول إلى ميزات المتصفح الحديثة مباشرة من HTML، بدلاً من كتابة جافاسكربت. تمد HTML بخصائص تسمح لكم بعمل طلبات AJAX، مبادلة المحتوى، وخلق تفاعلات غنية - كل ذلك بدون ترك العلام.
الصفات الرئيسية التي ستستخدمها في أغلب الأحيان:
hx-get, hx-post, hx-put, hx-delete - جعل طلبات HTTPhx-target - يُحدّد مكان وضع الردhx-swap - التحكم في كيفية مبادلة المحتوى (innerHTMTML, exterHTMTML, et al.)hx-trigger - تحديد ما يحفز الطلب (انقر، تغيير، تحميل، وما إلى ذلك)hx-push-url - حدِّث المتصفح URL دون تحميل كامل لصفحةها هو جمالها: ما زلت تكتب رمز جانب الخادم، تعيد HTML إلى حاسوب الخدمة. لا Json APISs، لا قوالب جانب العميل، لا خطوط أنابيب بناء. فقط HTML جيدة الطراز القديم على السلك.
قبل HTMX، حققنا نفس التأثير مع مراسم أكثر بكثير. هذا ما بدا عليه التحديث الجزئي في عصر الفصل:
// jQuery circa 2010
$('#load-more').click(function() {
$.ajax({
url: '/posts/page/' + currentPage,
success: function(html) {
$('#posts-container').append(html);
currentPage++;
}
});
});
وحتى في وقت سابق، مع الفانيلا جافاسكربت:
// 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، مما يجعلها تفسيرية، قابلة للاكتشاف، وأقل عرضة للخطأ. الابتكار ليس التقنية، بل هي الواجهة.
نحن ASP.Net المطورون كانوا يقومون بهذه الرقصة من أجل عقود من عقود نشرات مستكملة في شكل Web Forms (2005), PartialView() في MVC منذ اليوم الأول، Html.RenderAction() بالنسبة للشظايا القابلة للتحلل - النمط كان دائماً هناك. HTMX فقط يجعل الأمر يبدو خيالياً وجديداً بالنسبة لحشود جافاسكربت. بالنسبة لنا؟ إنه الثلاثاء.
أليس من الممتع مشاهدة نظام جافاسكربت البيئي "الاكتشاف" مفاهيم مثل "SSR" (Server-Side Rendering)، و"Hybred translation"، و"الهندسة المعمارية" PartialView() كامل الوقت.
HTMX هي أساساً مجتمع جافاسكربت يعترف بأنه ربما، فقط ربما، ربما، الشبكة التي يعمل بها الخادم لم تكن سيئة جداً بعد كل شيء. نحن نرحب بهم في الحفلة.
أولاً، إدراج HTMX بوصة تخطيط أنت استخدام a CDN أو الإيطالية محليّاً:
<script src="https://unpkg.com/[email protected]"></script>
هذا كل شيء. لا خطوة بناء، لا تثبّت npm، لا تثبّت، لا تشكيل لحزمة ويب. فقط ضع علامة نص وأنت ذاهب إلى السباقات.
فيما يتعلق بردود الفعل تجاه العملاء (عناصر العرض/التخبئة، الولايات المتقاطعة، ولاية UI المحلية)، الألابين في 15KB gzzlippit، يوفر تفاعلاً بيانياً مثل Vue/react بدون التلويح.
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
وهنا كيف يعملون معاً:
<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 لـ خادم.
(السكين)- - - - - - - المقر المقر المقر المقر فقط توفر المكتبة التكامل الأساسي من الدرجة الأولى لشبكة ASP.NET. Htmx وقد عقد مؤتمراً بشأن Htmx.TagHelpers NuGet رزم، تشعر بشعورها الأصلي ل.NET وجعل العمل مع HTMX متعة مطلقة. سوف تجد المزيد من عمل خالد الممتاز لا يُحَجْجَه.
dotnet add package Htmx
dotnet add package Htmx.TagHelpers
في _ViewImports.cshtml:
@addTagHelper *, Htmx.TagHelpers
والسمة الأكثر فائدة هي: Request.IsHtmx() طريقة التمديد، التي تخبرك ما إذا كان الطلب قد جاء من HTMX. هذا يسمح لك بإرجاع إما عرض كامل أو فقط جزئي:
[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);
}
هذا النمط رائع تماماً، عمل متحكم واحد يخدم كلا الأمرين:
لا نقاط نهاية منفصلة API، لا منطق تكراري، لا JUSON تسلسلية أعلى.
HTMX.NET توفر أجهزة مساعدة على الوسم تعمل مع أجهزة التحكم المنظفة. بدلاً من كتابة خطوط المسار، يمكنك استخدام مراجع شديدة التصميم:
<button
hx-controller="Comment"
hx-action="GetCommentForm"
hx-post
hx-target="#commentform">
Reply
</button>
هذا يولّد المسار الصحيح باستخدام نظام توجيه ASP.NET Kor. إذا قمت بإعادة تسمية متحكمك أو إجراءك، فإن مؤشر تعريفك سيمسكه. أفضل بكثير من الأوتار السحرية!
هنا مثال حقيقي من نظام تعليق هذه المدونة:
<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) لتلك الأجزاء العرضية من التفاعل مع العملاء.
كما توفر المكتبة ما يلي:
Request.IsHtmxNonBoosted() - تحقق إذا كان طلب HTMX ولكن ليس مدعوماًRequest.IsHtmxRefresh() -تحقق إذا كان طلب استعادة تاريخ التاريخهنا متحكم البحث من هذه المدونة، يظهر نمط العودة من ثلاثة مستويات:
[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);
}
ثلاثة مسارات عودة لثلاثة سيناريوهات:
الرأي المُنَظَم_SearchResultsPartial.cshtml(يستخدم مساعد بطاقة الإشباع:
@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" - تقاطعات الوصلات، تحويلات إلى AJAXhx-target="#content" - أين يحقن الردhx-headers='{"pagerequest": "true"}' - رئيس رئيس الراسات المخصصة يقول للمتحكم انها مائلةRequest.IsHtmx() && pagerequest فقط الحد الأدنى الجزئيلقد كتبت غالباً luccid. إلى تجنب تكرار شفرات هو HTMX الأول لكن يعمل بدون جافاسكربت أيضاً.
dotnet add package mostlylucid.pagingtaghelper
مضاف _ViewImports.cshtml:
@addTagHelper *, mostlylucid.pagingtaghelper
تنفيذ تنفيذ تنفيذ IPagingModel<T> و أنتِ فعلتِ ما يلي:
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; }
}
ما تحصل عليه:
الـ شارة مساعدة توليد روابط حفظ استعلام إستفسار سلاسل دعم مخصص الترويسة و تكامل مع HTMX (انظر المثال أعلاه).
وهنا كيف يتوافق النظام بأكمله مع بعضها البعض:
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
تجدر الإشارة إلى أن جانغو أضاف فقط نموذج جزئي مناسب في النسخة 6.0 (كانون الأول/ديسمبر 2024) مع إدخال شظايا القالب. قبل ذلك، كان على مطوري جانغو إما:
وفي الوقت نفسه، كان لشبكة البيانات الأساسية ما يلي: PartialView() نحن نقوم بهذه الرقصة منذ ما يقرب من عقد من الزمان
روبي على السكك الحديدية لديها توربو أورامز (جزء من Hotwair)، وهو مشابه في الروح:
<%= turbo_frame_tag "posts" do %>
<%= render @posts %>
<% end %>
الفرق هو أن Turbo يحتاج إلى Turbo علامات إطار محددة على كل من الطلب والإجابة. HTMX أكثر مرونة - أي نقطة نهاية يمكن لأي نقطة نهاية أن تعيد أي HTML، وتقرر أين تذهب مع hx-target.
تتخذ فيفيو فينيكس فينيكس في Elexir نهجاً مختلفاً مع اتصالات الوب الساكنة Socket و حالة الخادم الجانبي:
def handle_event("load_more", _params, socket) do
{:noreply, assign(socket, posts: load_more_posts())}
end
لايف فيو عبقرية في التطبيقات في الوقت الحقيقي، لكنه يتطلب بنية تحتية WebSocket وذاكرة خادم للاتصالات. HTMX يستخدم HTTP القديم جداً - عديم الجنسية، قابل للإختباء، قابل للقياس. بالنسبة لمدوّنة، هذا مثالي.
مساقالـ: OutputCache تفريق hx-request ترويسة ، كشّف الصفحات الكاملة والجزئيات بشكل منفصل:
[OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request", "pagerequest" })]
الشبكة: HTML المستخدم في الخوادم غالباً ما يكون أصغر من JSON + قوالب جانب العميل، تتطلب رحلات أقل ذهاباً وإياباً، والمخابئ بشكل صحيح.
اسند سسيسيسHTMX (14KB) + Alpin.js (15KB) + مساعد وسم الندب (0KB، الخادم - الجانب) = أقل من 30KB المجموع. مقارنة ذلك بتطبيق رد نموذجي (200KB+).
تحديثات UUI - مجموعة HTMX و ألبين للتغذية الفورية:
<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)، ثم يتزامن مع ردّ الخادم.
مسوّات من خارج من - أجزاء محدثة متعددة الصفحات من أحد الردود:
<div id="main-content"><!-- Main response --></div>
<div id="notification-count" hx-swap-oob="true"><span>5 new</span></div>
الكمالية لشارات الإخطار، وأعداد العربات، وما إلى ذلك.
ASP.NET رسومات المكافحة للتزوير تعمل بشكل مختلف مع AJAX. تحتاج إلى ضبط HTMX لإرسال الرمز:
document.addEventListener('htmx:configRequest', (event) => {
event.detail.headers['X-CSRF-TOKEN'] =
document.querySelector('[name="__RequestVerificationToken"]').value;
});
Albin.js له a قصير suppatus @ (مثلاً، مثلاً، @click بدلاً من بدلاً من x-on:clickلكن هذا يتعارض مع @ لديك ثلاثة خيارات:
الخيار 1: استخدام شرط صريح (موصى به)
<button x-on:click="doSomething()">Click me</button>
الخيار الـ مع @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
<button @@click="doSomething()">Click me</button>
الخيار 3: الاستخدام x- البثبت في الخواص
<div x-bind:class="isOpen ? 'block' : 'hidden'"></div>
أفضل الصراحة x-on:click صياغة كما هو أوضح وتجنّب أيّ إلتباس مع صيغة ريزور.
افتراضياً، HTMX يدفع كل طلب إلى التاريخ. بالنسبة للترميز، قد تريد:
<paging
model="@Model"
hx-push-url="false"> <!-- Don't pollute history -->
</paging>
الاستخدام في حالة الاستخدام hx-replace-url="true" إلى تحديث URL بدون إضافة التاريخ خانات.
ثبت امتداد متصفح HTMX devtoodes. تظهر لكم كل طلب، استجابة، ومبادلة في الوقت الحقيقي. قيمة تماما.
HTMX مع ASP.NET أساس الجزئيات تمثل عودة لبساطة جانب الخادوم بدون التضحية بـ UX الحديثة. تحصل على:
بينما يواصل العالم المخطوط جافاسكربت إطار دورة الأسبوع، يمكننا بناء تطبيقات قوية ومؤدية على الإنترنت باستخدام الأنماط التي نجحت لعقود. أحيانا الطرق القديمة هي أفضل الطرق -- كانوا ينتظرون فقط الأداة الصحيحة لجعلهم يشعون مرة أخرى.
هذه المادة جزء من سلسلة من جزئين عن HTMX مع ASP.net fror:
الوثائق: الوثائق الرسمية
& الأدوات:
الموارد:
© 2026 Scott Galloway — Unlicense — All content and source code on this site is free to use, copy, modify, and sell.