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..

Était-ce utile?

La 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>

Autres conseils

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.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top