asp.net – 如何在WebForms中的form.onSubmit期间调用HTML5 form

发布时间：2020-12-16 03:16:02 所属栏目：asp.Net 来源：网络整理

导读：我如何覆盖或扩展标准的WebForms WebForm_OnSubmit javascript函数？我在ASP.net WebForms网站上使用HTML5输入类型.用户代理(例如Chrome,IE,Firefox)已正确处理数据清理,备用UI等. 通常,当用户点击 input type =“submit”按钮,User-Agent将暂停提交,并显示

我如何覆盖或扩展标准的WebForms WebForm_OnSubmit javascript函数？

我在ASP.net WebForms网站上使用HTML5输入类型.用户代理(例如Chrome,IE,Firefox)已正确处理数据清理,备用UI等.

通常,当用户点击< input type =“submit”>按钮,User-Agent将暂停提交,并显示UI以向用户指示他们的输入将无效：

WebForms的问题在于它不使用“提交”按钮.相反,一切都可以通过javascript回发来完成,而不是提交表单：

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

当渲染到客户端html时,它变成对Javascript的调用：

WebForm_DoPostBackWithOptions(...)

真正的长形式是Anchor标签：

<a id="Really_Long_Thing_ctl00_bbOK" 
   href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$VistaToolbar$ctl00$bbOK","",true,false,true))'>
   Save User
</a>

这意味着用户代理从不向用户提示输入的元素无效.

即使表单未被“提交”,它仍会触发onsubmit事件.我可以使用以下方法手动触发HTML5表单验证：

isValid = form.checkValidity();

理想情况下,我会在我的ASP.web WebForms站点中挂钩该事件：

的Site.Master

<form runat="server" onsubmit="return CheckFormValidation(this)">

<script type="text/javascript">
   function CheckFormValidation(sender) 
   {
      //Is the html5 form validation method supported?
      if (sender.checkValidity)
         return sender.checkValidity();

      //If the form doesn't support validation,then we just assume true
      return true;
   }
</script>

除了WebForms基础结构删除我的onsubmit方法处理程序,并将其替换为自己的：

<form id="ctl01" onsubmit="javascript:return WebForm_OnSubmit();" action="UserProperties.aspx?userGuid=00112233-5544-4666-7777-8899aabbccdd" method="post">

所以我自己的提交电话被忽略了.看来,深入研究WebForm_OnSubmit会导致ASP.net WebForms验证基础架构陷入困境：

function WebForm_OnSubmit() 
{
   if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) 
      return false;
   return true;
}

调用函数：

var Page_ValidationActive = false;
function ValidatorOnSubmit() 
{
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else 
    {
        return true;
    }
}

哪些调用,哪些调用,哪些检查.

只想要使用WebForms进行HTML5表单验证

问题是WebForms在提交之前有一个巨大的基础设施来检查表单,并通过标准化机制(以及我不使用的整个基础架构)向用户显示错误.它接管表单的onsubmit事件,并且它(不一定)使用< input type =“submit”>进行中.

我该怎么做才能说服ASP.net WebForms网站让User-Agent验证表单？

也可以看看

> HTML5 validation and ASP.net Webforms
> How do I get Client-side validation of ASP.Net page to run?
> Trigger standard HTML5 validation (form) without using submit button?
> MSDN Magazine: Better Web Forms with HTML5 Forms

解决方法

Web表单基础结构删除处理程序,因为您尝试将其直接添加到可视设计环境中的元素上,而Web表单不是以这种方式工作的.

捕获提交处理程序很简单,您只需要创造性地思考一下.

每当您尝试在Web表单环境中处理类似这样的事情时,您必须学会考虑Web表单页面呈现管道之后的解决方案.如果您尝试找到直接在Web表单引擎中工作的解决方案,那么Web表单将每次都获胜.

如果需要,您可以在此处重现我的确切测试用例,或者您可以根据需要选择所需的位并重新使用.

步骤1

在C#中创建一个新的Web表单项目(如果需要,可以在VB中执行,但我将我的示例设置为C#),一旦创建了项目,右键单击应用程序引用,进入NuGet并安装JQuery的.

使用JQuery可以做到这一点,只使用本机方法,但它是星期天,我今天很懒:-)

第2步

在项目中添加一个新的Web表单(使用添加新项目)并调用此“Default.aspx”,在此表单上添加一些文本,一个文本框,一个按钮和一个标签.

您的代码应类似于：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jsvalidation.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    Please enter your name :
    <asp:TextBox ID="txtName" runat="server" data-jsname="username"></asp:TextBox>
    <asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit"     />
  </div>
  <asp:Label runat="server" ID="lblResult">...</asp:Label>
  </form>

</body>
</html>

然后按F7(或双击按钮)转到表单编辑器后面的代码.

第3步

将按钮处理程序的代码添加到后面的代码中.如果您的处理方式与我完全相同,则代码应与以下内容类似：

using System;

namespace jsvalidation
{
  public partial class Default : System.Web.UI.Page
  {
    protected void Page_Load(object sender,EventArgs e)
    {}

    protected void btnSubmit_Click(object sender,EventArgs e)
    {
      if(Page.IsPostBack)
      {
        lblResult.Text = "Well hello there " + txtName.Text;
      }
    }
  }
}

此时,您可以按F5测试工作,当您按下提交按钮时,在文本框中输入(或不输入)的内容应与下面标签中的消息一起显示.

现在我们已经设置了基本的网络表单,我们只需要拦截表单提交.

第4步

正如我刚才所说,你需要在网络表格框之外思考.

这意味着您需要在页面呈现并发送到浏览器之后运行拦截.

Web表单注入混合的所有JS通常在允许页面输出继续之前执行,这意味着在打开正文标记之前.

为了使代码在它之后运行,您需要将脚本放在html输出的END处,以便它最后运行.

在结束正文标记之前添加以下代码,但在结束表单标记之后添加

<script src="/Scripts/jquery-2.1.1.js"></script>
<script type="text/javascript">

  $(document).ready(function() {

    $('form').submit(function() {

      var uninput = $('input[data-jsname="username"]');
      var username = uninput.val();

      if (username == "")
      {
        alert("Please supply a username!");
        return false;
      }

    });

  });

</script>

你们中间越精明,我会立即注意到我没有调用HTML5验证API,原因是我试图让这个例子变得简单.

我在哪里检查用户名值是重要的部分.

重要的是我执行检查的匿名函数返回true或false. (如果你不返回任何东西,则为True)

如果您返回false,则会阻止回发,从而允许您使用所需的任何JS代码来使用HTML5验证API更改表单域.

我个人的偏好是使用bootstrap(参见我的Bootstrap 2书的免费电子书范围,很快就会发布Bootstrap 3书),你可以在框架中使用特殊的标记和css类,例如“has-errors” “适当地调整颜色.

至于使用JQuery选择组件,这里有两件事你需要注意.

> 1)你不应该在网页表单页面上有多个表单,事实上如果我没记错,你的应用程序将无法编译,如果你这样做,或者最多它肯定会在运行时抛出异常.
> 2)因为你只有一个表格,然后你可以非常安全地做出假设,JQuery中的通用“形式”选择器只会选择你的主要形式(不论其ID,名称,缺乏或大小)并且为它添加??一个onsubmit处理程序,在web-forms之后总是会附加它.
> 3)因为Web表单可以(并且通常会)修改ID名称,所以通常更容易使用“数据属性”向标记添加自定义位.实际的ASP.NET js端验证本身就是完全相同的技巧,以允许JS代码和.NET代码在同一页面中愉快地共存.有办法告诉.NET如何命名ID,但通常你必须在很多地方设置很多选项,而且很容易错过一个.使用“数据属性”和JQ属性选择器语法是一种更安全,更易于管理的方法来实现相同的功能.

摘要

这不是一项艰巨的任务,但我不得不承认,如果你不在网络形式围绕着你的范围内寻找,那么这不是一个明显的问题.

Web表单专为快速应用程序开发而设计,主要用于桌面win-forms模型的开发人员.虽然现在网页形式仍然存在,但对于新的绿地应用程序,我建议也考虑其他选项,特别是那些建立在新HTML5规范正在努力铺设和正确的基础之上的应用程序.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!