javascript - IE10 sending image button click coordinates with decimals (floating point values) causing a ParseInt32 FormatException

Question

It seems like ASP.NET 4.0 is not prepared to handle ImageButton events triggered by Internet Explorer 10. The problem is that IE10 sends the image click coordinates as double values (with decimals), and ASP.NET tries to parse them as integers, presenting the following type of error:

System.Web.HttpUnhandledException (0x80004005): 
   Exception of type 'System.Web.HttpUnhandledException' was thrown. 
   ---> System.FormatException: Input string was not in a correct format.

   at System.Number.StringToNumber(String str, NumberStyles options, NumberBuffer& number, NumberFormatInfo info, Boolean parseDecimal)
   at System.Number.ParseInt32(String s, NumberStyles style, NumberFormatInfo info)
   at System.Web.UI.WebControls.ImageButton.LoadPostData(String postDataKey, NameValueCollection postCollection)
   at System.Web.UI.Page.ProcessPostData(NameValueCollection postData, Boolean fBeforeLoad)
   at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)
   at System.Web.UI.Page.HandleError(Exception e)
   at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)
   at System.Web.UI.Page.ProcessRequest(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)
   at System.Web.UI.Page.ProcessRequest()
   at System.Web.UI.Page.ProcessRequest(HttpContext context)
   at ASP.members_addtocartlogin_twostep_aspx.ProcessRequest(HttpContext context) in c:WindowsMicrosoft.NETFramework64v4.0.30319Temporary ASP.NET Files
oot932deaba63ff7eebApp_Web_MyPage.aspx.28424a96.oraym_un.0.cs:line 0
   at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()
   at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

Googling around, some people suggest forcing IE10 to run in compatibility view. However, adding the meta tag <meta http-equiv="X-UA-Compatible" content="IE=10" /> does not solve anything; and adding <?xml version="1.0" encoding="UTF-8"> before <!DOCTYPE> doesn't work either.

Any solutions? Could I capture the click event with Javascript and remove the decimals somehow?

Note: Upgrading to Framework 4.5 and recompiling fixes the bug. No need to change the runtime version, since it's still 4.0.

Answer 1

There are hotfixes for .NET CLR 2.0 and 4.0, as described in this blog entry by Scott Hanselmann:

What the fixes do is update the ie.browser and firefox.browser files in WindowsMicrosoft.NETFramework<version>ConfigBrowsers with new and future-proofed versions of these browser definitions. Nothing else is affected.

.NET 4

• http://support.microsoft.com/kb/2600088

.NET 2.0

• http://support.microsoft.com/kb/2600100 for Win7 SP1/Windows Server 2008 R2 SP1, Windows Vista/Server 2008, Windows XP/Server 2003

• http://support.microsoft.com/kb/2608565 for Win7/Windows Server 2008 R2 RTM

Alternatively, there's a client-based javascript patch (originally posted as workaround on the Connect item with bug ID:755419):

$(function () {
    // Patch fractional .x, .y form parameters for IE10.
    if (typeof (Sys) !== 'undefined' && Sys.Browser.agent === Sys.Browser.InternetExplorer && Sys.Browser.version === 10) {
        Sys.WebForms.PageRequestManager.getInstance()._onFormElementActive = function Sys$WebForms$PageRequestManager$_onFormElementActive(element, offsetX, offsetY) {
            if (element.disabled) {
                return;
            }
            this._activeElement = element;
            this._postBackSettings = this._getPostBackSettings(element, element.name);
            if (element.name) {
                var tagName = element.tagName.toUpperCase();
                if (tagName === 'INPUT') {
                    var type = element.type;
                    if (type === 'submit') {
                        this._additionalInput = encodeURIComponent(element.name) + '=' + encodeURIComponent(element.value);
                    }
                    else if (type === 'image') {
                        this._additionalInput = encodeURIComponent(element.name) + '.x=' + Math.floor(offsetX) + '&' + encodeURIComponent(element.name) + '.y=' + Math.floor(offsetY);
                    }
                }
                else if ((tagName === 'BUTTON') && (element.name.length !== 0) && (element.type === 'submit')) {
                    this._additionalInput = encodeURIComponent(element.name) + '=' + encodeURIComponent(element.value);
                }
            }
        };
    }
});