Question

I am developing an open source project for rendering HTML5 using ASP.NET. Here you can take a look:
http://asphtml5.codeplex.com/

now I have a problem with update panel in posting back the input values that have type other than ‘text’. as you might know, html 5 has introduced several input types, for example ‘number’, ‘tel’, ‘search’, etc. Now if I render such controls, everything works fine in normal situations, but if I put them inside an UpdatePanel, no value will be posted back and the value will be reset.

here is a small piece of code that produces the same error:

    <asp:UpdatePanel runat="server" ID="UP">
        <ContentTemplate>
            <p>
                Enter A Number:
                <asp:TextBox runat="server" ID="Number2" type="number" />
            </p>
            <asp:Button Text="Submit" runat="server" ID="BtnSubmit" OnClick="BtnSubmit_Click" />
            <p>
                You entered :
                <asp:Label Text="" ID="LblValue" runat="server" />
            </p>
        </ContentTemplate>
    </asp:UpdatePanel>

if you test this code on a browser that supports html 5, lets say Chrome as an example, a Numeric Up-Down field will be shown. but if you click on the submit button, it will lose the value that you have entered.

here is the code for event handler:

        protected void BtnSubmit_Click(object sender, EventArgs e)
        {
            LblValue.Text = Number2.Text;
        }

what I have already tried is reading UpdatePanel, ScriptManager and ScriptManagerProxy classes codes, nothing found.

I think I might need to create my own UpdatePanel and/or ScriptManager classes for use.

Could anyone help me, and tell me where to check.

Answer 1

All right then, I figured out a way to fix that.
First of all I found the problem with the code that Tim Medora provided. It all was the this. modifier’s fault. So this JavaScript fixed the problem:

var _textTypes = /^(text|password|hidden|search|tel|url|email|number|range|color|datetime|date|month|week|time|datetime-local)$/i;
function Sys$WebForms$PageRequestManager$_onFormSubmit(evt) {
...
if (_textTypes.test(type) ||
       (((type === 'checkbox') || (type === 'radio')) && element.checked)) {
       formBody.append(encodeURIComponent(name));
       formBody.append('=');
       formBody.append(encodeURIComponent(element.value));
       formBody.append('&');
...
}

Now I had to inject my function into ScriptResource.axd.
For now I found a way that seems to work:

I created a class ScriptResouceHandler that extends System.Web.Handlers.ScriptResourceHandler in namespace DotM.Html5.Handlers.

in its ProcessRequest I called base.ProcessRequest(context) to do its job. But I wanted to add my function to the one rendering original function. I found out that it was when the encrypted ZSystem.Web.Extensions,4.0.0.0,,31bf3856ad364e35|MicrosoftAjaxWebForms.debug.js| was passed.

Another problem was that in System.Web.Handlers.ScriptResourceHandler, ‘Page.DecryptString’ method which is internal is called to decrypt the query string param.
so there was no way for me to invoke that method via reflection.

here is the code:

        protected sealed override void ProcessRequest(HttpContext context)
        {
            base.ProcessRequest(context);
            if (CypherContainsAjax(context.Request.QueryString["d"]))
                context.Response.Write(OnFormSubmit);
        }

        private bool CypherContainsAjax(string cypher)
        {
            var text = DecryptString(cypher);
            if (text == null)
                return true; //Then Add it everywhere. What else could I do? :D
            return text.Contains("MicrosoftAjaxWebForms");
        }

        private string DecryptString(string cypher)
        {
            if (PageDecryptString == null)
                return null;
            return (string)PageDecryptString.Invoke(null, new object[] { cypher });
        }
        private static MethodInfo PageDecryptString;
        static ScriptResourceHandler()
        {
            PageDecryptString = typeof(Page).GetMethod("DecryptString", System.Reflection.BindingFlags.Static | System.Reflection.BindingFlags.NonPublic);
        }

You may call this some kind of ugly hacking …