How to display some stuff in the same page instead of redirecting to another page while clicking the submenu of asp:menu?

StackOverflow https://stackoverflow.com/questions/13908835

Question

I am using asp:menu. My aspx code is:

<body>
    <form id="form1" runat="server">
    <div>
        <asp:Menu ID="Menu_Library" runat="server">
        </asp:Menu>

    </div>
    </form>
</body>

I am generating the sub menu items (i.e) the childitems dynamically.. If i click the sub menu items it redirects me to a page which i specify like this in my code behind,

MenuItem childItem = new MenuItem();
childItem.NavigateUrl = "OtherPage.aspx";

But what i need is when i click on sub menu items, it should display some items in same page..

How to achieve this? Please help me.. It can be either in javascript or code behind.. I don't want it to navigate it to another page instead perform the action in same page..

Was it helpful?

Solution

Instead of using the Page link you can use javascript for that and any div you can show or hide in it.

Your Code:

MenuItem childItem = new MenuItem();
childItem.NavigateUrl = "OtherPage.aspx";

Change with:

MenuItem childItem = new MenuItem();
childItem.NavigateUrl = "javascript: return GoToSomeLink('"+ count +"');"; //You can pass parameters also

Javascript function:

<script type="text/javascript">
function GoToSomeLink(obj) //if parameters are used use them here also.
{
    var count=parseInt(obj); //use this count varible anywhere in the function
    $(#menuDiv).show(); /any div show or hide
    return false;

}
 </script>

OTHER TIPS

You can use load() or ajax() jquery methods to load the contents dynamically without refreshing the page.

OR you can just hide the related contents inline and show/hide them using toggle() method

You can use jquery.load method as follows

var a = this.find(".contentWrap"),
a.load(this.getTrigger().attr("href") + " .ajaxDiv");

The idea is this

  1. put any css-class to every menu/sub-menu on which you want to load another page say ajaxMenu.
  2. set the url of the menu/sub-menu through you code.
  3. create a container div on you mage page with css-class (conetntWrap)
  4. create a container div on every page which you want to load say .ajaxDiv. This is important because it will not load the _viewstate to your page.

  5. now write a function on document.ready as follow

    $(document).ready(function () 
{
    $("a.ajaxMenu").live("click", function (a)
    {
        var a = this.find(".contentWrap"),
        a.load(this.getTrigger().attr("href") + " .ajaxDiv");
     });
 )};

    *---use classes on asp.net *

    <asp:Menu ID="NavigationMenu" 
     StaticMenuStyle-CssClass="StaticMenuStyle"
     StaticMenuItemStyle-CssClass="StaticMenuItemStyle"
     StaticSelectedStyle-CssClass="StaticSelectedStyle"
     StaticHoverStyle-CssClass="StaticHoverStyle"
    runat="server">
</asp:Menu>

    the above are way to add css classe.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top