Menu-Item Content with Ajax.ActionLink

[Michael]

Hi,

I have a Menu and must using Templates for additional informations. Now I want use an Ajax.ActionLink in the Client-Template, but it does not work, but why? This is my current code:

@{

    var MainMenu = Html.Telerik().Menu().Name("MainMenu");

  

    foreach (var NavigationItem in Model.NavigationTree.OrderBy(Item => Item.DisplayOrder))

    {

        var Item = NavigationItem;

        MainMenu.Items(Menu => Menu.Add().Text(Item.Text).Content(@<text>

    @Ajax.ActionLink(Item.SubNavigationItems.First().Text,

                    MVC.Ajax.ActionNames.Content,

                    MVC.Ajax.Name,

                    new { IdSubCategory = Item.SubNavigationItems.First().IDSubCategory },

                    new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "content", HttpMethod = "GET" })

    @*Html.Partial(MVC.Shared.Views.SubNavigation, Item.SubNavigationItems).ToHtmlString()*@

    </text>));

}   

What I'am doing wrong?

Thank You!

[Daniel]

Hello Michael,

This could occur if you are using unobtrusive Ajax. In this case the jQuery live method is used to attach to the click event and the Menu will stop the event before it reaches the handler. Disabling the unobtrusive Ajax should resolve the problem as in this case the OnClick event is added directly to the link. Another option is to use the menu OnSelect event to handle the request with custom code. For example: 

Menu.Add().Text(Item.Text)
         .Action("Action", "Controller");

function onSelect(e) {
    var url = $(e.item).find("> a").attr('href');
    if (url){
        //prevent the navigation if the item url is specified
        // and make the request with jQuery
        e.preventDefault();
        $.ajax({
            url: url,
            success: function (result) {

            }
        })
    }
}

Regards,
Daniel
the Telerik team