locked
Custom Server Control Does Not Allow HTML5 Input Types RRS feed

  • Question

  • User-2060987266 posted

    I have created several custom server controls that inherit the System.Web.UI.WebControls.TextBox. These controls (e.g. NumberTextBox, EmailTextBox, DateTimeTextBox etc.) attempt to set the "type" attribute of the rendered input field to one of the corresponding HTML5 input types (e.g. "number", "email", "datetime").

    Long story short... the System.Web.UI.WebControls.TextBox seems to not recognize the new HTML5 input types, and sets the type attribute back to "text".

    I want to continure to inherit the System.Web.UI.WebControls.TextBox control, but I cannot seem to find a way to force these HTML5 type values. Any ideas?

    I hate to confuse the matter even further, but this is not a problem when running locally, only once I push to a server that is accessed via IP address or domain. Is strange, but just thought I would mention it.

    Here is a simplified version of one of the custom server controls:

     

        public class PhoneTextBox : System.Web.UI.WebControls.TextBox
        {
            //properties stuff...

            protected override void Render(HtmlTextWriter writer)
            {
                if (IsCmsEditable)
                {
                    MakeControlCmsEditable();
                }

                SetTextBoxAttributes();

                <mark>this.Attributes.Add("type", "tel");</mark>

                this.Attributes.Add("data-countryIsoCode", CountryIsoCode.ToString());
                this.Attributes.Add("data-allowExtension", AllowExtension.ToString().ToLower());
                this.Attributes.Add("data-useTollFreeFormatting", UseTollFreeFormatting.ToString().ToLower());

                base.Render(writer);
            }
        }

     

    William J. Familia

    http://www.wjfamilia.com/

    Wednesday, July 13, 2011 3:48 PM

All replies

  • User3866881 posted

    Hello OP:)

    Before HTML5 is published, these Controls have all been to the public, that's the reason (at least) I think why they don't support HTML5.

    If you insist doing so, I think maybe you have to re-write the whole control without inherting, or maybe you cannot call something like base.Render... these mthods. I guess in these functions your Html5's properties will be overridden,

    Thursday, July 14, 2011 10:51 PM
  • User863160722 posted

    This seems to be fixed in .NET 4.0; the TextBox control only renders the "type" attribute if it's not explicitly set.

    Tuesday, July 26, 2011 8:13 AM
  • User-2060987266 posted

    My Class Library is Framework 4, and that is the framework I am experiencing this problem with.

    Tuesday, July 26, 2011 12:06 PM
  • User863160722 posted

    Then there must be something else going on. I've just created a simple PhoneTextBox control, and it renders the correct type attribute.

    PhoneTextBox.cs:

    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace SiteControls
    {
        public class PhoneTextBox : TextBox
        {
            protected override void Render(HtmlTextWriter writer)
            {
                this.Attributes.Add("type", "tel");
                base.Render(writer);
            }
        }
    }

    TestPhoneTextBox.aspx:

    <%@ Page Language="C#"
        MasterPageFile="~/_controls/Site.master"
        Title="Test PhoneTextBox"
    %>
    
    <%@ Register tagPrefix="site" namespace="SiteControls" %>
    
    <asp:content runat="server" contentPlaceHolderID="bodyContentPlaceholder">
    <form runat="server">
        
        <site:phoneTextBox runat="server" />
        
    </form>
    </asp:content>

    Output:

    <input name="ctl00$bodyContentPlaceholder$ctl01" type="tel" />
    Tuesday, July 26, 2011 1:49 PM
  • User-2060987266 posted

    Thank you very much for taking it that far! It does also work for me when I run it locally, but does not when I put it on a test machine. This is what I mentioned in the initial post:

    "I hate to confuse the matter even further, but this is not a problem when running locally, only once I push to a server that is accessed via IP address or domain. Is strange, but just thought I would mention it."

    If you are willing to take this a little further, do you have the ability to test it in a non-local environment? 

    Tuesday, July 26, 2011 2:43 PM
  • User863160722 posted

    Accessing my local PC from a remote server works. Access a remote server from my PC works.

    I've tested in IE8, IE9, Firefox 5 and Chrome 12; they all have the correct value for the type attribute.

    Are you absolutely sure the site you're deploying to is using .NET 4.0? If it's running in a .NET 2.0 AppPool, you won't be able to override the type attribute.

    From the AddAttributesToRender method:

    .NET 2.0:

    case TextBoxMode.SingleLine:
        writer.AddAttribute(HtmlTextWriterAttribute.Type, "text");
        ...

    .NET 4.0:

    case TextBoxMode.SingleLine:
        if (string.IsNullOrEmpty(this.Attributes["type"]))
            writer.AddAttribute(HtmlTextWriterAttribute.Type, "text");
        ...
    Tuesday, July 26, 2011 3:52 PM
  • User-2060987266 posted

    I did just confirm the site and application pool is 4.0. Crazy stuff!?!?!

    Tuesday, July 26, 2011 4:45 PM
  • User863160722 posted

    Have you installed the "Update for the .NET Framework 4" on the server? I've just noticed that "Feature 3" (almost at the bottom of the page) reads, "lets you define a TextBox control that is HTML5 compatible".

    Scott Hunter has more information on HTML5 updates for .NET 4.0, including a recent reliability update, which fixes a variety of problems with the HTML5 input types.

    Tuesday, August 23, 2011 2:18 PM
  • User-242433875 posted

    William,

    You need to understand, HTML5 has got to do nothing with server controls, its a standard which needs to be satisfied by browsers vendors.

    The approach that you are taking looks fine to me.

    If you view the page created this version of control on browser that supports HTML 5, I dunn think there should be any issues (before you test the ASPX pages using these controls, just create an HTML page with HTML 5 markup and check if it works.)

    If you have any further doubts, let me know.

    Wednesday, September 7, 2011 8:53 AM