HTML5 Email Input Cannot Assign Id and Runat="Server" ASP.NET 4

HTML5 email input cannot assign ID and RUNAT=Server ASP.NET 4

ASP.Net 4.0 HtmlGenericControl does not support the "Type" attribute as defined in your code, the error explains that, Parser Error Message: 'email' is not a valid type for an input tag., this is a arguably a "well known" or easily discovered bug in the ASP.Net framework.

There are several solutions that are outlined here:

http://msdn.microsoft.com/en-us/magazine/hh547102.aspxre

Update the framework and use the Asp.Net TextBox control Scott Hunter - HTML 5 Updates for .NET 4

Use a 3rd party ASP.Net Html5 UI control such as the one available from Codeplex.




A similar question is asked, and answered on the following SO posts:

How can I use HTML5 email input type with server-side .NET - This is the same issue as for the HtmlGenericControl however it is not addressed in the update

input types on server side controls

My personal preference ended up being to move to ASP.Net MVC 3, its quite a steep learning curve and a big change from the "Web Forms" style of ASP.Net web development however its soon forgotten once you get used to the symantics and coding styles.

How to use runat = server in input tag?

When you add runat="server" and make the simple HTML control to asp.net HTML control, then asp.net renders the id and the name of that control in a manner that does not conflict with other asp.net controls on the same page.

So change the input to: (note now I add id, and remove the name!)

<input type="text" id="newusername" placeholder="Enter Username" required="required" runat="server"/>

and get the value using the post like this:

Request.Form[newusername.UniqueID]

or using the value:

newusername.value

other links to consider:
Accessing control client name and not ID in ASP.NET

HTML5 Types in ASP.NET

You may want to leave "type" undeclared in your code "front". You can set this in the code behind (maybe in the Page_Init or Page_Load):

this.Contract.Attributes.Add("type", "tel");

WebForms is not including email input type in form during autopostback

Found the bug in the generated WebForms client side Javascript code:

ScriptResource.axd

// Name:        MicrosoftAjaxWebForms.debug.js
// Assembly:    AjaxControlToolkit
// Version:     3.5.50401.0
// FileVersion: 3.5.50401
// (c) 2010 CodePlex Foundation
_onFormSubmit: function PageRequestManager$_onFormSubmit(evt)
{
   var count = form.elements.length;

   for (i = 0; i < count; i++) 
   {
       var element = form.elements[i];

       var tagName = element.tagName.toUpperCase();

       if (tagName === 'INPUT') 
       {
          var type = element.type;
          if ((type === 'text') ||
                (type === 'password') ||
                (type === 'hidden') ||
                (((type === 'checkbox') || (type === 'radio')) && element.checked)) 
          {
             formBody.append(encodeURIComponent(name));
             formBody.append('=');
             formBody.append(encodeURIComponent(element.value));
             formBody.append('&');
          }
       }
   }
}

By definition, WebForms will not input HTML5 input types in the form body during a postback. It will by definition only support the few original input types:

• text
• password
• hidden
• checkbox
• radio
• color unsupported
• date unsupported
• datetime unsupported
• datetime-local unsupported
• email unsupported
• month unsupported
• number unsupported
• range unsupported
• search unsupported
• tel unsupported
• time unsupported
• url unsupported
• week unsupported

number' is not a valid type for an input tag - On my local machine only

This makes no sense.. but as inspired by this answer:
https://stackoverflow.com/a/27561096/390501

I updated my Target Framework in Visual Studio to 4.5.1 rather than 4.5 and now the page loads without a parser error!

How to add runat=server attribute to html buttons

As other's have said, the problem is ASP.NET won't recognise runat="server" when you generate your controls as a string of HTML.

Your code should probably be done in a much different way, but if you wanted a change to what you have already done that will work you could do this a little differently.

Instead of runat="server" on your buttons, make them submit buttons and assign them a name and value, for example...

Instead of this:

<button ID='btn1' runat='server' onserverclick='btn_Click'>Apply</button>
<button ID='btn2' runat='server' onserverclick='btn_Click'>Apply</button>
<button ID='btn3' runat='server' onserverclick='btn_Click'>Apply</button>

Do this (note they all have the same name):

<button name="btn" type="submit" value="1">Apply</button>
<button name="btn" type="submit" value="2">Apply</button>
<button name="btn" type="submit" value="3">Apply</button>

Then in your Page_Load event you can detect if one of these buttons was clicked with the following:

if (Page.IsPostBack)
{
    if (Request.Form["btn"] != null)
    {
         //A btn was clicked, get it's value
         int btn = int.Parse(Request.Form["btn"]);

         //Do something with this btn number
    }
}

Here's a little sample that has three buttons and displays the number of the button that was clicked:

Test.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <button name="btn" type="submit" value="1">Apply</button>
        <button name="btn" type="submit" value="2">Apply</button>
        <button name="btn" type="submit" value="3">Apply</button>
    </form>
</body>
</html>

test.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.IsPostBack)
        {
            if (Request.Form["btn"] != null)
            {
                int btn = int.Parse(Request.Form["btn"]);

                Response.Write(btn);
            }
        }
    }
}

Keeping a hidden input box name the same using c#

Depending on what .NET version you are using the control over this differs: basically, pre-.NET4 you can only alter the container prefix by implementing your own, but from .NET4 you can omit the container prefixes using ClientIDMode.

Alternatively, you may expose methods, say, on your page or master page and then call them using inline-scripting (<%=MyMethodReturningValue() %>) which is evaluated at the time of render.

EDIT:

To elaborate a little on my second suggestion, you can define a method in your pages code-behind that can be executed in an inline manner by use of embedded code blocks; the referenced link gives simple examples of this, but the methods needn't be in <script> blocks of the page itself (as I previously touched on) so that you can keep your logic separated, such as:

Define a method in your page's code-behind:

public string RenderMessage()
{
    return "This need not be a hard-coded string!";
}

Write out your input element, omitting the runat attribute, and adding the embedded code block in place of where the value would be (think of this as a place holder); this code block is going to call the specified method on pre-render, and essentially be replaced by the returning value:

<input id="orderref" name="orderref" type="hidden" value='<%=RenderMessage() %>'/>

---

Related Topics