65.9K
CodeProject 正在变化。 阅读更多。
Home

Visual Studio 2010 和 Microsoft SQL 2008 - 使用 ASP.NET (JQuery, Json 和 Web 服务) 的身份验证系统

composeme
starIconstarIconstarIconstarIconemptyStarIcon

4.00/5 (8投票s)

2010年5月9日

CPOL

2分钟阅读

viewsIcon

56735

downloadIcon

1359

如何在 ASP.NET C# 中使用 JQuery 直接调用服务器端方法或函数

引言

在本文中，我们将了解应用程序的登录页面。 这是任何想使用我们应用程序的用户将要面对的第一个页面，也是本节中最重要的页面。 登录脚本在此应用程序中起着非常重要的作用。

背景

身份验证系统允许只有少数选定的人才能访问某些在线材料。 本教程说明了使用 ASP.NET 构建身份验证系统的基本结构。

在本教程中，我将使用 JQuery 向服务器发出 AJAX 调用。 我还将解释如何在 ASP.NET C# 中使用 JQuery 直接调用服务器端方法或函数。

概述

  1. 在 Visual Studio 中创建项目
  2. 解决方案资源管理器
  3. 数据库
    1. 创建表
    2. 插入语句
    3. 创建存储过程
  4. Web.Config
  5. 服务器端
  6. 客户端

在 Visual Studio 中创建项目

打开 Visual Studio 2010 并创建一个新项目，如下所示

解决方案资源管理器

默认情况下，当您在 Visual Studio 2010 中创建一个新的网站时，Jquery 会添加到您的项目中，如下图所示

数据库

我将认为您知道如何创建数据库，否则我创建了一个名为 testing 的数据库。

UserLogin 表

创建一个名为 userLogin 的表。

CREATE TABLE [dbo].[UserLogin](
	[loginid] [bigint] IDENTITY(1,1) NOT NULL,
	[username] [varchar](30) NOT NULL,
	[password] [varchar](50) NOT NULL,
	[email] [varchar](255) NOT NULL,
	[user_type] [varchar](45) NOT NULL,
	[disabled] [bit] NOT NULL,
	[activated] [bit] NOT NULL,
 CONSTRAINT [PK_UserLogin] PRIMARY KEY CLUSTERED 
(
	[username] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, 
IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON,
 ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

正如您所看到的，username 是主键，用于防止重复的用户名，而 loginid 是标识（自动递增）。

插入记录

将记录插入到 UserLogin 表中。

 INSERT INTO USERLOGIN VALUES ('aamir','hasan','hasan@studentacad.com','user',0,0)
 INSERT INTO USERLOGIN VALUES ('admin','admin','aamirhasan@studentacad.com','admin',0,0)

存储过程

我创建了一个名为 spx_checkuserlogin 的存储过程。 如果用户不存在于 Userlogin 表中，则存储过程将返回 0，否则它将返回用户 ID。

CREATE PROCEDURE [dbo].[SPX_CHECKUSERLOGIN]

      @USERNAME VARCHAR(50),
      @PASSWORD VARCHAR(50)

AS

BEGIN
declare @value bigint
    SET NOCOUNT ON;

SELECT @value=	 LOGINID FROM USERLOGIN 
	WHERE USERNAME = @USERNAME AND PASSWORD = @PASSWORD 
	AND [DISABLED]=0 
 select ISNULL(@value,0)
END

服务器端

我创建了 WebMethod ，它将接受用户名和密码并发送到存储过程。

[System.Web.Services.WebMethod]
        public static string CheckUserName(string userName,string passWord)
        {
         string returnValue = string.Empty;
            try
            {
                string consString = ConfigurationManager.ConnectionStrings
				["testingConnectionString"].ConnectionString;
                SqlConnection conn = new SqlConnection(consString);
                SqlCommand cmd = new SqlCommand("SPX_CHECKUSERLOGIN", conn);
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@UserName", userName.Trim());
                cmd.Parameters.AddWithValue("@password", passWord.Trim());
                conn.Open();
                returnValue = cmd.ExecuteScalar().ToString();
                conn.Close();
            }
            catch(Exception ee)
            {
                returnValue = "error message: " + ee.Message;
            }
            return returnValue;
        }

注意: 方法应该是 static。

客户端

在 aspx 页面中，HTML 将收集用户名、密码字段和输入按钮，名称为 Login。

  <div>
Username : <asp:TextBox ID="txtUserName" runat="server" 
	onkeyup = "OnKeyUp(this)" /><br />
Password:  <asp:TextBox ID="txtPassWord" 
	TextMode=Password runat="server" onkeyup ="OnKeyUp(this)"/><br />  
 <input id="btnCheck" type="button" value="Login" onclick = "CheckUserLogin()" />
 <br />
 <span id = "message"> </spa
</div>

JQuery

Jquery 用于调用服务器端方法，该方法将发送用户名和密码，并从服务器端代码获取响应。

function CheckUserLogin() {
        $.ajax({
            type: "POST",
            url: "default.aspx/CheckLogin",
            data: '{userName: "' + $("#<%=txtUserName.ClientID%>")[0].value + 
		'",passWord: "' + $("#<%=txtPassWord.ClientID%>")[0].value + '" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response);
            }
        });

“'{userName: "' + $("#<%=txtUserName.ClientID%>")[0].value + '",passWord: "' + $("#<%=txtPassWord.ClientID%>")[0].value + '" }',” data 参数表示用户名和密码 JSON 对象。

上面的 jQuery 具有以下属性和值，如下所示

$.ajax({

type:Reuest Type
url:Page URL/Method name.
data:Values.
dataTyle:"json".
success:Success Method.

});

现在在您的 Head 中添加 JQuery 的引用，在页面的顶部第二个位置。

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
<script type = "text/javascript"> 
function OnKeyUp(txt) {
            $("#message")[0].innerHTML = "";
        }
       
        function CheckUserLogin() {
        $.ajax({
            type: "POST",
            url: "default.aspx/CheckLogin",
            data: '{userName: "' + $("#<%=txtUserName.ClientID%>")[0].value + 
		'",passWord: "' + $("#<%=txtPassWord.ClientID%>")[0].value + '" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response);
            }
        });
    }
    function OnSuccess(response) {
        var mesg = $("#message")[0];

        if (response.d == 0) {
            mesg.style.color = "red";
            mesg.innerHTML = "Invalid Username and Password;";
        } else if (response.d > 0) {
            mesg.style.color = "green";
            mesg.innerHTML = "User ID:" + response.d.toString();
        } else {
            mesg.style.color = "red";
            mesg.innerHTML = "Error:" + response.d.toString();
        }    
    }
</script>

正如您将注意到的，我只是在 Default.aspx 页面中调用 CheckLogin 服务器端函数，并将 TextBox 值作为参数传递。 其次，我定义了 success 方法 OnSuccess ，该方法将被调用来处理服务器返回的响应。

历史

  • 2010 年 5 月 9 日：首次发布
© . All rights reserved.