零点起飞学C#之我的校内网.pptx

1、第27章 我的校内网,校内网是当前比较流行的交流网站之一。它包括登录、主页面、好友、日志、相册、聊天等功能。本章将使用Visual Studio 2010集成开发环境和SQL Server 2012数据库版本开发校内网网站。该网站名称为MyXiaonei，数据库名称为XiaoneiDB。本章将给大家详细讲述校内网的开发方法。,27.1 系统总体设计,本节介绍校内网MyXiaonei网站的总体设计，主要包括系统功能设计、MyXiaonei网站的组成、XiaoneiDB数据库设计、数据库实体类设计、标题模块、网站配置等。,27.1.1 系统功能设计,在我的校内网中，给大家介绍几个常用的功能，主要包

2、括登录、添加好友、浏览好友、上传照片、浏览照片、写日志、浏览日志等功能。具体的功能描述如下所示： 用户登录：验证用户的身份是否合法。 主页面：校内网网站的主页面。 我的好友：按照分类方式浏览好友。 添加好友：可以查询用户，并添加为好友。 我的相册：按照分类方式浏览照片。 上传照片：上传照片到服务器，并指定相应的分类。 我的日志：按照分类方式浏览日志。 添加日志：将新的日志添加到指定的分类下。,27.1.2 校内网组成,该校内网网站的名称为MyXiaonei。在Visual Studio 2010的“解决方案资源管理器”面板中查看MyXiaonei网站。该网站的组成如下所示： App_Code文

3、件夹：包括操作数据的XiaoneiDB.dbml文件和MyXiaoneiSystem.cs类文件。 App_Themes文件夹：包括MyXiaonei网站的主题和样式文件，如web.css、web. skin等。 UserControls文件夹：包括MyXiaonei网站使用的用户控件Header.ascx和Title.ascx。 Web文件夹：包括校内网最为常用的功能的页面，如我的好友页面MyFriend.aspx、我的相册页面MyPhoto.aspx等。 Default.aspx页面为用户登录页面。 Web.config文件为MyXiaonei网站的配置文件，它配置了数据库连接字符串等信息

4、。,27.1.3 数据库设计,该校内网网站使用的数据库版本为SQL Server 2012，数据库名称为XiaoneiDB。数据库中主要包含5个表：User、Category、 Friend 、 Log 、 Photo表。 1User表 User表保存用户的信息。 2Category表 Category表保存分类的信息。 3Friend表 Friend表保存好友的信息。 4Log表 Log表保存日志的信息。 5Photo表 Photo表保存照片的信息。,27.1.4 数据库实体类设计,该校内网为XiaoneiDB数据库创建了DBML文件，名称为XiaoneiDB.dbml。然后把Xiaonei

5、DB数据库中的所有表添加到该文件中。,27.1.5 标题模块,标题模块由TitleUC.ascx用户控件实现，它将用来显示标题。 TitleUC.ascx用户控件在其Page_Load(object sender,EventArgs e)事件中调用DataBind()方法绑定用户控件的数据。程序代码如下： protected void Page_Load(object sender,EventArgs e) this.DataBind(); ,27.1.6 配置文件Web.config,MyXiaonei网站的连接字符串放置在Web.config配置文件的元素中，具体代码如下：,MyXiaon

6、eiSystem类的静态成员XiaoneiDBConnectionString获取MyXiaonei网站的连接字符串，程序代码如下： public class MyXiaoneiSystem / / 访问XiaoneiDB数据库的连接字符串/ public static string XiaoneiDBConnectionString = ConfigurationManager.ConnectionStrings“XiaoneiDBConnectionString“.ConnectionString; ,27.2 常用功能模块实现,校内网的几个常用的功能主要包括登录、添加好友、浏览好友、上传

7、照片、浏览照片、写日志、浏览日志等功能。本节主要介绍这些功能的具体实现方法。,27.2.1 登录页面,登录功能由Default.aspx页面实现。该页面上有输入用户名和密码的文本框，实现用户登录的功能。 1界面设计 Default.aspx页面声明了2个TextBox控件和1个ImageButton控件，它们的ID属性值分别为tbUsername、tbPassword和ibtLogin。其中，tbUsername和tbPassword控件分别供用户输入用户名和密码；ibtLogin控件显示为“登录”按钮，实现登录的功能。 2事件设计 当用户单击Default.aspx页面中的“登录”按钮（ib

8、tLogin控件）时，将触发ibtLogin控件的Click事件：ibtLogin_Click(object sender,EventArgs e)。 ibtLogin_Click(object sender,ImageClickEventArgs e)事件将用户输入的用户名和密码提交到数据库，并检查用户名和密码是否正确。如果正确，则登录成功，否则，登录失败。具体步骤如下所示。,（1）创建XiaoneiDB数据库的数据上下文对象db。 （2）根据用户输入的用户名和密码，使用“from u in db.User where u.Username = tbUser name.Text.Trim()

9、 ”表达式查询User表。 （3）判断用户输入的用户名和密码是否正确。 （4）如果用户输入的用户名和密码正确，则登录成功，并保存用户的ID值和用户名，最终跳转到校内网的主页面：Main.aspx页面。,27.2.2 主页面,校内网主页面由Main.aspx和LeftTree.aspx页面实现。LeftTree.aspx页面使用TreeView控件（ID属性的值为tvOperation）显示用户的功能链接，如“我的好友”、“我的相册”、“我的日志”等。 Main.aspx页面使用了框架，并放置了两个元素，它们的name属性的值分别为：Left和Desktop。其中，Left框架放置LeftTre

10、e.aspx页面，Desktop框架默认放置MyFriend.aspx页面。,27.2.3 我的好友,我的好友是由MyFriend.aspx页面实现的。该页面按照系统默认的分类显示当前登录用户的好友。 1界面设计 在下述程序代码中，MyFriend.aspx页面声明了1个DataList控件、1个GridView控件和1个ImageButton控件，它们的ID属性的值分别为dlCategory、gvFriend和ibtAdd。dlCategory控件以水平排列方式显示好友的分类，单击某一个分类的链接可以显示该分类下的好友。gvFriend控件显示当前分类（dlCategory控件所选择的分类）

11、下的好友的用户名。ibtAdd控件显示为“添加”按钮，单击该按钮跳转到添加好友的页面AddFriend.aspx。,2初始化 MyFriend.aspx页面的初始化功能由Page_Load(object sender, EventArgs e)事件和BindPageData()函数实现，具体步骤如下所示。 （1）Page_Load(object sender, EventArgs e)事件从Session对象中获取当前登录用户的ID值，并保存在userID变量中。 （2）调用BindPageData()方法在dlCategory控件中显示分类，并在gvFriend控件显示当前分类下的好友。 （

12、3）创建XiaoneiDB数据库的上下文对象db。 （4）调用Where方法从Category查询数据，并作为dlCategory控件的数据源，同时绑定该控件的数据。 （5）如果dlCategory控件的项数量大于0，则设置第一项为选择项。 （6）使用“from f in db.Friend join u in db.User on f.FriendID equals u.ID where f.CategoryID.Value.ToString() = dlCategory.SelectedValue.ToString() select u;”查询表达式查询当前分类下的好友，并作为gvFrie

13、nd控件的数据源，同时绑定该控件的数据。,3事件设计 用户单击dlCategory控件中每一个分类的链接时，将触发dlCategory控件的ItemCommand事件：dlCategory_ItemCommand(object source,DataListCommandEventArgs e)。具体步骤如下所示。 （1）设置当前项为选择项。 （2）创建XiaoneiDB数据库的上下文对象db。 （3）使用“from f in db.Friend join u in db.User on f.FriendID equals u.ID where f.Category ID.Value.ToSt

14、ring() = e.CommandArgument.ToString() select u;”查询表达式查询当前分类下的好友，并作为gvFriend控件的数据源，同时绑定该控件的数据。 用户单击MyFriend.aspx页面中的“添加”按钮（ibtAdd控件）时，将触发ibtAdd控件的Click事件：ibtAdd_Click(object sender,ImageClickEventArgs e)。该事件实现跳转到添加好友的页面MyFriend.aspx，程序代码如下： protected void ibtAdd_Click(object sender,ImageClickEventArg

15、s e) Response.Redirect(“/Web/AddFriend.aspx“); ,27.2.4 添加好友,添加好友由AddFriend.aspx页面实现。该页面为用户提供添加好友的功能。 1界面设计 在下述程序代码中，AddFriend.aspx页面声明了1个DropDownList控件、1个TextBox控件、1个Button控件、1个GridView控件和1个ImageButton控件，它们的ID属性的值分别为ddlCategory、tbUsername、ibtSearch、gvUser和ibtCommit。ddlCategory控件以下拉列表的方式显示分类。tbUserna

16、me控件供用户输入被查找的用户名。ibtSearch控件执行查找功能，gvUser控件显示查找的结果。ibtCommit控件显示为“提交”按钮，单击该按钮，可以将用户选择的用户设置为好友。 2初始化 AddFriend.aspx页面的初始化功能由Page_Load(object sender, EventArgs e)事件和BindPageData()函数实现，具体步骤如下所示。 （1）Page_Load(object sender, EventArgs e)事件从Session对象中获取当前登录用户的ID值，并保存在userID变量中。 （2）调用BindPageData()方法在dlCat

17、egory控件中显示分类。 （3）创建XiaoneiDB数据库的上下文对象db。 （4）调用Where方法从Category查询数据，并作为dlCategory控件的数据源，同时绑定该控件的数据。在绑定ddlCategory控件的数据时，需要设置DataTextField和DataValueField属性的值分别为Name和ID。,3事件设计 用户单击AddFriend.aspx页面中的“查找”按钮（ibtSearch控件）时，将触发ibtSearch控件的Click事件：ibtSearch_Click(object sender,EventArgs e)。 ibtSearch_Click(o

18、bject sender,EventArgs e)事件实现查找好友的功能，并将查找结果显示在gvUser控件中，具体步骤如下所示。 （1）创建XiaoneiDB数据库的上下文对象db。 （2）调用Where方法从User表中查询数据，并作为gvUser控件的数据源，同时绑定该控件的数据，即将查询结果显示在gvUser控件中。 用户单击AddFriend.aspx页面中的“提交”按钮（ibtCommit控件）时，将触发ibtCommit控件的Click事件：ibtCommit_Click(object sender,ImageClickEventArgs e)。 单击事件实现将好友保存到数据库中

19、的功能。具体步骤如下所示。 （1）创建XiaoneiDB数据库的上下文对象db。 （2）使用foreach语句遍历gvUser控件的每一行，并找到cbUser控件。 （3）如果cbUser控件的Checked属性的值为true，则创建Friend类的实例friend。 （4）设置friend实例的MyID、FriendID、CreateDate、Flag、CategoryID等属性的值。 （5）调用InsertOnSubmit()方法将friend实例插入到Friend表中。 （6）调用db实例的SubmitChanges()方法将上述操作提交到数据库。,27.2.5 我的相册,我的相册由My

20、Photo.aspx页面实现。该页面按照系统默认的分类显示当前登录用户的照片。 1界面设计 在下述程序代码中，MyPhoto.aspx页面声明了1个DataList控件、1个GridView控件和1个ImageButton控件，它们的ID属性的值分别为dlCategory、gvPhoto和ibtAdd。dlCategory控件以水平排列方式显示照片的分类，单击某一个分类的链接可以显示该分类下的照片。gvPhoto控件显示当前分类（dlCategory控件所选择的分类）下的照片。ibtAdd控件显示为“添加”按钮，单击该按钮跳转到添加照片的页面AddPhoto.aspx。 2初始化 MyFrie

21、nd.aspx页面的初始化功能由Page_Load(object sender, EventArgs e)事件和BindPageData()函数实现，具体步骤如下所示。,（1）Page_Load(object sender, EventArgs e)事件从Session对象中获取当前登录用户的ID值，并保存在userID变量中。 （2）调用BindPageData()方法在dlCategory控件中显示分类，并在gvPhoto控件显示当前分类下的照片。 （3）创建XiaoneiDB数据库的上下文对象db。 （4）调用Where方法从Category查询数据，并作为dlCategory控件的数据

22、源，同时绑定该控件的数据。 （5）如果dlCategory控件的项数量大于0，则设置第一项为选择项。 （6）使用“db.Photo.Where(p = p.CategoryID.Value.ToString() = dlCategory.SelectedValue.ToString();”查询表达式查询当前分类分类下的照片，并作为gvPhoto控件的数据源，同时绑定该控件的数据。,3事件设计 用户单击dlCategory控件中每一个分类的链接时，将触发dlCategory控件的ItemCommand事件：dlCategory_ItemCommand(object source,DataList

23、CommandEventArgs e)。具体步骤如下所示。 （1）设置当前项为选择项。 （2）创建XiaoneiDB数据库的上下文对象db。 （3）使用Where方法从Photo表中获取数据，并作为gvPhoto控件的数据源，同时绑定该控件的数据。 用户单击MyPhoto.aspx页面中的“添加”按钮（ibtAdd控件）时，将触发ibtAdd控件的Click事件：ibtAdd_Click(object sender,ImageClickEventArgs e)。该事件实现跳转到添加照片的页面UploadPhoto.aspx，程序代码如下： protected void ibtAdd_Click

24、(object sender,ImageClickEventArgs e) Response.Redirect(“/Web/UploadPhoto.aspx“); ,27.2.6 上传照片,上传照片由UploadPhoto.aspx页面实现。该页面为用户提供上传照片的功能。照片文件保存到硬盘中，照片信息保存到数据库。 1界面设计 在下述程序代码中，UploadPhoto.aspx页面声明了1个DropDownList控件、1个FileUpload控件、1个Label控件和1个ImageButton控件，它们的ID属性的值分别为ddlCategory、fuPhoto、lbMessage和ibtC

25、ommit。ddlCategory控件以下拉列表方式显示分类。fuPhoto控件为用户提供选择被上传的照片，并实现上传照片的功能。lbMessage控件显示上传照片操作的结果。ibtCommit控件显示为“提交”按钮，单击该按钮，实现上传照片的功能。,2初始化 UploadPhoto.aspx页面的初始化功能由Page_Load(object sender, EventArgs e)事件和BindPageData()函数实现，具体步骤如下： （1）Page_Load(object sender, EventArgs e)事件从Session对象中获取当前登录用户的ID值，并保存在userID变

26、量中。 （2）调用BindPageData()方法在dlCategory控件中显示分类。 （3）创建XiaoneiDB数据库的上下文对象db。 （4）调用Where方法从Category查询数据，并作为dlCategory控件的数据源，同时绑定该控件的数据。在绑定ddlCategory控件的数据时，需要设置DataTextField和DataValueField属性的值分别为Name和ID。,3事件设计 用户单击UploadPhoto.aspx页面中的“提交”按钮（ibtCommit控件）时，将触发ibtCommit控件的Click事件：ibtCommit_Click(object sende

27、r,ImageClickEventArgs e)。 单击事件实现将照片保存到数据库中的功能，具体步骤如下所示。 （1）判断用户是否选择被上传的照片。如果为选择，则终止该事件。 （2）获取被上传照片的类型、大小。 （3）调用MyXiaoneiSystem类的静态方法CreateDateTimeString()创建基于当前时间的文件名，并获取被上传照片的扩展名，最后构成保存新文件的地址，保存为url变量。 （4）将url映射为物理路径，并保存为fullPath变量。 （5）判断被上传的照片是否存在。如果已经存在，则终止该事件，并在lbMessage控件中显示消息。 （6）调用fuPhoto控件的S

28、aveAs()方法将照片保存到服务器的硬盘上。 （7）创建XiaoneiDB数据库的上下文对象db。 （8）创建Photo类的实例photo。 （9）设置photo实例的CategoryID、Createate、Name、Type、Size、Url等属性的值。 （10）调用InsertOnSubmit()方法将photo实例插入到Photo表中。 （11）调用db实例的SubmitChanges()方法将上述操作提交到数据库。,27.2.7 我的日志,我的日志由MyLog.aspx页面实现。该页面按照系统默认的分类显示当前登录用户的日志。 1界面设计 在下述程序代码中，MyLog.aspx页面

29、声明了1个DataList控件、1个GridView控件和1个ImageButton控件，它们的ID属性的值分别为dlCategory、gvLog和ibtAdd。dlCategory控件以水平排列方式显示日志的分类，单击某一个分类的链接可以显示该分类下的日志。gvLog控件显示当前分类（dlCategory控件所选择的分类）下的日志。ibtAdd控件显示为“添加”按钮，单击该按钮跳转到添加日志的页面AddLog.aspx。,2初始化 MyLog.aspx页面的初始化功能由Page_Load(object sender, EventArgs e)事件和BindPageData()函数实现，具体步

30、骤如下所示。 （1）Page_Load(object sender, EventArgs e)事件从Session对象中获取当前登录用户的ID值，并保存在userID变量中。 （2）调用BindPageData()方法在dlCategory控件中显示分类，并在gvLog控件显示当前分类下的好友。 （3）创建XiaoneiDB数据库的上下文对象db。 （4）调用Where方法从Category查询数据，并作为dlCategory控件的数据源，同时绑定该控件的数据。 （5）如果dlCategory控件的项数量大于0，则设置第一项为选择项。 （6）使用“db.Log.Where(l = l.Cate

31、goryID.Value.ToString() = dlCategory.SelectedValue.ToString();”查询表达式查询当前分类下的日志，并作为gvLog控件的数据源，同时绑定该控件的数据。,3事件设计 用户单击dlCategory控件中每一个分类的链接时，将触发dlCategory控件的ItemCommand事件：dlCategory_ItemCommand(object source,DataListCommandEventArgs e)。具体步骤如下所示。 （1）设置当前项为选择项。 （2）创建XiaoneiDB数据库的上下文对象db。 （3）使用Where方法从Lo

32、g表中获取数据，并作为gvLog控件的数据源，同时绑定该控件的数据。 用户单击MyLog.aspx页面中的“添加”按钮（ibtAdd控件）时，将触发ibtAdd控件的Click事件：ibtAdd_Click(object sender,ImageClickEventArgs e)。该事件实现跳转到添加日志的页面AddLog.aspx，程序代码如下： protected void ibtAdd_Click(object sender,ImageClickEventArgs e) Response.Redirect(“/Web/AddLog.aspx“); ,27.2.8 添加日志,添加日志由Ad

33、dLog.aspx页面实现。该页面为用户提供输入日志标题和内容，并提交到数据库的功能。 1界面设计 在下述程序代码中，AddLog.aspx页面声明了1个DropDownList控件、2个TextBox控件和1个ImageButton控件，它们的ID属性的值分别为ddlCategory、tbName、tbBody和ibtCommit。ddlCategory控件以下拉列表方式显示分类。tbName和tbBody控件分别用来供用户输入日志的标题和内容。ibtCommit控件显示为“提交”按钮，单击该按钮，将用户输入的日志的标题和内容提交到数据库中。,2初始化 AddLog.aspx页面的初始化功能

34、由Page_Load(object sender, EventArgs e)事件和BindPageData()函数实现，具体步骤如下所示。 （1）Page_Load(object sender, EventArgs e)事件从Session对象中获取当前登录用户的ID值，并保存在userID变量中。 （2）调用BindPageData()方法在dlCategory控件中显示分类。 （3）创建XiaoneiDB数据库的上下文对象db。 （4）调用Where方法从Category查询数据，并作为dlCategory控件的数据源，同时绑定该控件的数据。在绑定ddlCategory控件的数据时，需要设

35、置DataTextField和DataValueField属性的值分别为Name和ID。,3事件设计 用户单击AddLog.aspx页面中的“提交”按钮（ibtCommit控件）时，将触发ibtCommit控件的Click事件：ibtCommit_Click(object sender,ImageClickEventArgs e)。 在下述程序代码中，ibtCommit_Click(object sender,ImageClickEventArgs e)事件实现将日志保存到数据库中的功能，具体步骤如下所示。 （1）创建XiaoneiDB数据库的上下文对象db。 （2）创建Log类的实例log。 （3）设置log实例的Name、Body、CreateDate、CategoryID等属性的值。 （4）调用InsertOnSubmit()方法将log实例插入到Log表中。 （5）调用db实例的SubmitChanges()方法将上述操作提交到数据库。,27.3 小 结,本章主要介绍了使用C#开发校内网的方法。使用的开发环境是Visual Studio 2010开发环境。该校内网主要包括功能设计、数据库设计、以及登录、主页面、好友、相册、日志等功能的开发方法。其中，重点是掌握使用Web窗体编程的方法，为后续编写功能强大的ASP.NET网站奠定基础。,