[Solved] Getting to the URL Property of the menu item

[Reid]

Hello,

I have followed a couple of threads and demos for the MVC menu component.  I have in place the starting of what is needed, which is to load the menu structure from the database.  I used a demo project that a Telerik rep uploaded to the forum that uses a MenuModelIndex class, a MenuModel class and a MenuModelitem class.  As mentioned it is starting to work. 

My question is how to get to the item's URL property on the client side.  The "onSelect()" JavaScript that I have is hooking the click event and with this :  

alert('Clicked : ' + item.find('> .t-link').text());

I can show the item's text. The MenuItemModel class has the URL property and I need to call a Controller action here to navigate to that URL. An alternative is to redirect using JavaScript but I would prefer to call the Controller action.

Does anyone have any example code of how to do this? 

I appreciate it.

Thanks,

Reid

[Dimo]

Hello Reid,

I did not understand why you need Javascript to navigate to a specific URL, instead of leaving the browser do its job. Anyway, you can get the URL like this:

function onSelect(e) {
    alert($(e.item).find(".t-link").attr("href"));
}

Greetings,
Dimo
the Telerik team

[Reid]

Hi Dimo,

Thank you for responding.

I am relatively new to MVC so forgive my lack of knowledge here.  Because there is no CodeBehind I do not see how the menu item when clicked reacts.  I can assume Telerik is firing JS behind the scenes.

I am working with making it database driven as well as a prototype project that I d/ld from this site as mentioned.  The prototype loads the menu statically. In that prototype demo I amended the code to satisfy the Url property.  Yet when I click on a menu item it always returns to the home page, even though the Url was set to "/Contact" for instance.  When hovered over it shows nothing in the statusbar but the root localhost.

I attached a screenshot of the debugger viewing the model object being passed to the View to give you some more perspective.  It seems right to me.  In this static demo right now the top level menu items are not showing their text but do have their children in the drop down.

Here is the static method building the menu items for demonstration:

public static MenuIndexModel DemoMenuModel()
        {
            MenuIndexModel model = new MenuIndexModel();
            model.MenuModel = new List<MenuModel>();
            for (int i = 0; i < 3; i++)
            {
                MenuModel m = new MenuModel() { Text = String.Format("Menu {0}", i), Url="/Contact" };
                for (int j = 0; j < 3; j++)
                    m.Items.Add(new MenuItemModel() { Text = String.Format("Menu {0}-{1}", i, j), Url = "/Contact" });
                model.MenuModel.Add(m);
            }

            return model;
        }

I added the same Url, "/Contact" to each item.

Here is the aspx View markup:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MyDomain.MVC.Models.MenuIndexModel>" %>


<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>


<%@ Import Namespace="MyDomain.MVC.Common" %>
<%@ Import Namespace="MyDomain.MVC.Models" %>
<%@ Import Namespace="MyDomain.MVC.Controllers" %>
<%@ Import Namespace="Telerik.Web.Mvc" %>
<%@ Import Namespace="Telerik.Web.Mvc.UI" %>

    <script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/modernizr-1.7.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.unobtrusive.min.js") %>" type="text/javascript"></script>


    <script type="text/javascript">
        function onSelect(e) {
            var item = $(e.item);
           // alert('Clicked : ' + item.find('> .t-link').text());
          //  alert('URL : ' + item.find('> .t-link').url);
           // alert(item.text);
            // $console.log('OnSelect :: ' + item.find('> .t-link').text());
            // alert($(e.item).find(".t-link").attr("href"));
        }

        function onClose(e) {
            var item = $(e.item);
           // $console.log('OnClose :: ' + item.find('> .t-link').text());
        }

        function onOpen(e) {
            var item = $(e.item);
          //  $console.log('OnOpen :: ' + item.find('> .t-link').text());
        }

        function onLoad(e) {
           // $console.log('Menu loaded');
        }
    </script>




<%= Html.Telerik().Menu()
        .Name("Menu")
        //.ClientEvents(events => events
        //            .OnLoad("onLoad")
        //            .OnSelect("onSelect")
        //            .OnOpen("onOpen")
        //            .OnClose("onClose")

            .ClientEvents(events =>
                {
                    events.OnLoad("onLoad");
                    events.OnSelect("onSelect");
                    events.OnOpen("onOpen");
                    events.OnClose("onClose");
                })
        // .HtmlAttributes(new { style = "width: 110px" })
                 .BindTo(Model.MenuModel, mappings =>
                {
                    mappings.For<MenuModel>(binding => binding
                             .ItemDataBound((obj, menu) =>
                             {
                                 //obj.Text = menu.Text;
                                 //obj.Url = menu.DestinationURL;
                             })

                             .Children(menu => menu.Items));
                                mappings.For<MenuItemModel>(binding => binding
                                .ItemDataBound((obj, menuitem) =>
                                {
                                    obj.Text = "<strong>Custom Template Test</strong>" + menuitem.Text;
                                    obj.Url = "/"; //menuitem.Url;
                                    obj.Encoded = false;

                                }));
                })

%>

I can comment out all the JS and the result is the same.

The view is being loaded like this :
 <% Html.RenderAction( "MyMenuView", "Menu");%>


Any help would be appreciated.

Thanks,

Reid

[Dimo]

Hello Reid,

You have set "/Contact" in the model, but only "/" is hard-coded in Menu ItemDataBound. That's why the Menu items lead to the home page.

Instead of setting Url, you can alternatively define ActionName and ControllerName. The MVC framework will construct the Url automatically.

.ItemDataBound((obj, menuitem) =>
{
    obj.Text = "string Text";
    obj.ActionName = "string Action";
    obj.ControllerName = "string Controller";
}));


Regards,
Dimo
the Telerik team

[Reid]

Hello again Dimo,

Thanks much that solved it.  I had that section commented out because I was getting an exception but after adding your logic it works as expected.

Thanks much!

Reid