[Solved] javascript: URL doesn't work

[Makoto]

I am using the BindTo() method to bind a collection to a menu, and one of the Urls that I set is a javascript style link (javascript:DoSomething() ).  When I pass in a string like this, the menu item doesn't appear at all.  If I pass in a relative or absolute URL it will work fine.  I need to be able to have a javascript link.   Below is the code that I'm using:

 Html.Telerik().Menu().Name("MainMenu").BindTo(menuItems, mappings =>
              {
                  mappings.For<MenuContainer>(binding => binding
                      .ItemDataBound((item, parent) =>
                          {
                              item.Text = parent.Text;
                              if (!string.IsNullOrEmpty(parent.Link))
                              {
                                  item.Url = parent.Link;
                              }
                          })
                          .Children(children => children.MenuItems));
                  mappings.For<Sc.Neo.Portal.ViewModel.MenuItem>(binding => binding
                      .ItemDataBound((item, child) =>
                          {
                              item.Text = child.Text;
                              item.Url = child.Link;
                          }));
              }
          ).Render();

In this case, child.Link will have the value "javascript:alertDialog.show();", but the menu item doesn't appear at all with this value.

It appears to be a problem with the code in the Telerik MVC dll since when viewing the HTML markup produced, it doesn't even render it. 

[Makoto]

In the meantime, I was able to come up with a workaround.

I have to keep the javascript: link since we also still use that in some other menus that haven't been converted over to Teleriks yet.  I must say that the Menu's ability to Bind to a custom collection really made it easy to convert the menu to work with out existing code.

So here's what I ended up doing:

Html.Telerik().Menu().Name("MainMenu").BindTo(menuItems, mappings =>
              {
                  mappings.For<MenuContainer>(binding => binding
                      .ItemDataBound((item, parent) =>
                          {
                              item.Text = parent.Text;
                              if (!string.IsNullOrEmpty(parent.Link))
                              {
                                  item.Url = parent.Link;
                              }
                          })
                          .Children(children => children.MenuItems));
                  mappings.For<Sc.Neo.Portal.ViewModel.MenuItem>(binding => binding
                      .ItemDataBound((item, child) =>
                          {
                              item.Text = child.Text;
                              if (child.Link.Contains("javascript:"))
                              {
                                  item.HtmlAttributes.Add("onclick", child.Link.Replace("javascript:", string.Empty));
                              }
                              else
                              {
                                item.Url = child.Link;
                              }
                          }));
              }
          ).Render();

So essentially, it checks if the URL has "javascript:" in it, and if it does, I don't set the URL, instead, I add a "onclick" handler on the text, which will then call the JavaScript method.  Since I'm not using it as a javascript: URL, I need to strip out the "javascript:" text, which is what the Replace does.

[Georgi Krustev]

Hello Makoto,

We decide to remove the check for the accessible URLs. Thus you are able to set any value to the URL of the navigable item. The improvement will be included in the next official release of the Telerik Components for ASP.NET MVC.

For now you can patch the code in order to achieve the aforementioned functionality:

public bool IsAccessibleToUser(RequestContext requestContext, INavigatable navigationItem)
{
    Guard.IsNotNull(requestContext, "requestContext");
    Guard.IsNotNull(navigationItem, "navigationItem");

    bool isAllowed = true;

    if (!string.IsNullOrEmpty(navigationItem.RouteName))
    {
        isAllowed = controllerAuthorization.IsAccessibleToUser(requestContext, navigationItem.RouteName);
    }
    else if (!string.IsNullOrEmpty(navigationItem.ControllerName) && !string.IsNullOrEmpty(navigationItem.ActionName))
    {
        isAllowed = controllerAuthorization.IsAccessibleToUser(requestContext, navigationItem.ControllerName, navigationItem.ActionName);
    }

    return isAllowed;
}

Replace IsAccessibleToUser method in the NavigationItemAuthorization.cs with the code above. You probably noticed that the only difference is the missing check for the URL. The file is placed in the Telerik.Web.Mvc\Infrastructure\Implementation folder.

Regards,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.