December 2017 ยป Kentico MVC Quick Tip - Fix Broken Insert Link Button
Dec 26

Kentico MVC Quick Tip - Fix Broken Insert Link Button

Introduction

Last week, a developer that I work with here at BizStream came to me seeking some quick help on one of our Kentico MVC projects. When he showed me the issue, I was initially quite surprised because the thing that wasn't working, was inside of the Kentico admin interface. It had nothing to do with our custom code on the live site. The issue existed when editing content with WYSIWYG content fields, something that has always "just" worked in Kentico since the very first version. Specifically, the problem boiled down to creating links inside of the content field that targeted internal site pages using the Insert link button's dialog picker. 

The expected behavior of the Insert link button dialog would be to allow a content admin to navigate the Kentico content tree, find an internal page that the link should target, and with a simple click of the Save & Close button the CMS will generate a correct relative URL to the that page of the tree. Dead simple right?

Well in this case, no matter what page we chose in the picker on our Kentico MVC the dialog always generated the link with an href that was "~/" instead of the correct URL path to the content page. Crazy right?

 

The Problem

Below you can see the few screen shots that really illustrate the problem that we were seeing in our MVC site. Again, this was happening any time that we were either highlighting text in the field and then clicking the Insert link button in the WYWIWYG toolbar, or if we were just clicking the Insert link button without anything selected.

 

Kentico MVC Quick Tip Insert Link Button

 

After clicking the toolbar button for Insert/Edit link the dialog came up as normal, but no matter which page of the Content tree was clicked, the URL just didn't generate correctly, and was always "~/".

 

Kentico MVC Quick Tip Insert Link Button Dialog

 

Like I said, this was totally not normal behavior and it was a real head scratcher. 

 

Solving the Issue

When I run into an issue like this with Kentico MVC one of the first things that I do is bounce it off against an installation of the fantastic Kentico MVC development starter site that Kentico has published over on Github. Side note, if you are trying to get into Kentico development and don't have this project installed to serve as a guide, you are doing it wrong.

Sure enough, when using that project that launches a Dancing Goat starter site, the issue did not exist. Every time I wanted to create a link in that project, the system correctly generated the URL path to any page in the tree. So at least at this point I had narrowed down that it was something to do with our project and not Kentico. Since we were dealing with pages my next logical troubleshooting step was to take a look at the page types, because again, it was the only difference I could think of from our project to the Dancing Goat starter site. 

Now, one of the important differences that exists in Kentico MVC world, when compared to Kentico Portal Engine world, is that you use Content Only page types in MVC (something that doesn't really get used in the portal engine). Even If you have a lot of experience creating page types in Kentico, as we do here at BizStream, there is one property that is easily missed, and that is the URL Pattern property. Sure enough in the Dancing Goat starter site this property is filled in by default on the various content only types, but in our project this field was empty for our page types. That was a pretty big clue as to what was causing the issue for me.

 

Kentico MVC Content Only Page Type URL Pattern

 

And in the Dancing Goat site:

 

Kentico MVC Dancing Goat URL Pattern

 

 

Feature Request Kentico! On the New Page Type Wizard, you know we are generating a Content only page type via the checkbox on step 2 of the wizard. Ask us to fill in the URL Pattern if that box is checked!

 

Taking the hint, we went back to our solution and we simply added in the {% NodeAliasPath %} macro into the field as the URL pattern value. Since we actually didn't want to have the document's culture in the URL. Once we correctly entered in a URL pattern, everything started working great. To be clear, you should set this value to what matches the routing in your Kentico MVC site.

 

Kentico MVC Content Only Page Type URL Pattern Fixed

 

After saving the page type, navigating back to the Pages application and trying to create another link the URL path correctly was there:

 

Kentico MVC Quick Tip Insert Link Button Dialog Fixed

 

Conclusion

As you can see, sometimes it is the little things that get you. I did go back into both Kentico 10 and Kentico 9 to verify the same behavior, and indeed it does behave the same way in those versions as well. Honestly, we were working in K10 on this project, but I decided to use K11 for the screen shots.

 

Pro Tip: If you are looking for more Kentico MVC tips check out my post on 8 Things Developers Should Know about Kentico MVC  

 

I do think that I might go post my feature request over on ideas.Kentico.com to let the product team know about the small tweak to the New Page Type Wizard that could help us MVC developers out. If you got through reading this far, click on over to it and vote for the idea now!

Happy Holidays!

 

You might also be interested in

[X]

Be the first to know about my latest Kentico Tips & Tricks!

Do not show again