I have asp.net Menu Item <asp:MenuItem NavigateUrl="" Text="Download" Value="Download"/>. When this item gets clicked, I want to execute jQuery click method. How can we do that?
-
Please post the HTML that control generates.Rory McCrossan– Rory McCrossan2012-03-29 15:25:03 +00:00Commented Mar 29, 2012 at 15:25
-
<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu1n16"> <td><table class="ctl00_Menu1_7" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="white-space:nowrap;width:100%;"><a class="ctl00_Menu1_1 ctl00_Menu1_6" href="javascript:__doPostBack('ctl00$Menu1','Reports\\Download')">Download</a></td> </tr> </table></td> </tr>James123– James1232012-03-29 15:41:24 +00:00Commented Mar 29, 2012 at 15:41
Add a comment
|
2 Answers
Provide a CssClass property with some class to the menu item. On client side find the element using that class and attach click event handler to it.
<asp:MenuItem NavigateUrl="" CssClass="menuItem" Text="Download" Value="Download"/>
Js
$('.menuItem').click(function(){
//do stuff here
});
Update:
I think you can specify the css class in this way.
<asp:Menu ID="mainMenu" runat="server">
..
<asp:MenuItem NavigateUrl="" CssClass="menuItem" Text="Download" Value="Download"/>
..
<StaticMenuItemStyle CssClass="menuItem" />
</asp:Menu>
5 Comments
Emmanuel N
Or clientID can be used as a selector
ShankarSangoli
Yes,
ClientID can be used but you have to send the id to the client.
James123
Validation (ASP.Net): Attribute 'CssClass' is not a valid attribute of element 'MenuItem'.
James123
@ShankarSangoli Still the same error. I defined StaticMenuItemStyle.
Pankaj
Now, you can check another answer. Please go through it carefully.
Sample JQuery
<script language="javascript" type="text/javascript">
$(function () {
$(".MyMenu a").each(function (index) {
$(this).click(function () {
alert(index);
return false;
});
});
});
</script>
Modified HTML
<asp:Menu ID="_mainMenu" RenderingMode="Table" runat="server" CssClass="MyMenu" autopostback="true">
<Items>
<asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
<asp:MenuItem Text="Index" Value="Home"></asp:MenuItem>
</Items>
</asp:Menu>
Note - RenderingMode="Table"
4 Comments
James123
Above function executing when you root menu , not menu item. If we have 2 or 3 menu item... how to mange the click?
Pankaj
I have added one more MenuItem. Now you can check, on clicking the Index will show alert value 1 and on clicking the Home will show the value 0.
walther
Rendering the menu as a table is a very bad practice.
James123
Sorry.. @PankajGarg I have sub menu item in menu item... Thats the reason I am not getting sub menu item index. I am able to get root menu item index.