static menuitem background color in asp:menu for selected item

Question

I am working in asp.net with the asp:menu menu system. When the user selects a menu item, I want the background color to persist so they know what tab they are in. I am trying to achieve this with jquery and overlaying the menu item once the Postback happens. Here is my menu logic.

div class="clear hideSkiplink"   >
                 <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" width="100%" BorderWidth="0px"  BackColor="Red">
    <%--                                 <staticmenustyle backcolor="LightSkyBlue"
          forecolor="Red"
          borderstyle="Solid"
          borderwidth="1"
          bordercolor="Red" />--%>
                      <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Refresh"/>
                        <asp:MenuItem NavigateUrl="~/Export.aspx" Text="Lock" />
                        <asp:MenuItem NavigateUrl="~/History.aspx" Text="History" />
                        <asp:MenuItem NavigateUrl="~/GLCostCenter.aspx" Text="GLCostCenter" />
                        <asp:MenuItem NavigateUrl="~/EnergyBorrowers.aspx" Text="EnergyBorrowers" />
                        <asp:MenuItem NavigateUrl="~/FinanceCompanies.aspx" Text="FinanceCompanies" />
                        <asp:MenuItem NavigateUrl="~/HvcreLoans.aspx" Text="HVCRELoans" />
                        <asp:MenuItem NavigateUrl="~/CommonObligors.aspx" Text="CommonObligors" />
                        <asp:MenuItem NavigateUrl="~/UnderwritingGuidelines.aspx" Text="UnderwritingGuideline" />
                        <asp:MenuItem NavigateUrl="~/ManualAdjustments.aspx" Text="ManualAdjustments" />
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                    </Items>
                </asp:Menu>

            </div>

In the underwriting guidelines.aspx, I have

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script src="Scripts/jquery-3.5.1.js"></script>
    <link href="Scripts/jquery-ui.css" rel="stylesheet" />
    <script src="Scripts/jquery-ui.js"></script>
    <script>
        $(document).ready(function () {
            $('input[id*=txt_Status_Date]').datepicker({
                dateFormat: 'mm/dd/yy'
            });
            $('#dialogpass').css({ display: 'none' });
            //$('#NavigationMenu').css({ display: 'none' });
            $('#NavigationMenu').Children[8].css({ display: 'none' });
        });
    </script>
      <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<%--  <link rel="stylesheet" href="/resources/demos/style.css"/>--%>
  <script src="https://code.jquery.com/jquery-1.12.4.js" type="text/jscript"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/jscript"></script>
  <script type="text/jscript">
      $(function () {
          $("#dialog").dialog({ autoOpen: false, dialogClass: 'myTitleClass', modal: false });
      });
  </script>
</asp:Content>

Under #NavigationMenu, I don't know how to specify the UnderWriting Guidelines menu item to paint it white. Please help.

Answer 1

You can use the event

      <asp:menu id="NavigationMenu"
        staticdisplaylevels="2"
        staticsubmenuindent="10" 
        orientation="Vertical"
        onmenuitemclick="NavigationMenu_MenuItemClick"
        runat="server">

and on code-behind:

 void NavigationMenu_MenuItemClick(Object sender, MenuEventArgs e)
  {
    // get id from the row and change the color
       e.Item.Selected = true;
  }

Checkout official Microsoft Documentation: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.menu.menuitemclick?redirectedfrom=MSDN&view=netframework-4.8