Why does decorating HTML elements with 'runat="server"' not make them accessible from the code-behind?

Question

According to this How to access html controls in code behind, I should be able to add 'runat="server"' to my html elements like so:

<input type="email" id="email" runat="server" />

...and then access the html element by its ID from C#, like this:

String usersEmail = email.Value;

However, attempting to do so results in, "The name 'email' does not exist in the current context"

Is trying to access html elements for manipulation from the code-behind really a lost cause?

UPDATE

In answer/response to Steve Brookes' suggestion, here is what I have at the top of my ascx file:

<%@ Control Language="C#" AutoEventWireup="true" 
CodeBehind="PostTravelWizardWebPartUserControl.ascx.cs"
Inherits="PostTravelWizard.PostTravelWizardWebPart.PostTravelWizardWebPartUserControl" %>

...whereas Mr. Brookes recommends something like this:

<%@Page Language="C#" AutoEventWireup="false" CodeFile="Default.aspx.cs" 
Inherits="_Default"%>

Is this close enough? IOW, instead of "Page" I have "Control" (it derives from UserControl); I have "CodeBehind" instead of "CodeFile" and my inherits differs.

I tried switching AutoEventWireup to false, but it made no difference.

UPDATE 2

Thanks Thorin,

I had no idea of that requirement (to envelop everything in a "form" tag), but even after doing so:

<form id="formPostTravel" runat="server">
   . . .  (all the html elements)
</form>

...it makes no difference; I still get, "The name 'email' does not exist in the current context"

UPDATE 3

Another response to Steve Brookes' suggestions, which were "changing CodeBehind to CodeFile and adding an Inherits attribute which should match the class name of your code behind file. The other suggestion is changing the ID to EmailAddress or something as it might be some sort of naming conflict with a reserved word!":

First, I changed CodeBehind to CodeFile

Then, I verified that the Inherits attribute matched the class name of my code behind file. That file is:

namespace PostTravelWizard.PostTravelWizardWebPart
{
    public partial class PostTravelWizardWebPartUserControl : UserControl

...and the inherits value is "PostTravelWizard.PostTravelWizardWebPart.PostTravelWizardWebPartUserControl"

Finally, I also changed the ID of the HTML element from 'email' to 'emailaddress':

<input type="email" id="emailaddress" runat="server" />

...but now I get, "The name 'emailaddress' does not exist in the current context"

UPDATE 4

For a little context of just what is being attempted here.

Here is where the "email" input is defined, in the *.ascx file, within an html block:

<input type="email" id="emailaddress" runat="server" />

And here is how I'm trying to access its value, from the corresponding *.ascx.cs file:

namespace PostTravelWizard.PostTravelWizardWebPart
{
    public partial class PostTravelWizardWebPartUserControl : UserControl
    {
    . . .
    String usersEmail = emailaddress.Value; 

But I get rewarded with, "The name 'emailaddress' does not exist in the current context"

UPDATE 5

Following this advice from Steven Brookes:

you could right click the ascx file and view designer, then change to view code. This may well regenerate the designer file

I was able to get some of the fields into designer.cs; the others (most) because they begin "hidden"? I don't know...

Answer 1

You might have forgotten to put it in a server-side form:

  <form id="form1" runat="server">
    <input type="email" id="email" runat="server" />
  </form>

html elements need to be inside a form tag, and both the form tag and the html element need to have runat="server" as an attribute, before you're able to access them from your code-behind.

update 1

I created a test web form and test user control, and put the user control in the web form. Here's all the code:

TestWebForm.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestWebForm.aspx.cs" Inherits="TestWeb.TestWebForm" %>
<%@ Register TagPrefix="uc" src="~/TestWebUserControl.ascx" tagName="TestWebUserControl" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <form id="form1" runat="server">
        <uc:TestWebUserControl id="TestWebUser" runat="server" />
    </form>
</body>
</html>

TestWebForm.aspx.cs

using System;
using System.Web.UI;

namespace TestWeb
{
    public partial class TestWebForm : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            var y = TestWebUser.InnerControlEmail.Value;
        }
    }
}

TestWebUserControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestWebUserControl.ascx.cs" Inherits="TestWeb.TestWebUserControl" %>

<input type="email" id="ControlEmail" runat="server" />

TestWebUserControl.ascx.cs

using System;
using System.Web.UI;
using System.Web.UI.HtmlControls;

namespace TestWeb
{
    public partial class TestWebUserControl : UserControl
    {
        public HtmlInputGenericControl InnerControlEmail
        {
            get { return ControlEmail; }
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            var x = ControlEmail.Value;
        }
    }
}

This worked for me. Note that I had to change the <%@ Register %> tag to use the src and tagName attributes instead of the default Namespace and Assembly attributes.

Also, the html control is eventually wrapped in a <form> tag in the web form, so it's not needed in the user control.

And thanks to the property, the html control can be accessed by forms that this user control is placed on.

update 2

This is the TestWebUserControl.ascx.designer.cs file:

//------------------------------------------------------------------------------
// <auto-generated>
//     This code was generated by a tool.
//
//     Changes to this file may cause incorrect behavior and will be lost if
//     the code is regenerated. 
// </auto-generated>
//------------------------------------------------------------------------------

namespace TestWeb {


    public partial class TestWebUserControl {

        /// <summary>
        /// ControlEmail control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::System.Web.UI.HtmlControls.HtmlInputGenericControl ControlEmail;
    }
}

If I remove protected global::System.Web.UI.HtmlControls.HtmlInputGenericControl ControlEmail;, I get your exact error. So your designer file is most likely out of whack.

Remove the html control definition (<html id="email"/>) from your .ascx file, try compiling (you'll get errors), add it back in, try compiling (you'll get errors) try compiling again (now it should work).

Answer 2

Is your page an asp.net page? If so make sure your page directive is correctly pointing to your code-behind file. Something like this should should be at the top of your page:

<%@Page Language="C#" AutoEventWireup="false" CodeFile="Default.aspx.cs" Inherits="_Default"%>

Answer 3

Sometimes Visual Studio forgets to define your server side controls in '.designer' file and you cant access them from code behind

In these cases you have to define these elements manually within your code.

note that you have to define these variables with EXACT type and name of your element and as 'protected' memebers