只想使用WebForms

Question

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

我在ASP.net WebForms网站上使用HTML5输入类型。用户代理（例如Chrome，IE，Firefox）已正确处理数据清理，备用用户界面等。

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

enter image description here

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

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

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

WebForm_DoPostBackWithOptions(...)

真正的长形式是锚标记：

<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>

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

即使form未被“提交”，它仍然会触发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网站让用户代理验证表单？

另见

Answer 1

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

捕获提交处理程序非常简单，您只需要创造性地思考一下。

每当您尝试在网络表单环境中处理此类内容时，您必须学会考虑之后 Web表单页面呈现管道。如果您试图找到一个直接在Web表单引擎中运行的解决方案，那么Web表单将每次都获胜。

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

第1步

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

可以使用JQuery完成此操作，只使用本机方法，但它是星期天，我今天很懒： - ）

第2步

在项目中添加新的网络表单（使用添加新项目）并将此“ Default.aspx ＆＃39;”调用到此表单上，添加一些文字，一个文本框一个按钮和一个标签。

您的代码应类似于：

<%@ 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通常在允许页面输出继续之前执行，这意味着在打开body标记之前。

为了让您的代码在其后运行，您需要将脚本放在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书籍的syncfusion免费电子书范围，很快将发布Bootstrap 3书籍），您可以在框架中使用特殊的标记和css类，例如＆＃34;具有-错误＆＃34;适当地调整颜色。

至于使用JQuery选择组件，还有两件事你需要注意。

1）你不应该在网页表格页面上有多个表格，事实上如果我没记错的话，你的应用程序将无法编译，如果你这样做，或者至多它肯定会在运行时抛出异常。
2）因为你只有一个表格，所以你可以非常安全地做出假设，这是一个通用的形式＆＃39; JQuery中的选择器只会选择你的主表单（无论其ID，名称，缺少或大小）并为其添加一个onsubmit处理程序，在之后网页表单总是附上＆＃39这是它的事。

3）因为网络表单可以（并且通常会）修改ID名称，它通常更容易使用＆＃39;数据属性＆＃39;向标记添加自定义位。实际的ASP.NET js端验证本身就是完全相同的技巧，以允许JS代码和.NET代码在同一页面中愉快地共存。有办法告诉.NET如何命名ID，但通常你必须在很多地方设置很多选项，而且很容易错过一个。使用＆＃39;数据属性＆＃39;并且JQ属性选择器语法是一种更安全，更易于管理的方式来实现同样的目的。

摘要

这不是一项艰巨的任务，但我不得不承认，如果您没有看到围绕网络形式构建在您身边的范围，那么这一点并不是显而易见的。

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

如何在webForms中的form.onSubmit期间调用HTML5 form.checkValidity？

只想使用WebForms

另见

1 个答案:

第1步

第2步

第3步

第4步

摘要