NOTE: Apart from
(and even then it's questionable, I'm Scottish). These are machine translated in languages I don't read. If they're terrible please contact me.
You can see how this translation was done in this article.
Tuesday, 11 March 2025
//Less than a minute
दूसरे दिन काम करने का दूसरा तरीका है, काम के दूसरे तरीकों का इस्तेमाल करना । मेरे जाने के टैग मदद हमेशा से किया गया है डार्सल ओ 'LLLLL द्वारा खोज टैग सहायक के रूप में मैं के बारे में लिखा यहाँ लेकिन जो भी कारण यह सिर्फ है के लिए कार्य बन्द करें मेरे लिए. सो इस बिंदु पर एक खाली परियोजना की तरह लग रही है जो मैं ने अपने आप को एक निर्माण करने का निर्णय किया ।
हमेशा आप इस के लिए स्रोत प्राप्त कर सकते हैं मेरे Githब पर
मैं इस परियोजना के लिए नमूना साइट है यहाँ शामिल किया गया
इस आउटपुट के नमूने इस तरह हैं:
इस टैग के लिए मुझे कुछ माँगें थीं:
Dafault.cshtml दृश्य.भविष्य में मैं क्षमता जोड़ूँगा:
टैग सहायक अब एक तेज नया Nuget पैकेज है ताकि आप इसे निम्न कमांड के साथ संस्थापित कर सकें:
dotnet add package mostlylucid.pagingtaghelper
आप तब टैग मदद को अपने में जोड़ें _ViewImports.cshtml ऐसे फ़ाइल:
@addTagHelper *, mostlylucid.pagingtaghelper
तो फिर आप इसे इस्तेमाल कर शुरू कर सकते हैं; मैं कुछ सहायक क्लास प्रदान करता हूँ जो आप इस तरह के विन्यास के लिए इस्तेमाल कर सकते हैं
IPagingModelयह आप शुरू करने के लिए की जरूरत है 'बैठिक सामग्री है. यह एक सरल इंटरफेस है कि आप अपने मॉडल पर उपयोग कर सकते हैं करने के लिए paning करने के लिए। नोट कि ViewType वैकल्पिक है यह तयशुदा है TailwindANdDaisy लेकिन आप इसे करने के लिए सेट कर सकते हैं Custom, Plain या Bootstrap यदि आप भिन्न दृश्य का उपयोग करना चाहते हैं तो.
public enum ViewType
{
TailwindANdDaisy,
Custom,
Plain,
Bootstrap
}
या आप भी टैग मदद के उपयोग से मनपसंद दृश्य निर्दिष्ट कर सकते हैं use-local-view गुण.
namespace mostlylucid.pagingtaghelper.Models;
public interface IPagingModel
{
public int Page { get; set; }
public int TotalItems { get; set; }
public int PageSize { get; set; }
public ViewType ViewType { get; set; }
public string LinkUrl { get; set; }
}
namespace mostlylucid.pagingtaghelper.Models;
public interface IPagingSearchModel : IPagingModel
{
public string? SearchTerm { get; set; }
}
मैं इन्हें भी काम में करता हूँ एक आधार लाइन प्रदान करने के लिए:
public abstract class BasePagerModel : IPagingModel
{
public int Page { get; set; } = 1;
public int TotalItems { get; set; } = 0;
public int PageSize { get; set; } = 10;
public ViewType ViewType { get; set; } = ViewType.TailwindANdDaisy;
public string LinkUrl { get; set; } = "";
}
public abstract class BasePagerSearchMdodel : BasePagerModel, IPagingSearchModel
{
public string? SearchTerm { get; set; }
}
मैं एक भावी लेख में खोज कार्य को कवर करूंगा.
तो मैं क्या करना चाहते हैं बाहर काम किया मैं टैग मददकर्ता का उपयोग में देखने के लिए:
<paging
x-ref="pager"
hx-boost="true"
hx-indicator="#loading-modal"
hx-target="#user-list "
hx-swap="show:none"
model="Model"
pages-to-display="10"
hx-headers='{"pagerequest": "true"}'>
</paging>
यहाँ पर आप देख सकते हैं कि मैं कुछ HMAX पैरामीटर्स और मॉडल paning के लिए उपयोग करने के लिए सेट कर सकते हैं. मैं ने पृष्ठ की संख्या को प्रदर्शित करने के लिए और शीर्षिका को भी सेट किया (यह मुझे HMMX को भरने के लिए प्रयोग करता है पृष्ठ को भरने के लिए अनुमति देता है).
अवयव के पास अन्य कॉन्फ़िग तत्वों की भी है जो मैं भविष्य के लेखों में काम करेंगे. जैसा कि आप वहाँ देख सकते हैं संभव कॉन्फ़िगरेशन का एक फार्मर है.
<paging css-class=""
first-last-navigation=""
first-page-text=""
next-page-aria-label=""
next-page-text=""
page=""
pages-to-display=""
page-size=""
previous-page-text=""
search-term=""
skip-forward-back-navigation=""
skip-back-text=""
skip-forward-text="true"
total-items=""
link-url=""
last-page-text=""
show-pagesize=""
use-htmx=""
use-local-view=""
view-type="Bootstrap"
htmx-target=""
id=""
></paging>
टैग मददर बहुत सरल है लेकिन उपयोगकर्ता के पास गुण हैं जो बर्ताव को मनपसंद बनाने में सक्षम हैं (आप नीचे इसे देख सकते हैं) दृश्य ) गुण से अलग (जो मैं यहाँ नहीं चिपका सकता) कोड काफी सीधा है:
/// <summary>
/// Processes the tag helper to generate the pagination component.
/// </summary>
/// <param name="context">The tag helper context.</param>
/// <param name="output">The tag helper output.</param>
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "div";
//Remove all the properties that are not needed for the rendered content.
output.Attributes.RemoveAll("page");
output.Attributes.RemoveAll("link-url");
output.Attributes.RemoveAll("page-size");
output.Attributes.RemoveAll("total-items");
output.Attributes.RemoveAll("pages-to-display");
output.Attributes.RemoveAll("css-class");
output.Attributes.RemoveAll("first-page-text");
output.Attributes.RemoveAll("previous-page-text");
output.Attributes.RemoveAll("skip-back-text");
output.Attributes.RemoveAll("skip-forward-text");
output.Attributes.RemoveAll("next-page-text");
output.Attributes.RemoveAll("next-page-aria-label");
output.Attributes.RemoveAll("last-page-text");
output.Attributes.RemoveAll("first-last-navigation");
output.Attributes.RemoveAll("skip-forward-back-navigation");
output.Attributes.RemoveAll("model");
output.Attributes.RemoveAll("show-pagesize");
output.Attributes.RemoveAll("pagingmodel");
output.Attributes.RemoveAll("use-local-view");
var pagerId = PagerId ?? $"pager-{Guid.NewGuid():N}";
var linkUrl = LinkUrl ?? ViewContext.HttpContext.Request.Path;
PageSize = Model?.PageSize ?? PageSize ?? 10;
Page = Model?.Page ?? Page ?? 1;
ViewType = Model?.ViewType ?? ViewType;
TotalItems = Model?.TotalItems ?? TotalItems ?? 0;
if(Model is IPagingSearchModel searchModel)
SearchTerm = searchModel?.SearchTerm ?? SearchTerm ?? "";
output.Attributes.SetAttribute("id", pagerId);
var viewComponentHelper = (IViewComponentHelper)ViewContext.HttpContext.RequestServices.GetService(typeof(IViewComponentHelper))!;
((IViewContextAware)viewComponentHelper).Contextualize(ViewContext);
var pagerModel = PagerModel ?? new PagerViewModel()
{
ViewType = ViewType,
UseLocalView = UseLocalView,
UseHtmx = UseHtmx,
PagerId = pagerId,
SearchTerm = SearchTerm,
ShowPageSize = ShowPageSize,
Model = Model,
LinkUrl = linkUrl,
Page = Page,
PageSize = PageSize,
TotalItems = TotalItems,
PagesToDisplay = PagesToDisplay,
CssClass = CssClass,
FirstPageText = FirstPageText,
PreviousPageText = PreviousPageText,
SkipBackText = SkipBackText,
SkipForwardText = SkipForwardText,
NextPageText = NextPageText,
NextPageAriaLabel = NextPageAriaLabel,
LastPageText = LastPageText,
FirstLastNavigation = FirstLastNavigation,
SkipForwardBackNavigation = SkipForwardBackNavigation,
HtmxTarget = HtmxTarget,
};
var result = await viewComponentHelper.InvokeAsync("Pager", pagerModel);
output.Content.SetHtmlContent(result);
}
ये कदम हैं:
div; यह पेजर के लिए कंटेनर है.IPagingModel के साथ कोई और विन्यास नहीं है.PagerViewModel यदि नहीं दिया गया है तो मान के साथ गुण सेट के साथ या तयशुदा के साथ.Pager के साथ कोर घटक देखें PagerViewModel परिणाम में आउटपुट सामग्री सेट करें.फिर सब बहुत सरल.
दृश्य के लिए दृश्य बहुत सरल है; यह सिर्फ पृष्ठों के माध्यम से लूप और प्रथम, पिछले और पिछले पृष्ठ के लिए कुछ लिंक है.
@model mostlylucid.pagingtaghelper.Components.PagerViewModel
@{
var totalPages = (int)Math.Ceiling((double)Model.TotalItems! / (double)Model.PageSize!);
var pageSizes = new List<int>();
if (Model.ShowPageSize)
{
// Build a dynamic list of page sizes.
// Fixed steps as a starting point.
int[] fixedSteps = { 10, 25, 50, 75, 100, 125, 150, 200, 250, 500, 1000 };
// Add only those fixed steps that are less than or equal to TotalItems.
foreach (var step in fixedSteps)
{
if (step <= Model.TotalItems)
{
pageSizes.Add(step);
}
}
// If TotalItems is greater than the largest fixed step,
// add additional steps by doubling until reaching TotalItems.
if (Model.TotalItems > fixedSteps.Last())
{
int next = fixedSteps.Last();
while (next < Model.TotalItems)
{
next *= 2;
// Only add if it doesn't exceed TotalItems.
if (next < Model.TotalItems)
{
pageSizes.Add(next);
}
}
// Always include the actual TotalItems as the maximum option.
if (!pageSizes.Contains(Model.TotalItems.Value))
{
pageSizes.Add(Model.TotalItems.Value);
}
}
}
}
@if (totalPages > 1)
{
<div class="@Model.CssClass flex items-center justify-center" id="pager-container">
@if (Model.ShowPageSize)
{
var pagerId = Model.PagerId;
var htmxAttributes = Model.UseHtmx
? $"hx-get=\"{Model.LinkUrl}\" hx-trigger=\"change\" hx-include=\"#{pagerId} [name='page'], #{pagerId} [name='search']\" hx-push-url=\"true\""
: "";
<!-- Preserve current page -->
<input type="hidden" name="page" value="@Model.Page"/>
<input type="hidden" name="search" value="@Model.SearchTerm"/>
<input type="hidden" class="useHtmx" value="@Model.UseHtmx.ToString().ToLowerInvariant()"/>
if (!Model.UseHtmx)
{
<input type="hidden" class="linkUrl" value="@Model.LinkUrl"/>
}
<!-- Page size select with label -->
<div class="flex items-center mr-8">
<label for="pageSize-@pagerId" class="text-sm text-gray-600 mr-2">Page size:</label>
<select id="pageSize-@pagerId"
name="pageSize"
class="border rounded select select-primary select-sm pt-0 mt-0 min-w-[80px] pr-4"
@Html.Raw(htmxAttributes)>
@foreach (var option in pageSizes.ToList())
{
var optionString = option.ToString();
if (option == Model.PageSize)
{
<option value="@optionString" selected="selected">@optionString</option>
}
else
{
<option value="@optionString">@optionString</option>
}
}
</select>
</div>
}
@* "First" page link *@
@if (Model.FirstLastNavigation && Model.Page > 1)
{
var href = $"{Model.LinkUrl}?page=1&pageSize={Model.PageSize}";
if (!string.IsNullOrEmpty(Model.SearchTerm))
{
href += $"&search={Model.SearchTerm}";
}
<a class="btn btn-sm"
href="@href">
@Model.FirstPageText
</a>
}
@* "Previous" page link *@
@if (Model.Page > 1)
{
var href = $"{Model.LinkUrl}?page={Model.Page - 1}&pageSize={Model.PageSize}";
if (!string.IsNullOrEmpty(Model.SearchTerm))
{
href += $"&search={Model.SearchTerm}";
}
<a class="btn btn-sm"
href="@href">
@Model.PreviousPageText
</a>
}
@* Optional skip back indicator *@
@if (Model.SkipForwardBackNavigation && Model.Page > Model.PagesToDisplay)
{
<a class="btn btn-sm btn-disabled">
@Model.SkipBackText
</a>
}
@* Determine visible page range *@
@{
int halfDisplay = Model.PagesToDisplay / 2;
int startPage = Math.Max(1, Model.Page.Value - halfDisplay);
int endPage = Math.Min(totalPages, startPage + Model.PagesToDisplay - 1);
startPage = Math.Max(1, endPage - Model.PagesToDisplay + 1);
}
@for (int i = startPage; i <= endPage; i++)
{
var href = $"{Model.LinkUrl}?page={i}&pageSize={Model.PageSize}";
if (!string.IsNullOrEmpty(Model.SearchTerm))
{
href += $"&search={Model.SearchTerm}";
}
<a data-page="@i" class="btn btn-sm mr-2 @(i == Model.Page ? "btn-active" : "")"
href="@href">
@i
</a>
}
@* Optional skip forward indicator *@
@if (Model.SkipForwardBackNavigation && Model.Page < totalPages - Model.PagesToDisplay + 1)
{
<a class="btn btn-sm btn-disabled mr-2">
@Model.SkipForwardText
</a>
}
@* "Next" page link *@
@if (Model.Page < totalPages)
{
var href = $"{Model.LinkUrl}?page={Model.Page + 1}&pageSize={Model.PageSize}";
if (!string.IsNullOrEmpty(Model.SearchTerm))
{
href += $"&search={Model.SearchTerm}";
}
<a class="btn btn-sm mr-2"
href="@href"
aria-label="@Model.NextPageAriaLabel">
@Model.NextPageText
</a>
}
@* "Last" page link *@
@if (Model.FirstLastNavigation && Model.Page < totalPages)
{
var href = $"{Model.LinkUrl}?page={totalPages}&pageSize={Model.PageSize}";
if (!string.IsNullOrEmpty(Model.SearchTerm))
{
href += $"&search={Model.SearchTerm}";
}
<a class="btn btn-sm"
href="@href">
@Model.LastPageText
</a>
}
<!-- Page info text with left margin for separation -->
<div class="text-sm text-neutral-500 ml-8">
Page @Model.Page of @totalPages (Total items: @Model.TotalItems)
</div>
</div>
}
एक बात जो मैं मूल टैग मदद से लापता था एक पृष्ठ आकार ड्रॉप था.
यह एक सादा चयन सूची है, आप देख सकते हैं कि मैं पहली बार प्रारंभ से बाहर हूँ fixedSteps जो सिर्फ कुछ निश्चित कदम हैं मैं ड्रॉप नीचे के लिए उपयोग करना चाहते हैं. तब मैं इन माध्यम से लूप और सूची में उन्हें जोड़ें. एक आदत जो मैं हमेशा से एक 'सभी' विकल्प हो रही है तो मैं कुल वस्तुओं को सूची में जोड़ता हूँ यदि यह पहले से ही नहीं है.
@{
var totalPages = (int)Math.Ceiling((double)Model.TotalItems! / (double)Model.PageSize!);
var pageSizes = new List<int>();
if (Model.ShowPageSize)
{
// Build a dynamic list of page sizes.
// Fixed steps as a starting point.
int[] fixedSteps = { 10, 25, 50, 75, 100, 125, 150, 200, 250, 500, 1000 };
// Add only those fixed steps that are less than or equal to TotalItems.
foreach (var step in fixedSteps)
{
if (step <= Model.TotalItems)
{
pageSizes.Add(step);
}
}
// If TotalItems is greater than the largest fixed step,
// add additional steps by doubling until reaching TotalItems.
if (Model.TotalItems > fixedSteps.Last())
{
int next = fixedSteps.Last();
while (next < Model.TotalItems)
{
next *= 2;
// Only add if it doesn't exceed TotalItems.
if (next < Model.TotalItems)
{
pageSizes.Add(next);
}
}
// Always include the actual TotalItems as the maximum option.
if (!pageSizes.Contains(Model.TotalItems.Value))
{
pageSizes.Add(Model.TotalItems.Value);
}
}
}
}
फिर मैं इसे पृष्ठ को दिया जाता है
@if (Model.ShowPageSize)
{
var pagerId = Model.PagerId;
var htmxAttributes = Model.UseHtmx
? $"hx-get=\"{Model.LinkUrl}\" hx-trigger=\"change\" hx-include=\"#{pagerId} [name='page'], #{pagerId} [name='search']\" hx-push-url=\"true\""
: "";
<!-- Preserve current page -->
<input type="hidden" name="page" value="@Model.Page"/>
<input type="hidden" name="search" value="@Model.SearchTerm"/>
<input type="hidden" class="useHtmx" value="@Model.UseHtmx.ToString().ToLowerInvariant()"/>
if (!Model.UseHtmx)
{
<input type="hidden" class="linkUrl" value="@Model.LinkUrl"/>
}
<!-- Page size select with label -->
<div class="flex items-center mr-8">
<label for="pageSize-@pagerId" class="text-sm text-gray-600 mr-2">Page size:</label>
<select id="pageSize-@pagerId"
name="pageSize"
class="border rounded select select-primary select-sm pt-0 mt-0 min-w-[80px] pr-4"
@Html.Raw(htmxAttributes)>
@foreach (var option in pageSizes.ToList())
{
var optionString = option.ToString();
if (option == Model.PageSize)
{
<option value="@optionString" selected="selected">@optionString</option>
}
else
{
<option value="@optionString">@optionString</option>
}
}
</select>
</div>
}
आप देख सकते हैं कि कुछ HMSX गुणों का उपयोग पृष्ठ आकार सर्वर पर जाने के लिए वैकल्पिक रूप से करते हैं तथा पृष्ठ को अद्यतन करते हुए मौजूदा पृष्ठ और खोज पैरामीटर (यदि कोई भी हो).
यदि आप बिजली- गिरना चाहते हैं तो इसके अतिरिक्त use-htmx=false टैग मदद के रूप में पैरामीटर के रूप में यह आउटपुट नहीं होगा बल्कि इसके बजाय आप कुछ विकल्प का उपयोग करने की अनुमति देंगे जैसे कि मैं पृष्ठ आकार अद्यतन करने के लिए एक एचटीएमएल सहायक के रूप में प्रदान करता हूँ.
@Html.PageSizeOnchangeSnippet()
यह एक सादा स्क्रिप्ट है जो पृष्ठ आकार का अद्यतन करेगा और पृष्ठ को पुनः लोड करेगा (यह अभी तक सादा सीएसएस / बूटी के लिए काम नहीं करता है क्योंकि मैं संपत्ति नाम से बाहर काम करने की जरूरत है).
document.addEventListener("DOMContentLoaded", function () {
document.body.addEventListener("change", function (event) {
const selectElement = event.target.closest("#pager-container select[name='pageSize']");
if (!selectElement) return;
const pagerContainer = selectElement.closest("#pager-container");
const useHtmxInput = pagerContainer.querySelector("input.useHtmx");
const useHtmx = useHtmxInput ? useHtmxInput.value === "true" : true; // default to true
if (!useHtmx) {
const pageInput = pagerContainer.querySelector("[name='page']");
const searchInput = pagerContainer.querySelector("[name='search']");
const page = pageInput ? pageInput.value : "1";
const search = searchInput ? searchInput.value : "";
const pageSize = selectElement.value;
const linkUrl = pagerContainer.querySelector("input.linkUrl").value ?? "";
const url = new URL(linkUrl, window.location.origin);
url.searchParams.set("page", page);
url.searchParams.set("pageSize", pageSize);
if (search) {
url.searchParams.set("search", search);
}
window.location.href = url.toString();
}
});
});
HMAXीकरण बहुत सरल है चूंकि HMMX तत्वों को नियंत्रित करता है हम जनक तत्व पर HMAX पैरामीटर्स परिभाषित कर सकते हैं और वे विरासत में प्राप्त किया जाएगा.
hx-boost="true" - यह nyyy प्रयोग करता है hx-बोस गुण क्लिक घटना को अलग करने के लिए तथा HMMX के जरिए निवेदन भेजें.यह बहुत सरल है और गुलगुआई का उपयोग करता है, बॉक्सियो और टिला का उपयोग एक साधारण लोड करने के लिए.
<div id="loading-modal" class="modal htmx-indicator">
<div class="modal-box flex flex-col items-center justify-center">
<h2 class="text-lg font-semibold">Loading...</h2>
<i class="bx bx-loader bx-spin text-3xl mt-2"></i>
</div>
</div>
hx-इन्डर=" # smit-mol" तो निर्दिष्ट करता है कि जब कोई HMLX निवेदन किया जाता है तो यह sclud दिखाया जाता है।
तो यह है कि भाग 1, स्पष्ट रूप से एक और अधिक कवर करने के लिए है और भविष्य के लेखों में मैं करेंगे; उदाहरण साइट, वैकल्पिक दृष्टिकोण, खोज कार्य और कस्टम सीएसएस शामिल है.