[ASP.NET-IX] 控件显示切换 交互数据库

开发工具版本:VS2008

平台版本:.NET Framework 3.5

应用程序类型:ASP .NET网站


1 目标

(1) 界面首先显示DropDwonList控件、“新增”、“删除”按钮。DropDwonList显示数据库表tb_p001中的数据。

(2) 点击“删除”按钮,删除数据库表tb_p001中DropDwonList当前所显示的数据,并刷新DropDwonList中的内容。

(3) 点击“新增”按钮,切换TexBox控件和“确定”按钮显示。

(4) 点“确定”按钮后,将TextBox中的内容插入tb_p001数据库表中;刷新DropDwonList控件的内容,重新显示“新增”按钮和DropDwonList控件。


2 建数据库表

2.1 连接SQL Server2008

开始>> Microsoft SQL Server 2008 >> SQL Server Management Studio,连接(登录)数据库。


2.2 新建数据库ConShift

在对象资源管理器中展开,选中“数据库”>> 新建数据库。设置好数据库名(ConShift)、自动增长方式(默认)、路径(默认)后点击确定。


2.3 新建表tb_p001

选中ConShift数据库下的“表”  >> 右键>> 新建表>> 列名(platform_name),数据类型(nchar(20),搜“SQLServer 2008数据类型”),允许Null值。Ctrl+ s,输入表名“tb_p001”,点击确定保存。


2.4 编辑表tb_p001内容

选中新建的表tb_p001>>  右键>> 编辑前200行>> 输入几行内容,供读给DropDwonList显示。

[ASP.NET-IX] 控件显示切换 交互数据库_第1张图片

Figure1. tb_p001数据库表内容


3 新建ASP.NET工程

开始>> 所有程序>> Microsoft Visual Studio 2008 >> 文件>> 新建>> 网站>> ASP .NET网站(.NETFramework 3.5 + Visual C#)。令工程名为ControlShift。


4 前台

4.1 创建控件

按照目标中的描述,创建控件如下:

Table 1.  *.aspx

1.         <table>

2.         <tr>

3.                  <td colspan="2">

4.                            <h1>控件切换,交互数据库</h1>

5.                  </td>

6.         </tr>

7.                

8.         <tr>

9.                  <td >

10.                    平台: 

11.              </td>

12.             

13.              <td >

14.                        <asp:DropDownList ID="ddl_1" runat="server" Width="100px"

15.                                 DataSourceID="SqlData_ConShift" DataTextField="platform"

16.                                 DataValueField="platform">

17.                        </asp:DropDownList>

18.                       

19.                       

20.                        <asp:TextBox ID="tb_1" runat="server" Visible="false" Width="100px">

21.                        </asp:TextBox>

22.                        <asp:Button ID="bt_1" runat="server" Visible="false" Text="确定" Height="20px" Width="30px" />

23.                     

24.      

25.                        <asp:ImageButton ID="ib_add" runat="server" Height="20px"  Width="20px"

26.                                 ImageUrl="~/images/add.jpg"/>

27.                        <asp:ImageButton ID="ib_del" runat="server" Height="20px" Width="20px"

28.                                 ImageUrl="~/images/del.jpg"/>

29.              </td>

30.     </tr>

31.     </table>

32.      

33.     <table>

34.     <tr>

35.              <td>

36.                        <asp:SqlDataSource ID="SqlData_ConShift" runat="server"

37.                                 ConnectionString="<%$ ConnectionStrings:ConShiftConnectionString %>"

38.                                 SelectCommand="SELECT [platform] FROM [tb_p001]">

39.                        </asp:SqlDataSource>

40.              </td>

41.     </tr>

42.     </table>


[1] 数据库配置

因为在以上前台代码中为DropDwonList控件指定了数据源。故而需要在web.config中配置与数据源相关的节点信息(在<appSettings/>后):

Table 2. web.config

1.         <connectionStrings>

2.         <add name="ConShiftConnectionString" connectionString="Data Source=MY-SYSTEM;Initial Catalog=ConShift;Integrated Security=True"

3.             providerName="System.Data.SqlClient" />

4.         </connectionStrings>

搜“ASP.NET  web.config connectionStrings”,然后参考。


[2] 图片路径

以上代码中的ImageButton中ImageUrl中所指的路径为:

[ASP.NET-IX] 控件显示切换 交互数据库_第2张图片

Figure2. ImageButton图片路径

[3] 设计模式下的效果

以上前台代码对应的设计模式下的效果为(可从工具箱中拖):

[ASP.NET-IX] 控件显示切换 交互数据库_第3张图片

Figure3. *.aspx设计模式下的显示


4.2 使用CSS控制页面

CSS控制页面的方法有四种:分别为行内样式,内嵌式,链接式和导入样式。对于稍微庞大的网页我们都会使用链接样式,这是因为其将HTML和CSS分开编写,便于后期维护,而且明朗清晰。


[1] CSS行内样式

为table内的<td>…</td>标记添加style属性,它类似于这样:

1.         <td style="width:50px; border:none;">

2.             平台: 

3.         </td>

style内的CSS属性对可根据每个<td>…</td>内的内容设定。


[2] CSS内嵌样式

在<head>…</head>标记内声明CSS:

1.         <head runat="server">

2.             <title></title>

3.            <style type="text/css">

4.                 h1{

5.                         color:Blue;

6.                         font-size:medium;

7.                         font-family:@楷体;

8.                 }

9.                 

10.               .table_class1{

11.                  background-color:inherit;

12.                  font-size:small;

13.                  font-style:normal;

14.                  font-weight:bold;

15.                  border:none;  

16.             }

17.             

18.             

19.        </style>

20.        

21.     </head>

然后将这些CSS声明放在<body>…</body>内需要对应CSS声明的class属性中,如两个table都需“background-color:inherit;font-size:small;font-style:normal;font-weight:bold;border:none;”这样的CSS对,则可设置两个table的class=” table_class1”。


经这样设置过后的页面在设计模式下的效果为:


运行前台代码,它在网页上面的显示为:

[ASP.NET-IX] 控件显示切换 交互数据库_第4张图片

5 后台

5.1 指定后台函数

根据此次的目标,当DropDwonList控件改变选择内容时后台代码要改变此控件当前显示的内容;点击“确定”、“增加”、“删除”等按钮时,也应该有对应功能的代码。这就需要为每个控件指定“指定事件”下的事件函数,在ASP.NET前台为控件指定事件(其它属性也一样)的方法如下:

[ASP.NET-IX] 控件显示切换 交互数据库_第5张图片

Figure4. 为ASP.NET 控件增添属性

回车后,再对事件指定事件函数:OnselectedIndexChanged=”dd1_1_OnSekectedIndexChanged”,如果控件有AutoPosBack属性,则在控件有后台函数的情况下需要将AutoPosBack设置为true。


按照Figure 4 中的方式给其它控件也指定相应的事件和其函数,然后通过以下方式使前台拥有各个控件的各个事件函数的框架:

[ASP.NET-IX] 控件显示切换 交互数据库_第6张图片

Figure5. 生成后台函数


先在前台设计模式下选中相应的控件,然后选中闪电符号,再在对应事件后面双击就可以在后台中生成函数框架:

1.         public partial class _Default : System.Web.UI.Page

2.         {

3.                   protected void Page_Load(object sender, EventArgs e)

4.                   {

5.                   }

6.                   protected void dd1_1_OnSelectedIndexChanged( object sender, EventArgs e )

7.                   {

8.                   }

9.                   protected void bt_1_OnClick( object sender, EventArgs e )

10.               {

11.               }

12.               protected void ib_add_OnClick( object sender, ImageClickEventArgs e )

13.               {

14.               }

15.               protected void ib_del_OnClick( object sender, ImageClickEventArgs e )

16.               {

17.               }

18.     }


那么,接下来就只需要在后台内编写目标中所描述功能的代码就可以了。


5.2 编写后台函数

[1] “增加”按钮响应函数

1.         protected void ib_add_OnClick( object sender, ImageClickEventArgs e )

2.          {

3.                   //隐藏原来的控件,显示新控件

4.                   ddl_1.Visible = false;

5.                   ib_del.Visible = false;

6.                   ib_add.Visible = false;

7.                   tb_1.Visible = true;

8.                   bt_1.Visible = true;        

9.          }

 

[2] “删除”按钮响应函数

1.         protected void ib_del_OnClick( object sender, ImageClickEventArgs e )

2.          {

3.                   //创建连接对象,设置连接字符串

4.                   SqlConnection conn = new SqlConnection( );

5.                   conn.ConnectionString = ConfigurationManager.ConnectionStrings["ConShiftConnectionString"].ConnectionString;

6.          

7.                   //将ddl中显示的项删掉

8.                   string str = ddl_1.Text;

9.                   ddl_1.Items.Remove( str );

10.      

11.      

12.               //删除数据库中在dd_l中显示的项

13.               string sqlstr = "DELETE FROM dbo.tb_p001 WHERE platform =" + "'" + ddl_1.Text + "'";

14.      

15.               //创建命令对象,设置查询语句,添加连接

16.               SqlCommand insertCmd = new SqlCommand( );

17.      

18.      

19.               //对SQL Server 2008 1012_books数据库 book_table的SQL插入语句

20.               insertCmd.CommandText = sqlstr;

21.      

22.               insertCmd.Connection = conn;

23.               conn.Open( );

24.               insertCmd.ExecuteNonQuery( );

25.               conn.Close( );

26.               conn.Dispose( );

27.      }

 

[3] “确定”按钮函数

1.         protected void bt_1_OnClick( object sender, EventArgs e )

2.          {

3.                   //隐藏原来的控件,显示新控件

4.                   tb_1.Visible = false;

5.                   bt_1.Visible = false;

6.                   ddl_1.Visible = true;

7.                   ib_del.Visible = true;

8.                   ib_add.Visible = true;

9.          

10.               string str = tb_1.Text;

11.      

12.               if ("" == str) return;

13.      

14.               //创建连接对象,设置连接字符串

15.               SqlConnection conn = new SqlConnection( );

16.               conn.ConnectionString = ConfigurationManager.ConnectionStrings["ConShiftConnectionString"].ConnectionString;

17.      

18.               //将ddl中显示的项删掉

19.               

20.               ddl_1.Items.Add( str );

21.      

22.      

23.               //删除数据库中在dd_l中显示的项

24.               string sqlstr = "INSERT INTO dbo.tb_p001 " + "(" + "platform" + ")" + "VALUES" + "(" + "'" + tb_1.Text + "'" + ")";

25.               Label1.Text = sqlstr;

26.      

27.               //创建命令对象,设置查询语句,添加连接

28.               SqlCommand insertCmd = new SqlCommand( );

29.      

30.      

31.               //对SQL Server 2008 1012_books数据库 book_table的SQL插入语句

32.               insertCmd.CommandText = sqlstr;

33.      

34.               insertCmd.Connection = conn;

35.               conn.Open( );

36.               insertCmd.ExecuteNonQuery( );

37.               conn.Close( );

38.               conn.Dispose( );

39.      

40.               //清空textbox上次的显示

41.               tb_1.Text = "";

42.      }

[4] 代码说明

  • 各函数中除了自定义对象,其它对象都是后台控件的ID号。
  • “确定”和“删除”按钮两个函数与SQL Server 2008交互使用了同一种方法。还有其它与数据库交互的方式
  • 引用连接SQL Server 2008的类需要引用新的命名空间。



[2015.01.09]

ASP.NET Note Over.

你可能感兴趣的:([ASP.NET-IX] 控件显示切换 交互数据库)