第三篇：使用Visual Studio 2008实现基本的页面交互

本系列目录
对第一篇中的数据库做一下修正脚本如下:

Code
if exists (select * from sysobjects where id = OBJECT_ID('[Citys]') and OBJECTPROPERTY(id, 'IsUserTable') = 1) DROP TABLE [Citys] 
 CREATE TABLE [Citys] (  [CityID] [int] IDENTITY (1, 1) NOT NULL , [Name] [nchar] (10) NULL ,  [ProvinceID] [int] NULL , [Code] [nchar] (20) NOT NULL )
 ALTER TABLE [Citys] WITH NOCHECK ADD CONSTRAINT [PK_Citys] PRIMARY KEY  NONCLUSTERED ( [CityID] )

 SET IDENTITY_INSERT [Citys] ON

 INSERT [Citys] ( [CityID] , [Name] , [ProvinceID] , [Code] ) VALUES ( 6 , '济南     ' , 1 , 'jinan              ' )
 INSERT [Citys] ( [CityID] , [Name] , [ProvinceID] , [Code] ) VALUES ( 7 , '青岛     ' , 1 , 'qingdao            ' )
 INSERT [Citys] ( [CityID] , [Name] , [ProvinceID] , [Code] ) VALUES ( 8 , '泰安     ' , 1 , 'taian              ' )

 SET IDENTITY_INSERT [Citys] OFF

 if exists (select * from sysobjects where id = OBJECT_ID('[Modules]') and OBJECTPROPERTY(id, 'IsUserTable') = 1) DROP TABLE [Modules] 
 CREATE TABLE [Modules] (  [ModuleID] [int] IDENTITY (1, 1) NOT NULL , [Name] [nchar] (20) NULL , [Comments] [nchar] (50) NULL , [Code] [nchar] (20) NOT NULL )
 ALTER TABLE [Modules] WITH NOCHECK ADD CONSTRAINT [PK_Modules] PRIMARY KEY  NONCLUSTERED ( [ModuleID] )

 SET IDENTITY_INSERT [Modules] ON

 INSERT [Modules] ( [ModuleID] , [Name] , [Code] ) VALUES ( 1 , '用户管理           ' , 'ManageModule       ' )
 INSERT [Modules] ( [ModuleID] , [Name] , [Comments] , [Code] ) VALUES ( 2 , '用户组管理22       ' , '                                                 ' , 'ModulesManager     ' )

 SET IDENTITY_INSERT [Modules] OFF

 if exists (select * from sysobjects where id = OBJECT_ID('[Provinces]') and OBJECTPROPERTY(id, 'IsUserTable') = 1) DROP TABLE [Provinces] 
 CREATE TABLE [Provinces] (  [ProvinceID] [int] IDENTITY (1, 1) NOT NULL , [Name] [nchar] (10) NULL , [Code] [nchar] (20) NOT NULL )
 ALTER TABLE [Provinces] WITH NOCHECK ADD CONSTRAINT [PK_Provinces] PRIMARY KEY  NONCLUSTERED ( [ProvinceID] )

 SET IDENTITY_INSERT [Provinces] ON

 INSERT [Provinces] ( [ProvinceID] , [Name] , [Code] ) VALUES ( 1 , '山东     ' , 'shandong           ' )
 INSERT [Provinces] ( [ProvinceID] , [Name] , [Code] ) VALUES ( 2 , '北京     ' , 'beijing            ' )
 INSERT [Provinces] ( [ProvinceID] , [Name] , [Code] ) VALUES ( 3 , '上海     ' , 'shanghai           ' )

 SET IDENTITY_INSERT [Provinces] OFF

 if exists (select * from sysobjects where id = OBJECT_ID('[sysdiagrams]') and OBJECTPROPERTY(id, 'IsUserTable') = 1) DROP TABLE [sysdiagrams] 
 CREATE TABLE [sysdiagrams] ( [name] [nvarchar] (128) NOT NULL ,  [principal_id] [int] NOT NULL ,  [diagram_id] [int] IDENTITY (1, 1) NOT NULL ,  [version] [int] NULL , [definition] [image] NULL )
 ALTER TABLE [sysdiagrams] WITH NOCHECK ADD CONSTRAINT [PK_sysdiagrams] PRIMARY KEY  NONCLUSTERED ( [diagram_id] )
 CREATE UNIQUE INDEX [UK_principal_name] ON [sysdiagrams] ( principal_id ) 
 CREATE UNIQUE INDEX [UK_principal_name] ON [sysdiagrams] ( name ) 

 if exists (select * from sysobjects where id = OBJECT_ID('[UserGroups]') and OBJECTPROPERTY(id, 'IsUserTable') = 1) DROP TABLE [UserGroups] 
 CREATE TABLE [UserGroups] (  [GroupID] [int] IDENTITY (1, 1) NOT NULL , [Name] [nchar] (10) NULL , [Comments] [nchar] (100) NULL ,  [ModuleID] [int] NULL , [Code] [nchar] (20) NULL )
 ALTER TABLE [UserGroups] WITH NOCHECK ADD CONSTRAINT [PK_UserGroups] PRIMARY KEY  NONCLUSTERED ( [GroupID] )

 SET IDENTITY_INSERT [UserGroups] ON

 INSERT [UserGroups] ( [GroupID] , [Name] , [Comments] , [ModuleID] , [Code] ) VALUES ( 1 , '普通用户 ' , '普通用户                                                                                           ' , 1 , 'pt                 ' )
 INSERT [UserGroups] ( [GroupID] , [Name] , [Comments] , [ModuleID] , [Code] ) VALUES ( 2 , '管理员1  ' , '管理员                                                                                             ' , 1 , 'admin              ' )

 SET IDENTITY_INSERT [UserGroups] OFF

 if exists (select * from sysobjects where id = OBJECT_ID('[UserGroupsModulesRelations]') and OBJECTPROPERTY(id, 'IsUserTable') = 1) DROP TABLE [UserGroupsModulesRelations] 
 CREATE TABLE [UserGroupsModulesRelations] (  [GroupID] [int] NOT NULL ,  [ModuleID] [int] NOT NULL )
 ALTER TABLE [UserGroupsModulesRelations] WITH NOCHECK ADD CONSTRAINT [PK_UserGroupsModulesRelations] PRIMARY KEY  NONCLUSTERED ( [GroupID] )
 CREATE UNIQUE CLUSTERED INDEX [PK_UserGroupsModulesRelation] ON [UserGroupsModulesRelations] ( ModuleID ) 

 if exists (select * from sysobjects where id = OBJECT_ID('[Users]') and OBJECTPROPERTY(id, 'IsUserTable') = 1) DROP TABLE [Users] 
 CREATE TABLE [Users] (  [UserID] [int] IDENTITY (1, 1) NOT NULL , [UserName] [nchar] (50) NULL , [Password] [nchar] (50) NULL , [NickName] [nchar] (50) NULL ,  [GroupID] [int] NULL ,  [ProvinceID] [int] NULL ,  [CityID] [int] NULL , [EMail] [nchar] (50) NULL , [Question] [nchar] (20) NULL , [Answer] [nchar] (20) NULL , [Birthday] [nchar] (8) NULL , [RealName] [nchar] (10) NULL , [Sex] [bit] NULL )
 ALTER TABLE [Users] WITH NOCHECK ADD CONSTRAINT [PK_Users] PRIMARY KEY  NONCLUSTERED ( [UserID] )

 SET IDENTITY_INSERT [Users] ON

 INSERT [Users] ( [UserID] , [UserName] , [Password] , [GroupID] , [ProvinceID] , [CityID] ) VALUES ( 2 , 'admin                                            ' , 'admin                                            ' , 1 , 1 , 6 )
 INSERT [Users] ( [UserID] , [UserName] , [Password] , [NickName] , [EMail] , [Question] , [Answer] , [Birthday] , [Sex] ) VALUES ( 3 , 'tianyamoon                                       ' , '19820603                                         ' , '岳亮                                             ' , '[email protected]                                 ' , '我就读的第一所学校的' , '                   ' , '1982010' , 0 )
 INSERT [Users] ( [UserID] , [UserName] , [Password] , [NickName] , [EMail] , [Question] , [Answer] , [Birthday] , [Sex] ) VALUES ( 4 , 'tianyamoon                                       ' , '19820603                                         ' , '                                                 ' , '[email protected]                                 ' , '我就读的第一所学校的' , '                   ' , '1982010' , 0 )

 SET IDENTITY_INSERT [Users] OFF

下面开始本节内容：

打开上节创建的项目，添加一个新的web页面ModuleManager.aspx。将一个GridView拖动到设计器，将其命名为GridViewModules。在设计视图使用快捷键F7打开代码视图，找到Page_Load函数，完成其中代码。

        SecurityDataContext db;
         protected   void  Page_Load( object  sender, EventArgs e)
         {

            db = new SecurityDataContext();
            if (!IsPostBack)
            {
                BindGrid();
            }
        }      
private   void  BindGrid()
         {
            SecurityDataContext db = new SecurityDataContext();
            this.GridViewModules.DataSource = db.Modules.GetNewBindingList();
            this.GridViewModules.DataBind();
        }

说明：BindGrid实现了GridView的数据绑定。

在属性面板中设置Columns属性，打开Fields窗口如图1.

 

图1

 

在图中红色区域选择要添加的列，点击add按钮列将被添加到绿色区域，使用蓝色区域的按钮来对列排列删除。选中绿色区域的列可在紫色区域的属性编辑区设置该列DataField属性。设计完成的的html如下。

         < asp:GridView  ID ="GridViewModules"  runat ="server"  AutoGenerateColumns ="False" >
             < Columns >
                 < asp:BoundField  DataField ="Code"  HeaderText ="Code"   />
                 < asp:BoundField  DataField ="Name"  HeaderText ="Name"   />
                 < asp:BoundField  DataField ="Comments"  HeaderText ="Comments"   />
                 < asp:CommandField  ShowDeleteButton ="True"   />
                 < asp:CommandField  ShowEditButton ="True"  ShowInsertButton ="True"   />
             </ Columns >
         </ asp:GridView >

 

右键点击GridView控件，选择属性，打开属性面板，如图2.

 

图2

 双击红色区域生成RowEditing的事件处理函数。同样的方法生成RowUpdating、RowDeleting、RowCanceling事件处理函数。转到C#代码页面。完成刚才生成的GridViewModules_RowEditing函数，完成代码如下。

         protected   void  GridViewModules_RowEditing( object  sender, GridViewEditEventArgs e)
         {
            this.GridViewModules.EditIndex = e.NewEditIndex;
            BindGrid();
        }

该段代码在点击编辑按钮后将列变为可编辑状态。

         protected   void  GridViewModules_RowCancelingEdit( object  sender, GridViewCancelEditEventArgs e)
         {
            GridViewModules.EditIndex = -1;
            BindGrid();
        }

 说明：重新将可编辑部分置为不可编辑。

protected   void  GridViewModules_RowUpdating( object  sender, GridViewUpdateEventArgs e)
         {
            var a = db.Modules.Where(module => module.ModuleID.ToString() == GridViewModules.DataKeys[e.RowIndex].Values[0].ToString().Trim()).First();
            a.Name = ((TextBox)GridViewModules.Rows[e.RowIndex].Cells[1].Controls[0] as TextBox).Text;
            a.Code = ((TextBox)GridViewModules.Rows[e.RowIndex].Cells[0].Controls[0] as TextBox).Text;
            a.Comments = ((TextBox)GridViewModules.Rows[e.RowIndex].Cells[2].Controls[0] as TextBox).Text;
            db.SubmitChanges();
            GridViewModules.EditIndex = -1;
            BindGrid();
}

说明：更新修改的行。

         protected   void  GridViewModules_RowDeleting( object  sender, GridViewDeleteEventArgs e)
         {
            var a = db.Modules.Where(module => module.ModuleID.ToString() == GridViewModules.DataKeys[e.RowIndex].Values[0].ToString().Trim()).First();
            db.Modules.DeleteOnSubmit(a);
            db.SubmitChanges();
            BindGrid();
        }

 

说明：删除当前行。
F5执行代码效果如图3

 

图3

 现在还缺少添加功能。
向界面添加3个TextBox控件并设置其ID，再添加一个按钮。其html代码为

         </ div >
         < div > Name: < asp:TextBox  ID ="TextBoxName"  runat ="server" ></ asp:TextBox >         
         </ div >
         < div > Comments: < asp:TextBox  ID ="TextBoxComments"  runat ="server" ></ asp:TextBox >         
         </ div >
         < div >
             < asp:Button  ID ="ButtonAdd"  runat ="server"  Text ="添加"   />
         </ div >

为Button添加onclick事件

< asp:Button  ID ="ButtonAdd"  runat ="server"  Text ="添加"  onclick ="ButtonAdd_Click"   />

修改其CS代码

         protected   void  ButtonAdd_Click( object  sender, EventArgs e)
         {
            Modules m = new Modules()
            {
                Code = this.TextBoxCode.Text,
                Name = this.TextBoxName.Text,
                Comments = this.TextBoxComments.Text
            };
            SecurityDataContext db = new SecurityDataContext();
            if (db.Modules.Where(module => module.Code.Trim() == m.Code.Trim()).Count() > 0)//Linq
                throw new Exception("Code不能重复");
            
            db.Modules.InsertOnSubmit(m);
            db.SubmitChanges();
            BindGrid();
            this.TextBoxCode.Text = "";
            this.TextBoxName.Text = "";
            this.TextBoxComments.Text = "";
        }

这样就完成了对Modules的添加、修改、删除操作。

    预告：第四篇：实现用户注册页面
    主要内容数据验证控件的使用。