ASP.NET入门篇【项目实战】打造一个自己的相册（二）登录模块

本文原创，转载请说明，本文地址：http://hi.baidu.com/44498/blog/item/59db5da17d24c28146106478.html

进行本次项目实战，需要有一定的C#基础知识，所以，在初期的几篇里面，我在文中尽可能的多贴图以进行示例，以后逐渐减少图片说明。

昨天已经介绍了流程和基本功能，今天简单的介绍一下用户登录模块的做法。

不要担心，非常简单。

打开Login.aspx页面，这是我们昨天设计的空白页面，用户登录，现在，我们来完善它的外观和功能。

简单的登录需要一个账号输入框，一个密码输入框，以及一个提交按钮；如图所示：

当然，喜欢用ASP.NET的标准控件库也行，喜欢用HTML组的控件也可以。

在输入密码的时候，都是以"*"号密文显示的，那么我们要调整一下密码框的属性，指定其类型是password类型。如图：

界面设计完毕，是个什么样子呢？大概的看一下吧，还算说得过去。

【如果要更好看，当然需要美工人员的帮助】

然后，该实现登录的功能了吧？

先谈谈我们的目标，也就是输入账号和密码以后，如果通过验证，则跳转到Default.aspx页面，提示登录成功，反之，则给予相应的提示。

账号和密码保存在哪里呢？当然是数据库里。

好，我们来创建一个数据库吧。【我这里使用的是SQL SERVER 2005，当然，你用其他的也行】

打开红圈选中的 SQL Server Management Studio ，其实也就等同于SQL SERVER 2000里的企业管理器。

然后，创建一个数据库，名称叫做PhotoDB。如图：

对着数据库三个字点击鼠标右键，选择新建数据库，然后名称输入PhotoDB。

然后，创建一个表，叫做ACCOUNT，保存我们的用户名和密码。

创建表也是可视化的向导操作，我就不截图演示了。

表结构如下：

TABLE NAME ACCOUNT

ID     USERID USERPWD

初期结构就先这样，以后的模块有需要，我们再做相应的调整即可。

然后插入一条记录，比如，我的账号是test，密码是123。

OK，数据库创建好了。我们如何通过它来验证我们的用户登录模块呢？

------------------------------------

分析流程：用户打开login.aspx页面，然后输入账号，密码，点击提交按钮，连接数据库，验证，出结果。

大概就是这么个流程。

第一步的关键在哪里？就在提交按钮被点击以后，触发的事件上。

我们打开设计页面，双击提交按钮，进入到代码里面。

如图：

进入代码文件后如图所示：

现在开始写代码？不，当然不。先来建立和数据库的一个连接吧。

在解决方案资源管理器中，鼠标右键单击网站项目，如图：

选择，“添加新项”，弹出窗体，选择 Linq To SQL 类。

然后系统提示你，是否把类文件保存到App_Code文件夹里，选择 是 ，即可。 如图：

点击“是”，稍等2，3秒，会自动打开一个界面，提供给我们存储表结构的地方。

点击“服务器资源管理器”，然后右键单击“数据连接”，选择，“添加连接”，如图：

然后弹出一个新的窗口：

要注意的是，连接字符串，我这里用的是SQL SERVER 2005 EXPRESS，所以连接字符串是.\SQLEXPRESS，如果用的是企业版，就输入 . 即可。如果是SQL SERVER 2000，输入.即可。

填写完毕，点击测试连接，如果提示连接成功，点击确定按钮即可。

然后，在左侧的服务器资源管理器里面，找到我们的ACCOUNT表，拖拽到图中红字的位置。

然后，等待1，2秒，红字所示的地方会出现我们的表结构。如图：

从图中可以看出，表结构已经成功的映射过来了。。。然后单击保存按钮即可。

这个时候，我们要开始写代码了。

在App_Code文件夹里创建一个类，名字叫做UserCon即可，然后在里面写代码，如图：

然后在这个类里面开始本项目的第一行代码的编写。【折腾这么长时间才开始写代码，其实是好事。。。】

代码如下：

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public class UserCon
{
    public static CTDCDataContext Ct = new CTDCDataContext();

    public static ACCOUNT UserLogin(string id, string pwd)
    {
        var u = Ct.ACCOUNT.FirstOrDefault(c => c.USERID == id && c.USERPWD == pwd);

        return u;
    }
}

OK，这里是我们登录模块所需要的核心代码，其功能就是通过验证用户输入的账号和密码，然后到数据库中进行检索。代码比较简单，我就不写注释了。

------------------------------------------

这只是把代码写在了我们定义的类中，那么，如何让用户在登录的时候调用这个类里面的方法以实现登录验证的效果呢？

很简单，打开login.aspx页面的类的文件，也就是login.aspx.cs，图片太大我就不贴图了，直接上代码：

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

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

    }

    protected void Page_PreRender(object sender, EventArgs e)
    {
        this.Text1.Focus();
    }
    protected void ButtonSub_Click(object sender, EventArgs e)
    {
        if (UserCon.UserLogin(Text1.Value.Trim(), Text2.Value.Trim()) != null)
        {
            Response.Redirect("~/Default.aspx");
        }

        else
        {
            Page.ClientScript.RegisterStartupScript
              (this.GetType(), "Windows IE", "<script>alert('密码不正确!');</script>");

        }   
    } 
}

从代码中可以清晰的看到，依然是从我们之前定义的那个protected void ButtonSub_Click(object sender, EventArgs e) ，按钮单击事件中调用了我们的登录模块验证方法。

那么，效果如何？

我们来试试看。

打开Login.aspx页面，然后随便输入一些字符。。。点击提交按钮。。。

结果如图：

提示密码不正确。【其实应该提示账号或密码不正确，偷个懒】

输入正确的账号test，和正确的密码123，结果如何呢？

结果如图：

可以看到，登录成功，并且成功跳转到了Default.aspx页面。

------------------------------

额，做了这么长时间的教程，好累，基本上一个登陆模块就完成了功能。

不过有些朋友可能有疑问，如果直接访问Default.aspx页面，那么岂不是跳过了我们的验证模块，

我们辛辛苦苦的写代码【尽管只有不到10行就实现了】岂不是白费力气？

没关系，这个问题更简单，下一次，我们来解决这个问题，

并且涉及到全新的模块设计和功能实现。。。

-------------------------------

谢谢。同时也希望能对新人有所帮助。。。