WebForms在autopostback期间不包括表单中的电子邮件输入类型

时间:2014-07-29 20:27:47

标签: asp.net html5 webforms

我在页面上有一个asp:TextBox

<asp:TextBox ID="edEmail" runat="server" />

表单以正常<asp:Button>控件提交:

<asp:TextBox ID="edEmail" runat="server" />
<asp:Button ID="bbOK" Text="Save User" runat="server" OnClick="bbOK_Click" />

将这些内容呈现为客户端:

<input name="ctl00$MainContent$edEmail" id="ctl00_MainContent_edEmail"></input>
<input name="ctl00$MainContent$bbOK" id="ctl00_MainContent_bbOK"     
       type="submit" value="Save User"
       onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$bbOK", "", true, "", "", false, false))' >

通过常规<asp:Button>提交表单时,所有内容都会正确发送。阅读HTML表单很痛苦,但格式化的请求体是:

  • &ctl00%24MainContent%24edEmail = asdf%40here.net
  • &ctl00%24MainContent%24bbOK = Save+User

很好,电子邮件地址将发送到服务器。接下来,我们会将输入框的type更改为新的html5 电子邮件类型。我们在安装适当的.NET 4 Framework更新后执行此操作:

<asp:TextBox ID="edEmail" type="email" runat="server" />
<asp:Button ID="bbOK" Text="Save User" runat="server" OnClick="bbOK_Click" />

现在我们重复相同的程序。呈现的HTML是:

<input type="email" name="ctl00$MainContent$edEmail" id="ctl00_MainContent_edEmail" >
<input name="ctl00$MainContent$bbOK" id="ctl00_MainContent_bbOK"
       type="submit" value="Save User" 
       onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$bbOK&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" >

当我们提交表格时,会出现电子邮件地址表格输入:

  • &ctl00%24MainContent%24edEmail = asdf%40here.net
  • &ctl00%24MainContent%24bbOK = Save+User

很棒,浏览器(IE11和Chrome 30-something)都按预期提交了表单内容。

接下来,我们在页面中添加一些内容,触发&#34;自动回发&#34; <asp:RadioGroup>

<asp:TextBox ID="edEmail" type="email" runat="server" />

<asp:RadioButtonList ID="rbAccountType" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rbAccountType_IndexChanged">
    <asp:ListItem>Windows</asp:ListItem>
    <asp:ListItem Selected="True">Local</asp:ListItem>
</asp:RadioButtonList>
<asp:Button ID="bbOK" Text="Save User" runat="server" OnClick="bbOK_Click" />

这给出了呈现的HTML:

<input type="email" name="ctl00$MainContent$edEmail" id="ctl00_MainContent_edEmail" >

<input id="ctl00_MainContent_rbAccountType_0" type="radio" name="ctl00$MainContent$rbAccountType" value="Windows" checked="checked"><label for="ctl00_MainContent_rbAccountType_0">Windows</label>
<input id="ctl00_MainContent_rbAccountType_1" type="radio" name="ctl00$MainContent$rbAccountType" value="Local" 
       onclick="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$rbAccountType$1\',\'\')', 0)">    

<input name="ctl00$MainContent$bbOK" id="ctl00_MainContent_bbOK"
       type="submit" value="Save User" 
       onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$bbOK&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" >

但是当此表单&#34;自动回发&#34; 时,电子邮件字段将丢失:

  • &ctl00%24MainContent%24rbAccountType = Local&__ASYNCPOST=true&

如果我将电子邮件输入的typeemail更改为text

<asp:TextBox ID="edEmail" runat="server" Type="text" />

渲染的radiobutton不受影响:

<input id="ctl00_MainContent_rbAccountType_1" type="radio" name="ctl00$MainContent$rbAccountType" value="Local" 
       onclick="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$rbAccountType$1\',\'\')', 0)">

但现在(正确地)回发数据恰好包含了它应该具备的内容:

  • &ctl00%24MainContent%24edUsername = ian
  • &ctl00%24MainContent%24edFullname = Ian%20Boyd
  • &ctl00%24MainContent%24edDescription = foo
  • &ctl00%24MainContent%24edEmail = asdf%40here.net
  • &ctl00%24MainContent%24rbAccountType = Local&__ASYNCPOST=true&

如果我将其更改回email

<asp:TextBox ID="edEmail" runat="server" Type="email" />

它再次失败,未能包含email输入类型

  • &ctl00%24MainContent%24edUsername = ian
  • &ctl00%24MainContent%24edFullname = Ian%20Boyd
  • &ctl00%24MainContent%24edDescription = foo
  • &ctl00%24MainContent%24rbAccountType = Local&__ASYNCPOST=true&

tldr

WebForms 是一个错误的架构,我本应该在五年前停止使用它没有修复,微软也没有,所以我只是在寻求同意。不支持HTML 5.

WebForms在做什么,使用浏览器不提交表单中的所有字段?失败发生在IE和Chrome客户端。

附录

此问题的标题会调出email输入类型。但number输入类型也会出现同样的错误;并且可能是所有html5输入类型。

在代码中标记超文本:

protected void Page_Load(object sender, EventArgs e)
{
   edEmail.Attributes["type"] = "email";
   edEmployeeID.Attributes["type"] = "number";

   ...
}

无法解决。在&#34;自动回发&#34; 提交期间,表单仍然无法提交其包含的值(并且在&#34;常规&#34;提交期间正确提交所有值)。

在提问后27分钟,谷歌搜索:

令人印象深刻
  

asp.net autopostback不包括html5输入类型

只让我成为遇到问题的人。显然,我是唯一一个试图将HTML5用于WebForms的人。

2 个答案:

答案 0 :(得分:2)

在生成的WebForms客户端Javascript代码中找到了错误:

<强>的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('&');
          }
       }
   }
}

根据定义,WebForms在回发期间不会在表单主体中输入HTML5输入类型。根据定义,它只支持少数原始输入类型:

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

答案 1 :(得分:1)

您可能需要将服务器控件保留为<asp:TextBox ... />,但在代码隐藏中覆盖其type属性:

edEmail.Attributes["type"] = "email";

<子> [Source]