Add Custom Attributes

[PaddyMacBelfast]

Hi Joe,

Excellent job with this TagHelper for Pagination. I found it very useful for paging, especially the Ajax control.

Can this be extended to add some custom attributes? e.g. data-ajax-success and data-ajax-failure
Basically, I was looking to smooth scroll to the top of the page/div when using Ajax but I need a 'data-ajax-success' attribute..

I've took a local copy down to try out..

Added to your PagerTagHelper.cs:

private const string AjaxSuccessAttributeName = "cs-ajax-success";
 private const string AjaxFailureAttributeName = "cs-ajax-failure";

 [HtmlAttributeName(AjaxSuccessAttributeName)]
 public string AjaxSuccess { get; set; } = string.Empty;

 [HtmlAttributeName(AjaxFailureAttributeName)]
 public string AjaxFailure { get; set; } = string.Empty;

then just added a simple if statement to add the attributes :

 if (AjaxTarget.Length > 0)
                {
                    a.MergeAttribute("data-ajax", "true");
                    a.MergeAttribute("data-ajax-mode", AjaxMode);
                    a.MergeAttribute("data-ajax-update", AjaxTarget);
                    if (AjaxSuccess.Length > 0)
                    {
                        a.MergeAttribute("data-ajax-success", AjaxSuccess);
                    }
                    if (AjaxFailure.Length > 0)
                    {
                        a.MergeAttribute("data-ajax-failure", AjaxFailure);
                    }
                }

Its handy to use as below:

 <cs-pager cs-paging-pagesize="@Model.PageSize"
              cs-paging-pagenumber="@Model.PageNumber"
              cs-paging-totalitems="@Model.TotalItemCount"
              cs-next-page-text="Next Page >"
              cs-previous-page-text="< Previous Page"
              cs-paging-maxpageritems="5"
              cs-pagenumber-param="page"
              cs-ajax-target="#gridcontainer"
              cs-ajax-success="scrollToListingLocation('#gridcontainer')"
              asp-controller="Home"
              asp-action="AjaxPage"
              asp-route-pagesize="@Model.PageSize"  ></cs-pager>

with the simple JS function to auto-scroll to the top of the div:

 function scrollToListingLocation(n) {
        $('html, body').animate({
            scrollTop: $(n).offset().top
        }, 1200);
    }

Is this the best way to do this?

[joeaudette]

That looks reasonable to me, if you're saying that worked for you I'm happy to make the code changes you suggest to support that in the taghelper

[joeaudette]

I have implemented the changes and published a new nuget

Thanks!

[PaddyMacBelfast]

Thanks Joe... Keep up the good work!!