登录界面代码(vs).doc

《登录界面代码(vs).doc》由会员分享，可在线阅读，更多相关《登录界面代码(vs).doc（18页珍藏版）》请在三一文库上搜索。

1、ASP.NET入门篇【项目实战】打造一个自己的相册（二）登录模块2009年11月15日星期日12:05本文原创，转载请说明，本文地址：进行本次项目实战，需要有一定的 C#基础知识，所以，在初期的几篇里面，我 在文中尽可能的多贴图以进行示例，以后逐渐减少图片说明。昨天已经介绍了流程和基本功能，今天简单的介绍一下用户登录模块的做法。不要担心，非常简单。打开Log in .aspx页面，这是我们昨天设计的空白页面，用户登录，现在，我们 来完善它的外观和功能。简单的登录需要一个账号输入框，一个密码输入框，以及一个提交按钮；如图所示：当然，喜欢用ASP.NET勺标准控件库也行，喜欢用 HTML组的控件也

2、可以。在输入密码的时候，都是以"*"号密文显示的，那么我们要调整一下密码框的属 性，指定其类型是password类型。如图：< input 密码: <inputid="Texti11 tupe="textK runat'server1- naKlengthv<>16" stlid,Text2" runat="5erver" PHxlength-lfe16"界面设计完毕，是个什么样子呢？大概的看一下吧，还算说得过去【如果要更好看，当然需要美工人员的帮助】感登录请登录账号: 密

3、码:提交然后，该实现登录的功能了吧？先谈谈我们的目标，也就是输入账号和密码以后，如果通过验证，则跳转到 Default.aspx页面，提示登录成功，反之，则给予相应的提示。账号和密码保存在哪里呢？当然是数据库里。好，我们来创建一个数据库吧。【我这里使用的是SQL SERVER 2005当然，你用其他的也行】Microsoft DirectX SDK August 2009Microsoft OfficeMicrosoft SQL Server 2005SQL Server Management StudioM SSTMMicrosoft Visual Studio 2008Microsoft

4、Windows SDK v6.0A打开红圈选中的 SQL Server ManagementStudio ，其实也就等同于 SQLSERVER2000里的企业管理器然后，创建一个数据库，名称叫做 PhotoDB如图:Microsoft SQL Sender Mnage.men: S:.idic £>:pr文件旧 骗辑任)视图M zacn 裔口的 ；a新建童询(N) Gj工£3涯资源苣理器-I 1心.SQLEXPRESS (SQL Server 5.0.4053 - Phil±1PhotoDB对着数据库三个字点击鼠标右键，选择新建数据库，然后名称输入然后，创建

5、一个表，叫做 account呆存我们的用户名和密码。创建表也是可视化的向导操作，我就不截图演示了。表结构如下：TABLE NAME ACCOUNTIDUSERID USERPWD初期结构就先这样，以后的模块有需要，我们再做相应的调整即可。然后插入一条记录，比如，我的账号是 test，密码是123。OK数据库创建好了。我们如何通过它来验证我们的用户登录模块呢?分析流程：用户打开login.aspx页面，然后输入账号，密码，点击提交按钮, 连接数据库，验证，出结果。大概就是这么个流程 第一步的关键在哪里？就在提交按钮被点击以后，触发的事件上我们打开设计页面，双击提交按钮，进入到代码里面。如图：进入

6、代码文件后如图所示:protected uoid ElJttonSub_Clicl<(object sendert Euentftrqs捞钮单击事件代码写在就处现在开始写代码？不，当然不。先来建立和数据库的一个连接吧在解决方案资源管理器中，鼠标右键单击网站项目，如图:屛夬方棄资源音理器-D九八PhotoT已，X亘迢占01 S1打解決方巽"Ph联小亡乳"(I,个项目| ttVAPh otoTest|E-S-打AppCodeL_j Default.aspx,_j Login.aspx _ MyFriendHaspx右键单击圧 _L MyHomCnaspK±：-

7、- MyPhoto.aspx选择，“添加新项”，弹出窗体，选择 Linq To SQL类。忑订瞒颐 * D:2009V200g年 11冃'PhotoTe臥檯板E：£3 Web窗体母出Web用户拄禅1 AJAX Web 婪体-dAJAX客户為亍污£j AJAX客户誉件4JAJAX春户拱库"1 AJAX母版交Crystal 撮表圈HTML贡jjScript 文件liUNQto SQL类LJ SQL Server 数据庫魄WCF服努魁Web服芻2y Web配置文件園XML幽J XML文件jXSLT文件圄报表打报表向导屈类关案图口滋览器文祥棗启用了 ZUAX的WC

8、F全卮应用程画諛据集金外观文件韵文本刘牛出样式表勺一餉刘站点地图戲资源討牛血血Studio已宝装北模板我世範翊到芸累时魚的LINQ to SQL亀名称(N)：诒言(L):CTDGdtjmtVisual 3>起个宕字，叫做匚TM吧>林文件中(P)'远择母版压然后系统提示你，是否把类文件保存到App_Code文件夹里，选择 是，即可。如 图：点击“是”，稍等2, 3秒，会自动打开一个界面，提供给我们存储表结构的地 方。一骂.通H矣天至2亠器已任戶三口玉刃纹謀忘忙匕眾圣器空谆言退器二.二昌镇屯动到此设计圉面上可刽建配据美:单击，逬行连接数据產点击“服务器资源管理器”，然后右键单击

9、“数据连接”，选择，“添加连接”， 如图：/ PhotoTest Microsoft Visual Stud o: e文件® 墉辑视图M 网站主咸冏调试(D)数詹曲k.cs Login.aspx沃HM按-乌芋旳酣册抽阿涓鋁固X剧新旧J39静(D)渤谑接阖，创建新SQL Server数脣库.“11属性(R1然后弹出一个新的窗口:要注意的是，连接字符串，我这里用的是 SQL SERVER 2005 EXPRES所以连接 字符串是.SQLEXPRES,S如果用的是企业版，就输入.即可。如果是SQLSERVER 2000，输入.即可。填写完毕，点击测试连接，如果提示连接成功，点击确定按钮即可

10、 然后，在左侧的服务器资源管理器里面， 找到我们的ACCOUNT，拖拽到图中红字的位置 J'数融接F 苗 phf|ip-pcsqxpressHPhotoD8,dlS1- 一i数据库黄累圏 百3表&" 口|ACCOUNT1±- 諏i£- J存储过程 '+ 口函数 申一i同文词注-_!谨序集云萦设计器可以庄陀诱白丈現刼看秦可观化"溥音理器=7工M拖动到此设计圉茴上可创越阳議然后，等待1, 2秒，红字所示的地方会出现我们的表结构。如图:刘牛(F)编辑旧视图(V)网站生成调试(D).J* lJ* J Ld L#： V服务器资源昔理器* &

11、#163;L X_£1壮律& 展务器> Debug * ”NETApp_Code/CTDadbm| Login.aspjcc& i LEIIheIacccjum 审” N蘇库关素囹占“ -1, jj数据鈕旦击保存即可生 philip-pcqlexpre55.PhotoDB,d甲口存席过程 i- 一j画数 审” N同义伺 i- a趣 i- 口思序集从图中可以看出，表结构已经成功的映射过来了。然后单击保存按钮即可这个时候，我们要开始写代码了。在App_Code文件夹里创建一个类，名字叫做UserCon即可，然后在里面写代码,E-App_Code1- CTDC.dbm

12、l1 |畐uuj也蜃如图:解关方宴资海普理豁-翼决方寡"Pho., 耳亘迥囤1钿ZJ解决方妻-PhotoTestQ个项国醫 D：VPhotoTestJ Default.aspx+i ,_L| Login.apx+_2lMyFriend.aspx+i- _2I MyHome.aspx S- Jj MyPhoto.aspx, web.config然后在这个类里面开始本项目的第一行代码的编写。【折腾这么长时间才开始写 代码，其实是好事。】代码如下：using System;using System.Data;using System.Configuration;using System.L

13、 inq;using System.Web;using System.Web.Security;using System.Web.UI;usi ng System.Web.Ul.HtmICo ntrols;usi ng System.Web.Ul.WebC on trols;usi ng System.Web.Ul.WebC on trols.WebParts;using System.Xml.Li nq;public class UserC onpublic static CTDCDataC on text Ct = new CTDCDataCo ntext();public static

14、ACCOUNT UserLogi n(stri ng id, stri ng pwd)var u = Ct.ACCOUNT.FirstOrDefault(c => c.USERID = id && c.USERPWD =pwd);return u;OK这里是我们登录模块所需要的核心代码，其功能就是通过验证用户输入的账 号和密码，然后到数据库中进行检索。代码比较简单，我就不写注释了。这只是把代码写在了我们定义的类中， 那么，如何让用户在登录的时候调用这个 类里面的方法以实现登录验证的效果呢？很简单，打开 login.aspx 页面的类的文件，也就是 login.aspx.c

15、s ，图片太大 我就不贴图了，直接上代码：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 Sys

16、tem.Xml.Linq;public partial class Login : System.Web.UI.Pageprotected 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.

17、Trim() != null) Response.Redirect("/Default.aspx");elsePage.Clie ntScript.RegisterStartupScript(this.GetType(), "Win dows IE", "<script>alert(密码不正确!');</script>");从代码中可以清晰的看到，依然是从我们之前定义的那个protected voidButtonSub_Click(objectsender, EventArgs e)，按钮单击事件中调用

18、了我们的登录模块验证方法。那么，效果如何？我们来试试看。打开Login.aspx页面，然后随便输入一些字符。点击提交按钮。账号：2U35455&%&密码：结果如图:号214354SS&% & 密码提交提示密码不正确。【其实应该提示账号或密码不正确，偷个懒】输入正确的账号test，和正确的密码123,结果如何呢？账号：test密码：!提交结果如图:參无标養夬-Microsoft Internet Explorer0 i http:/local host7687/Ph otoT«st/Deiau rt as px倉无标题茫登录成功啦，第一步已经完成了！可以看到，登录成功，并且成功跳转到了Default.aspx 页面。 额，做了这么长时间的教程，好累，基本上一个登陆模块就完成了功能。 不过有些朋友可能有疑问，如果直接访问 Default.aspx 页面，那么岂不是跳过 了我们的验证模块，我们辛辛苦苦的写代码【尽管只有不到 10 行就实现了】岂不是白费力气？ 没关系，这个问题更简单，下一次，我们来解决这个问题， 并且涉及到全新的模块设计和功能实现。