网页表单的“Gmail 风格”部分更新答案

【问题标题】："Gmail style" partial update of a web form网页表单的“Gmail 风格”部分更新
【发布时间】：2015-02-18 19:56:05
【问题描述】：

我们有一个使用 ASP.NET Web 窗体技术编写的旧 Web 项目。这个网站有一个通常的注册表，用户需要填写一个电话号码。

我想在运行中检查这个电话号码是唯一的，即没有其他注册用户已经使用过这个电话号码。当然，不需要将整个表单发送到后端，这种行为的一个很好的例子可能是 gmail 如何检查您输入的电子邮件是否可以免费注册。

我尝试改写 example from microsoft 并使用两个标准 ajax 组件：ScriptManager 和 UpdatePanel。

我的疯狂实现是：

输入字段“phonenumber”失去焦点，因此触发“checkPhoneNumber”
javascript 函数“checkPhoneNumber”点击按钮“ValidatePhoneNumber”
后端在标签中写入“有效/无效电话号码”

这可能是非常糟糕和复杂的练习，但不知何故它到目前为止有效。

问题是我想在永远不会运行的标签的“onchange”事件中借助 javascript（添加和删除一些类以可视化错误/成功）对网页进行更多更改。是因为更改是由服务器而不是由用户进行的吗？

代码在“registration.aspx”中：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>

        function checkPhoneNumber()
        {
            alert("test"); //alert does not work!
            document.getElementById("<%=btnValidatePhoneNumber.ClientID%>").click();
        };

        function validationLabelOnChange()
        {
            //Never comes here!
            var label = document.getElementById("<%=ValidationLabel.ClientID%>");
            alert(label.text);
        };

    </script>
</head>

<body>
    <form id="form1" runat="server">

    <div style="padding-top: 10px">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset style="border: none">
                <asp:Label ID="ValidationLabel" runat="server" Text="" onchange="validationLabelOnChange"></asp:Label><br />
                <asp:Button ID="btnValidatePhoneNumber" runat="server" OnClick="btnValidatePhoneNumber_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

</html>

代码在“registration.aspx.cs”中：

    protected void btnValidatePhoneNumber_Click(object sender, EventArgs e)
    {
        //Validation of phone number will be added here
        ValidationLabel.Text = "Refreshed at " + DateTime.Now.ToString();
    }

如果您能提出更好的解决方案，我将不胜感激！我想即使没有 UpdatePanel 也可以工作。

【问题讨论】：

在后端验证电话号码绝对是使用ajax验证条目时的方法。

标签： javascript c# asp.net visual-studio-2013 webforms

【解决方案1】：

在这种情况下，您最好使用Page Methods。更新面板很好，但当您需要返回服务器上呈现的 HTML 时，它们是更好的选择。对于简单的真/假类型的请求，您最好使用更轻量级的东西。页面方法基本上是页面类中的静态方法，带有由 ASP.NET 为您生成的易于使用的 JavaScript 代理功能。

【讨论】：