परिचय

इसलिए जब तक मैं शुरू में बनाया एक प्रोजेक्ट बनाने के लिए के लिए सक्षम टैग मदद मैं भी एक दूसरे की जरूरत है. HtMX समर्थन के साथ दिए गए परिणामों के लिए छंटाई कार्यशीलता बनाने का एक तरीका.

तो... मैं आप के लिए तैयार हूँ पलटा हुआ तालिका हेडर टैग सहायक बात। यह सिर्फ एक त्वरित लेख है कोड के एक परीक्षण के साथ. आप हमेशा देख सकते हैं यहाँ नमूने___ और स्रोत कोड जैसे कभी यहाँ है.

मैं बहुत भयानक निर्माण उदाहरण हूँ (यह सच है) लेकिन मैं और अधिक जोड़ने की कोशिश करेंगे के रूप में मैं साथ जाना. संस्थापित करने के लिए:

dotnet add package mostlylucid.pagingtaghelper

पलटें टैग सहायक

तो यह बात क्या है? छोटे में यह एक तालिका शीर्षक तैयार करने का तरीका है (या कहीं और) जो आपको परिणामों की तालिका बनाने की अनुमति देगा.

यह आसान है (और HMMX एकीकरण के बिना) आप यह करते हैं.

    <sortable-header column="@nameof(FakeDataModel.CompanyCity)"
                             current-order-by="@Model.OrderBy"
                             descending="@Model.Descending"
                             controller="Home"
                             use-htmx="false"
                             action="PageSortTagHelperNoHtmx"
                       >@Html.DisplayNameFor(x => x.Data.First().CompanyCity)
</sortable-header>

यहाँ पर आप स्तम्भ नाम उल्लेखित कर सकते हैं, शीर्ष तथा पीछे पोस्ट के लिए एक स्थान (धन्यवाद) JtBESERSERS. मैं कई अन्य बातों के बीच, जो मैंने मुश्किल से scutio और कार्य नाम के लिए दिया है.

यह एक लिंक तैयार करेगा जो बाद में पोस्ट करेगा PageSortTagHelperNoHtmx क्रिया Home स्तम्भ नाम तथा मौजूदा तरह के अनुक्रम तथा यूआरएल में कोई अन्य पैरामीटर नियंत्रण के साथ नियंत्रण (संपार होते हैं) auto-append-querystring गुण. यह आपको आसान से एक उपयोगी पोस्टल लिंक मिलता है, आप नीचे देखेंगे मैं इसे बहुत ही नरम बना दिया है जहाँ आप hont / क्रिया निर्दिष्ट कर सकते हैं और क्वैरी पैरामीटरों के साथ एक लिंक प्राप्त करें.

    private void AddQueryStringParameters(TagHelperOutput output, bool newDescending)
    {
        string? href = "";

        // If Controller and Action are provided, generate URL dynamically
        if (!string.IsNullOrEmpty(Controller) && !string.IsNullOrEmpty(Action))
        {
            href = Url.ActionLink(Action, Controller);
          
        }
        else if (output.Attributes.ContainsName("href")) // If href is manually set, use it
        {
            href = output.Attributes["href"].Value?.ToString() ?? "";
        }
        if(string.IsNullOrEmpty(href)) throw new ArgumentException("No href was provided or could be generated");
        
        // If AutoAppend is false or href is still empty, don't modify anything
        if (!AutoAppend && !string.IsNullOrWhiteSpace(href))
        {
            output.Attributes.RemoveAll("href");
            output.Attributes.SetAttribute("href", href);
            return;
        }

        // Parse the existing URL to append query parameters
        var queryStringBuilder = QueryString.Empty
            .Add("orderBy", Column)
            .Add("descending", newDescending.ToString().ToLowerInvariant());

        // Preserve existing query parameters from the current request
        foreach (var key in ViewContext.HttpContext.Request.Query.Keys)
        {
            var keyLower = key.ToLowerInvariant();
            if (keyLower != "orderby" && keyLower != "descending") // Avoid duplicating orderBy params
            {
             queryStringBuilder=   queryStringBuilder.Add(key, ViewContext.HttpContext.Request.Query[key]!);
            }
        }
href+= queryStringBuilder.ToString();
        
        // Remove old href and set the new one with the appended parameters
        output.Attributes.RemoveAll("href");
        output.Attributes.SetAttribute("href", href);
    }

यह वह विधि है जो क्वैरी वाक्यांश पैरामीटरों को यूआरएल में जोड़ता है. यह बहुत सरल है, यह एक यूआरएल बनाता है पर आधारित Controller और Action गुण या यदि आपने सेट किया है href गुण यह उपयोग करेगा. यदि आप नियत कर चुके हैं AutoAppend इसे गलत करने के लिए सिर्फ इस्तेमाल किया जाएगा href गुण जैसा है वैसा ही आप विशेष उपयोग के लिए अपने स्वयं को रोल कर सकते हैं.

दीवाना कॉन्फ़िग

इसे उतने ही उपयोगी बनाने के लिए HMMX के बिना. / के साथ / clawowowowhim और 'मैं आप संपत्ति के एक nUNCH का उपयोग करने के लिए इस तुलनात्मक रूप से सरल नियंत्रण को कॉन्फ़िगर करने के लिए आप का उपयोग करने के लिए दे दिया है

    [HtmlAttributeName("hx-controller")]
    [AspMvcController] // Enables IntelliSense for controller names
    public string? HXController { get; set; }

    [HtmlAttributeName("hx-action")]
    [AspMvcAction] // Enables IntelliSense for action names
    public string? HXAction { get; set; }
    
    
    [HtmlAttributeName("action")]
    [AspMvcAction]
    public string? Action { get; set; }
    
    [HtmlAttributeName("controller")]
    [AspMvcController]
    public string? Controller { get; set; }
    
    [ViewContext]
    [HtmlAttributeNotBound]
    public ViewContext ViewContext { get; set; }
    /// <summary>
    /// The column to sort by
    /// </summary>

    [HtmlAttributeName("column")] public string Column { get; set; } = string.Empty;

    /// <summary>
    /// Whether to auto-append any query string parameters
    /// </summary>

    [HtmlAttributeName("auto-append-querystring")] public bool AutoAppend { get; set; } = true;
    
    // <summary>
    /// Whether to use htmx ; specifcally used to set hx-vals
    /// </summary>

    [HtmlAttributeName("use-htmx")] public bool UseHtmx { get; set; } = true;

    /// <summary>
    /// The currently set order by column
    /// </summary>

    [HtmlAttributeName("current-order-by")]
    public string? CurrentOrderBy { get; set; }

    /// <summary>
    /// Sort direction, true for descending, false for ascending
    /// </summary>

    [HtmlAttributeName("descending")] public bool Descending { get; set; }

    
    /// <summary>
    ///  CSS class for the chevron up icon
    /// </summary>

    [HtmlAttributeName("chevron-up-class")]
    public string? ChevronUpClass { get; set; }
    
    /// <summary>
    ///  CSS class for the chevron down icon
    /// </summary>


    [HtmlAttributeName("chevron-down-class")]
    public string? ChevronDownClass { get; set; }
    
    /// <summary>
    /// The CSS class for the chevron when unsorted
    /// </summary>

    
    [HtmlAttributeName("chevron-unsorted-class")]
    public string? ChevronUnsortedClass { get; set; }

    /// <summary>
    /// The CSS class to use for the tag.
    /// </summary>

    [HtmlAttributeName("tag-class")] public string? TagClass { get; set; }

आप यहाँ देख सकते हैं मैं नियंत्रण में सब कुछ के लिए संपत्ति है (मैं उनके माध्यम से नहीं जा रहा हूँ उन सभी के माध्यम से जाने के लिए जा रहा हूँ वे बहुत आत्मीय होना चाहिए).

एचएमएमएक्स के साथ

अब आप शायद सीखा हो कि मैं एक HMMAX NMMMMMMMMMMAT के रूप में हूँ ताकि सामान्य रूप से इस HMMX काफी समुद्री समर्थन करता है: यह बात सुनकर हमें कैसा लगता है? use-htmx सच जो प्रविष्टि में भरा है hx-vals गुण. इस के साथ मैं इस्तेमाल एचएसएमएक्स टैग सहायक कोड को सरल के रूप में संभव बनाने के लिए.

            <sortable-header column="Name"
                             current-order-by="@Model.OrderBy"
                             descending="@Model.Descending"
                             hx-get
                             hx-route-pagesize="@Model.PageSize"
                             hx-route-page="@Model.Page"
                             hx-route-search="@Model.SearchTerm"
                             hx-controller="Home"
                             hx-action="PageSortTagHelper"
                             hx-indicator="#loading-modal"
                             hx-target="#list"
                             hx-push-url="true">@Html.DisplayNameFor(x => x.Data.First().Name)
            </sortable-header>

और अच्छी तरह से यह सिर्फ असली है कार्य HMAX समुद्री डाकू के साथ।

एमवीसी नियंत्रक

मैं फिर इसे एक सरल MVC नियंत्रक के लिए पोस्ट जो कुछ नमूना डाटा बनाता है:

    [Route("PageSortTagHelper")]
    public async Task<IActionResult> PageSortTagHelper(string? search, int pageSize = 10, int page = 1, string? orderBy = "", bool descending = false)
    {
        var pagingModel = await SortResults(search, pageSize, page, orderBy, descending);

        if (Request.IsHtmxBoosted() || Request.IsHtmx())
        {
            return PartialView("_PageSortTagHelper", pagingModel);
        }
        return View("PageSortTagHelper", pagingModel);
    }
    
     private async Task<OrderedPagingViewModel> SortResults(string? search, int pageSize, int page, string? orderBy, bool descending)
    {
        search = search?.Trim().ToLowerInvariant();
        var fakeModel = await dataFakerService.GenerateData(1000);
        var results = new List<FakeDataModel>();

        if (!string.IsNullOrEmpty(search))
            results = fakeModel.Where(x => x.Name.ToLowerInvariant().Contains(search)
                                           || x.Description.ToLowerInvariant().Contains(search) ||
                                           x.CompanyAddress.ToLowerInvariant().Contains(search)
                                           || x.CompanyEmail.ToLowerInvariant().Contains(search)
                                           || x.CompanyCity.ToLowerInvariant().Contains(search)
                                           || x.CompanyCountry.ToLowerInvariant().Contains(search)
                                           || x.CompanyPhone.ToLowerInvariant().Contains(search)).ToList();
        else
        {
            results = fakeModel.ToList();
        }

        if (!string.IsNullOrWhiteSpace(orderBy))
        {
            results = results.OrderByField(orderBy, descending).ToList();
        }

        var pagingModel = new OrderedPagingViewModel();
        pagingModel.TotalItems = results.Count();
        pagingModel.Page = page;
        pagingModel.SearchTerm = search;
        pagingModel.PageSize = pageSize;
        pagingModel.Data = results.Skip((page - 1) * pageSize).Take(pageSize).ToList();
        pagingModel.OrderBy = orderBy;
        pagingModel.Descending = descending;
        return pagingModel;
    }

वह OrderByField विस्तार विधि

ओह और मेरे पास एक छोटा सा विस्तार विधि पैकेज है जिसमें डाटा (या या) के लिए नाम दिए गए क्षेत्र पर लागू होता है IQueryable हा॰ मीम॰ सारा विस्तार विधि नीचे है. आप इसे 3 तरीकों से देख सकते हैं, एक मजबूत स्तम्भ नामों के लिए, एक मैंQuery

using System.Linq.Expressions;
using System.Reflection;

namespace mostlylucid.pagingtaghelper.Extensions;

public static class QueryableExtensions
{
    public static IQueryable<T> OrderByField<T, TKey>(
        this IQueryable<T> source,
        Expression<Func<T, TKey>> keySelector,
        bool descending = false)
    {
        return descending ? source.OrderByDescending(keySelector) : source.OrderBy(keySelector);
    }


    public static IQueryable<T> OrderByField<T>(
        this IQueryable<T> source,
        string sortBy,
        bool descending = false)
    {
        if (string.IsNullOrWhiteSpace(sortBy))
            return source; // No sorting applied

        var property =
            typeof(T).GetProperty(sortBy, BindingFlags.IgnoreCase | BindingFlags.Public | BindingFlags.Instance);
        if (property == null)
            throw new ArgumentException($"Property '{sortBy}' not found on type '{typeof(T)}'.");

        var param = Expression.Parameter(typeof(T), "x");
        var propertyAccess = Expression.MakeMemberAccess(param, property);
        var lambda = Expression.Lambda(propertyAccess, param);

        var methodName = descending ? "OrderByDescending" : "OrderBy";

        var resultExpression = Expression.Call(
            typeof(Queryable),
            methodName,
            new[] { typeof(T), property.PropertyType },
            source.Expression,
            Expression.Quote(lambda)
        );

        return source.Provider.CreateQuery<T>(resultExpression);
    }
    
    public static IEnumerable<T> OrderByField<T>(
        this IEnumerable<T> source,
        string sortBy,
        bool descending = false)
    {
        var property = typeof(T).GetProperty(sortPropertyName(sortBy), BindingFlags.IgnoreCase | BindingFlags.Public | BindingFlags.Instance);
        if (property == null)
            throw new ArgumentException($"Property '{sortBy}' not found on type '{typeof(T)}'.");

        return descending
            ? source.OrderByDescending(x => property.GetValue(x, null))
            : source.OrderBy(x => property.GetValue(x, null));
    }

    // Helper methods for readability (optional)
    private static string sortPropertyName(string sortBy) => sortBy.Trim();
    private static string methodName(bool descending) => descending ? "OrderByDescending" : "OrderBy";
}

ऑन्टियम

वास्तव में यह है. यह सिर्फ कुछ मैं की जरूरत है तो मैं इसे एक अटक यह nuget पैकेज में एक फंस बनाया है.