javascript - 如何从 JavaScript 代码调用存储过程？

Question

我有电子邮件字段和标签

<asp:TableRow runat="server">
                <asp:TableCell runat="server">
                    <asp:TextBox runat="server" ID="txtUserEmail" onfocusout="emailVerification()" CssClass="forTextbox ui-corner-all" PlaceHolder="Enter your email"></asp:TextBox>
                </asp:TableCell>
                <asp:TableCell runat="server">
                    <asp:ScriptManager runat="server" ID="smForEmail"></asp:ScriptManager>
                    <asp:UpdatePanel runat="server" ID="upLblEmail">
                        <ContentTemplate>
                            <asp:Label runat="server" ID="lblEmail"></asp:Label>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </asp:TableCell>
            </asp:TableRow>

还有其他一些领域。

我希望当用户移动到下一个字段时调用 onfocusout="emailVerification()" 方法。在这种方法中，我想检查数据库中是否存在电子邮件。为此我编写了存储过程。

USE [CDistributors]
GO
/****** Object:  StoredProcedure [dbo].[sp_InsertUser]    Script Date: 2/17/2016 2:50:05 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
ALTER procedure [dbo].[sp_InsertUser]
(@Email varchar(50) = null,
@ReturnValue int = null)
As
Begin
SET NOCOUNT ON;
IF EXISTS (SELECT UserId from Users where Email = @Email)
Begin

    return 0; -- Email already registered
End 
Else
Begin
    return 1; -- Email is not registered yet
End
End

JavaScript 函数是

// code for email verification
$(function () {
    function emailVerification() {
         // What code to call stored procedure that return integer
    }
});

请帮忙。

Answer 1

您可以将其作为数据库调用方法的Web服务或将其作为页面上的Web方法

如果您使用 .Net Framwork 4 或更高版本，您可以为控件指定 ClientIDMode="Static"，以便在客户端上具有与您指定的相同的 ID

<asp:TextBox runat="server" ID="txtUserEmail"  ClientIDMode="Static" onfocusout="emailVerification()" CssClass="forTextbox ui-corner-all" PlaceHolder="Enter your email"></asp:TextBox>

这里是WebMethod调用示例

// code for email verification
$(function () {
    function emailVerification() {
        // What code to call stored procedure that return integer
        var email = $('#txtUserEmail').val();
        jQuery.ajax({
            url: 'yourPage.aspx/VerifyEmail',
            type: "POST",
            data: "{'email' :' " + email + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend: function () {
                alert("Maybe you need some stuff before! ");
            },
            success: function (data) { alert(data.d); },
            failure: function (msg) { alert("Something go wrong! "); }
        });
    }
});

文件背后的代码

[System.Web.Services.WebMethod]
public static int VerifyEmail(string email)
{
    //Your verification code 
    return 1;
}