Remove Query String from Auto-bound Breadcrumbs

[JeffVisibilEDI]

I am using the Breadcrumbs widget with an ASP.NET Core MVC application. I have configured it with ".BindToLocation(true)", and placed it within my main layout. This creates breadcrumbs that automatically reflect the current URL within the application. So much easier than having to designate names & URLs for each Action!

The problem is that when I include optional query string parameters into some of my Actions, the query string becomes part of the breadcrumb. This doesn't look clean at all. 

How can I remove the query string from the breadcrumbs?

[Mihaela]

Hello Jeffrey,

I would suggest modifying the Breadcrumb items text through the client-side value() method:

@(Html.Kendo().Breadcrumb()
  Name("breadcrumb")
  .Navigational(true)
  .BindToLocation(true)
)

<script>
$(document).ready(function () {
  if (window.location.search != "") { //check if the current url contains query string parameters
    var breadcrumb = $("#breadcrumb").getKendoBreadcrumb(); //Get a reference to the Breadcrumb component
    breadcrumb.value(window.location.pathname); //change its value. "window.location.pathname" returns the path and of the current page without the query string part
  }
});
</script>

Would you please give this example a try and let me know if it works as expected at your end?

 

Regards, Mihaela Progress Telerik

[JeffVisibilEDI]

Thank you, Mihaela. 

This exact snippet threw JavaScript errors. Maybe it's a jQuery UI vs ASP.NET Core versioning issue? It did point me in the right direction - I just had to find the right syntax for the API version I have in place:

 if (window.location.search !== "") {
            $("#Breadcrumbs").kendoBreadcrumb({
                value: window.location.pathname
            });
        }

This solution "works". But I really think this should be a configuration toggle - or even the default! The UI toolset is really powerful and mostly simple to customize, but most of these customizations require writing a simple, and mostly boilerplate, JavaScript function. While this is not outside the skillset of most ASP.NET developers, I would prefer to use TagHelpers or the HtmlHelper API. 

It's not a configuration switch, but I found a way to do this in my Razor _Layout Partial View (with what I removed commented out):

@(Html.Kendo().Breadcrumb()
                .Name("Breadcrumbs")
                .Value(Context.Request.Path)
                .Navigational(true)
                //        .BindToLocation(true)
                )

[Mihaela]

Hi Jeffrey,

Thank you for your feedback.

I have prepared a runnable sample that uses the latest Telerik UI for ASP.NET Core version (2023.2.606) and demonstrates the solution, where the component's value is modified through the value() method. The Breadcrumb is defined in the _Layout.cshtml file. You can find it attached to this comment.

Also, I completely agree with your suggestion to implement a built-in option that removes the query string when the BindToLocation() option is enabled. Feel free to submit your idea as a feature request in our Feedback Portal.