परिचय

अब मैं अपने ही टैग - सहायक के साथ पृष्ठS2 को अपने आप से अलग कर चुका हूँ । यह टैग और भी पेचीदा दृश्‍य बनाने और ज़्यादा जटिल परिस्थितियों के लिए सहायक बनाने के लिए है ।

फिर इन्हें अनक़रीब ही ज़रूर मालूम हो जाएगा मैं पहले से ही हूँ 0.0 तक. 0 लिखने के समय पर लेकिन अपने ओ.एस.एस.के पर उपयोग करें. यह मुक्त है लेकिन रिलीज गुण IMHO के YEREN (मैं भी नहीं है पूरा नमूना फिर भी!

देखें यहाँ टैग सहायक के लिए कोड.

पृष्ठ आकार टैग सहायक

मेरे अन्य टैग सहायक के रूप में यह बनाया गया है एक प्रयोग के लिए मैं अकसर सामना करता हूँ, कैसे आसानी से पृष्ठ आकार परिवर्तन परिणाम सूची में स्विच करने के लिए. शुरू में यह काफी स्पष्ट प्रतीत होता है लेकिन यह TRTC हो सकता है एक बार जब आप HMTX मिश्रण में जोड़ते हैं.

आवश्यकताएँ

तो मेरे इस्तेमाल के लिए आवश्यकताएँ थीं

1. टेह डेवलपर के लिए आसान उपयोग स्वीकारें (जैसे कि संभव हो वैसा ही एक सादा पृष्ठ मॉडल का उपयोग करने के लिए कॉन्फ़िगर किया गया है)
2. HMAXX - मतलब यह पोस्ट करने में सक्षम है जब सभी क्वैरी वाक्यांश पैरामीटर रखे रहें. यह महत्वपूर्ण है क्योंकि यह उपयोक्ता को पृष्ठ आकार को बदलने देता है बिना किसी अन्य फिल्टर को नज़रअंदाज़ किए बिना.
3. पृष्ठ आकार के कुछ प्रभावशाली क्षेत्र हैं (कोई 'सभी' विकल्प को शामिल करें.)

टैग सहायक

इस बात को मन में रखते हुए मैं टैगर के रूप में आगे बढ़ने के लिए बनाया:

<page-size
    hx-target="#list"
    hx-swap="innerHTML"
    model="Model">
    
</page-size>
<div id="list">
    <partial name="_ResultsList" model="Model"/>
</div>

तो इस मामले में फिर से यह मेरे मानक paning मॉडल लेता है:

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; }
}

कौन देता है Page, TotalItems, PageSize, ViewType और LinkUrl Paning के लिए.

आप इन गुणों को मॉडल के रूप में भी उल्लेखित कर सकते हैं:

<page-size
    hx-target="#list"
    hx-swap="innerHTML"
    total-items="100"
    page-size="10"
    view-type="DaisyAndTailwind">
</page-size>

कहाँ hx-target HMAX निवेदन और के लिए लक्ष्य है hx-swap प्रतिक्रिया का लक्ष्य है.

इस मामले में यह निर्दिष्ट उपयोग करेगा PageSize और TotalItems और ViewType पृष्ठ आकार चयनक को रेंडर करने के लिए.

जेएसहेगनgrazil. kgm

दुर्भाग्य से इस बार मैं एक माँग थी...... मैं सिर्फ सर्वर पक्ष संभाल नहीं सकता. नाम के लिए मैं पृष्ठों में क्वैरी किए गए वाक्यांश पार्टीशनों को सुरक्षित रखना चाहता था. इसे प्राप्त करने के लिए मैं इनकार करनेवालों के दो टुकड़े हैं जो HMMAX पर आधारित नियंत्रण में लोड हो जाएगा

@if (Model.UseHtmx)
{
@Html.HTMXPageSizeChange()
}
else
{
    @Html.PageSizeOnchangeSnippet()
}

यदि HMAX इसका प्रयोग इस पृष्ठ में किया जा रहा है:

(() => {
    if (window.__pageSizeListenerAdded) return;

    document.addEventListener('htmx:configRequest', event => {
        const { elt } = event.detail;
        if (elt?.matches('[name="pageSize"]')) {
            const params = new URLSearchParams(window.location.search);
            params.set('pageSize', elt.value); // This will update or add the pageSize param
            event.detail.parameters = Object.fromEntries(params.entries());
        }
    });
    window.__pageSizeListenerAdded = true;
})();

यह जावास्क्रिप्ट का साधारण टुकड़ा है जो वर्तमान क्वैरी पैरामीटर को गलत साबित करेगा इस निवेदन में.

वैकल्पिक रूप से यदि HMAX सक्रिय नहीं है यह इसे रेंडर करेगा:

(function attachPageSizeListener() {
    // Ensure we only attach once if this script is included multiple times
    if (window.__pageSizeListenerAttached) return;
    window.__pageSizeListenerAttached = true;

    // Wait for the DOM to be fully loaded
    document.addEventListener("DOMContentLoaded", () => {
        document.body.addEventListener("change", handlePageSizeChange);
    });

    function handlePageSizeChange(event) {
        // Check if the changed element is a page-size <select> inside .page-size-container
        const select = event.target.closest(".page-size-container select[name='pageSize']");
        if (!select) return;

        const container = select.closest(".page-size-container");
        if (!container) return;

        // Default to "true" if there's no .useHtmx input
        const useHtmx = container.querySelector("input.useHtmx")?.value === "true";
        if (useHtmx) {
            // If using HTMX, we do nothing—HTMX will handle the request
            return;
        }

        // Either use a linkUrl from the container or the current page URL
        const linkUrl = container.querySelector("input.linkUrl")?.value || window.location.href;
        const url = new URL(linkUrl, window.location.origin);

        // Copy existing query params from current location
        const existingParams = new URLSearchParams(window.location.search);
        for (const [key, value] of existingParams.entries()) {
            url.searchParams.set(key, value);
        }

        // If user picked the same pageSize as what's already in the URL, do nothing
        if (url.searchParams.get("pageSize") === select.value) {
            return;
        }

        // Update the pageSize param
        url.searchParams.set("pageSize", select.value);

        // Redirect
        window.location.href = url.toString();
    }
})();

एक परिवर्तन मैं Loly बनाने 'Joly' चर के नाम बदल रहा हूँ; __pageSizeListenerAttached के रूप में यह एक बिट भी जेनेरिक है और मैं इसे दोनों HMAX और गैरHMX निवेदन के लिए इस्तेमाल करते हैं.

सा. यु.

टैग सहायक स्वयं बहुत सरल है, मुख्य कोड सिर्फ कुछ गुण भरता है और फिर दृश्य घटक का अनुवाद करता है.

 public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        // We want to render a <div> by default
        output.TagName = "div";

        // Remove any leftover attributes that we handle ourselves
        RemoveUnwantedAttributes(output);

        // Determine final PagerId
        var pagerId = PagerId ?? PageSizeModel?.PagerId ?? $"pager-{Guid.NewGuid():N}";
        // Assign ID to the outer div
        output.Attributes.SetAttribute("id", pagerId);
        // Build or fallback to a link URL
        var finalLinkUrl = BuildLinkUrl();
        if (string.IsNullOrEmpty(finalLinkUrl))
        {
            // If we can't build a URL, show a fallback message or short-circuit
            output.Content.SetHtmlContent(
                "<p style=\"color:red\">No valid link URL found for PageSize control.</p>");
            return;
        }

        var finalPageSize = PageSize ?? PageSizeModel?.PageSize ?? 10;
        // Clamp the page size to MaxPageSize

        var finalTotalItems = TotalItems ?? Model?.TotalItems ?? PageSizeModel?.TotalItems ?? 0;
        if (finalTotalItems == 0) throw new ArgumentNullException(nameof(finalTotalItems), "TotalItems is required");
        var maxPageSize = Math.Min(finalTotalItems, MaxPageSize);

        // Fallback to model's properties if not set
        var finalViewType = PageSizeModel?.ViewType ?? Model?.ViewType ?? ViewType;

        var pageSizeSteps = new int[] { 10, 25, 50, 75, 100, 125, 150, 200, 250, 500, 1000 };

        
        if (!string.IsNullOrEmpty(PageSizeSteps))
            pageSizeSteps = PageSizeSteps.Split(',').Select(s =>

            {
                if (int.TryParse(s, out var result))
                    return result;
                else
                {
                    throw new ArgumentException("Invalid page size step", nameof(PageSizeSteps));
                }
            }).ToArray();


        var pageSizes = CalculatePageSizes(finalTotalItems, maxPageSize, pageSizeSteps);

        var useHtmx = PageSizeModel?.UseHtmx ?? UseHtmx;
        var useLocalView = PageSizeModel?.UseLocalView ?? UseLocalView;

        // Acquire the IViewComponentHelper
        var viewComponentHelper = ViewContext.HttpContext.RequestServices
            .GetRequiredService<IViewComponentHelper>();
        ((IViewContextAware)viewComponentHelper).Contextualize(ViewContext);

        // Construct the PageSizeModel (if not provided) with final settings
        var pagerModel = new PageSizeModel
        {
            ViewType = finalViewType,
            UseLocalView = useLocalView,
            UseHtmx = useHtmx,
            PageSizes = pageSizes,
            PagerId = pagerId,
            Model = Model,
            LinkUrl = finalLinkUrl,
            MaxPageSize = maxPageSize,
            PageSize = finalPageSize,
            TotalItems = finalTotalItems
        };

        // Safely invoke the "PageSize" view component
        try
        {
            var result = await viewComponentHelper.InvokeAsync("PageSize", pagerModel);
            output.Content.SetHtmlContent(result);
        }
        catch (Exception ex)
        {
            // Optional: Log or display an error
            output.Content.SetHtmlContent(
                $"<p class=\"text-red-500\">Failed to render PageSize component: {ex.Message}</p>"
            );
        }
    }

एक चाली टुकड़ा सही तरीके से काम कर रहा है PageSizeSteps गुण. यह एक अल्पविराम से अलग किए गए पृष्ठ आकार की सूची है जिसे उपयोक्ता चुन सकते हैं. या फिर आप अपने कदमों में आगे बढ़ सकते हैं. आप इस अधिकतम पृष्ठ आकार को भी निर्दिष्ट कर सकते हैं जो चुना जा सकता है.

    private List<int> CalculatePageSizes(int totalItems, int maxxPageSize, int[] pageSizeSteps)
    {
        var pageSizes = new List<int>();

        // 1. Include all fixed steps up to both TotalItems and MaxPageSize
        foreach (var step in pageSizeSteps)
        {
            if (step <= totalItems && step <= maxxPageSize)
                pageSizes.Add(step);
        }

        // 2. If TotalItems exceeds the largest fixed step, keep doubling
        int lastFixedStep = pageSizeSteps.Last();
        if (totalItems > lastFixedStep)
        {
            int next = lastFixedStep;
            while (next < totalItems && next < maxxPageSize)
            {
                next *= 2; // double the step
                if (next <= totalItems && next <= maxxPageSize)
                {
                    pageSizes.Add(next);
                }
            }
        }

        // 3. Include TotalItems if it's not already in the list
        if (totalItems <= maxxPageSize && !pageSizes.Contains(totalItems))
        {
            pageSizes.Add(totalItems);
        }

        pageSizes.Sort();

        return pageSizes;
    }

मेरे अन्य टैग मदद के साथ के रूप में मैं टैग मदद करने के लिए इस्तेमाल करता हूँ - दृश्य घटक को देने के लिए कोर पैटर्न. यह मुझे टैग मदद आसान और दृश्य घटक जटिल रखने देता है. यह आपको भिन्‍न अनुभवों के लिए दृष्टिकोण बदलने की भी अनुमति देता है; या स्वयं अपने दृष्टिकोण को अनदेखा करने और उसका उपयोग करने के लिए भी । use-local-view).

public class PageSizeViewComponent : ViewComponent
    {
        public IViewComponentResult Invoke(PageSizeModel model)
        {
            if(model.Model != null)
            {
                model.LinkUrl ??= model.Model.LinkUrl;
                
                if(model.Model is IPagingSearchModel searchModel)
                {
                    model.SearchTerm ??= searchModel.SearchTerm;
                }
            }
            
            var viewName = "Components/Pager/Default";

            var useLocalView = model.UseLocalView;

            return (useLocalView, model.ViewType) switch
            {
                (true, ViewType.Custom) when ViewExists(viewName) => View(viewName, model),
                (true, ViewType.Custom) when !ViewExists(viewName) => throw new ArgumentException("View not found: " + viewName),
                (false, ViewType.Bootstrap) => View("/Areas/Components/Views/PageSize/BootstrapView.cshtml", model),
                (false, ViewType.Plain) => View("/Areas/Components/Views/PageSize/PlainView.cshtml", model),
                (false, ViewType.TailwindAndDaisy) => View("/Areas/Components/Views/PageSize/Default.cshtml", model),
                _ => View("/Areas/Components/Views/PageSize/Default.cshtml", model)
            };

            // If the view exists in the app, use it; otherwise, use the fallback RCL view
        }
        /// <summary>
        /// Checks if a view exists in the consuming application.
        /// </summary>

        private bool ViewExists(string viewName)
        {
            var result = ViewEngine.FindView(ViewContext, viewName, false);
            return result.Success;
        }
    }

ऑन्टियम

खैर कि यह पृष्ठ- आकार टैग सहायक के लिए है. मैं अभी भी दस्तावेजों और उदाहरणों पर काम कर रहा हूँ लेकिन कोड बेहतर दिन में सम्मानित हो रहा है.