#AskMe

MenuItem – ImageUrl – No Action on Event Click, Chrome/Safari [ASP.net]

osify

There is an issue with MenuItem control in ASP.net with Safari/Chrome, the menu is unable to click but it’s working fine with Firefox and IE when we want to use image icon for the menu.

Example:

<asp:menuitem navigateurl="Home.aspx" 
            text="Home"
            imageurl="Images\Home.gif"
            tooltip="Home"/>

 

In Firefox, the MenuItem generated the full HTML fine as following:

<span title="Home">
<a class="ctl00_LeftNaviMenu_1" href="Home.aspx">
<img src="Images\Home.gif" style="border-width:0px;" /> 
</a>
</span>

The image icon is able to click.

In Chrome/Safari, the MenuItem generated wrong HTML:

<span title="Home">
<img src="Images\Home.gif" style="border-width:0px;" /> 
<a class="ctl00_LeftNaviMenu_1" href="Home.aspx"></a>
</span>

So that we cannot click the menu (on the image) because the HTML is generated a tag wrong outside the image tag.

Solutions

Safari and Chrome use webkit and in ASP.net, it identifies them by “Safari1Plus“, without telling ASP.net not to use an adapter to render the menu control, Chrome and Safari has always wrong control rendering in HTML.

You can google: MenuItem in ASP.net Cross Browser Compatibility (Safari/Chrome)

You will see some solutions out there.

Here are what I have tried on the ASP.net project with Framework 3.5 and it works.

Solution 1: Add Browser File: Chrome.browsers to folder: App_Browsers

You need to [Ref: StackOverflow]:

<browsers>
    <browser refID="safari1plus">
        <controlAdapters>
            <adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" />
        </controlAdapters>
    </browser>
</browsers>

 

Solution 2: Add a code snippet in MasterPage

The solution answers the same as Solution 1 but it’s just about to write directly in the MasterPage file to tell the application not to use any adapter in case in browser Chrome or Safari. [Ref: dotnetslackers]

In the MasterPage’s Page_Load event, put following code:

if (Request.UserAgent.IndexOf("AppleWebKit") > 0)
{
    Request.Browser.Adapters.Clear();
}

They are working for me, and you can try one.

—

References: