9.20课下总结Panel、Table、BulletedList控件的使用

ASP.NET的Panel控件

ASP.NET的Panel控件，通过名字我们可以看出这是一个菜单控件，当鼠标移动到指定的位置时，在不影响其他的元素的情况下出现一个菜单，并允许用户进行一些操作。

重要属性

TargetControlID:要显示菜单的目标控件的ID

PopupControlID:作为弹出菜单的控件的ID

HoverCssClass:鼠标移动到目标控件时目标控件的样式

PopupPosition:弹出菜单所在的位置，共有五个值(bottom,top,left,right,center)

OffsetX:菜单距离目标控件的位置--横坐标

OffsetY:菜单距离目标控件的位置--纵坐标

1 创建一个AjaxControlToolKit网站，命名为oec2003_HoverMenu

2 打开默认Default.aspx页，切换到设计视图

3 在页面中添加一个TextBox和一个Panel控件，并在Panel控件中添加三个LinkButton控件，如下

PopDelay:弹出菜单的延迟时间

1.            <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">

2.            <asp:LinkButton ID="LinkButton1" runat="server" OnClick=
"LinkButton1_Click">日期</asp:LinkButton>

3.            <br />

4.            <asp:LinkButton ID="LinkButton3" runat="server" OnClick=
"LinkButton3_Click">时间</asp:LinkButton><br />

5.            <asp:LinkButton ID="LinkButton2" runat="server" OnClick=
"LinkButton2_Click">姓名</asp:LinkButton>

6.            </asp:Panel>

7.            4 在页面中添加HoverMenu控件，并设置其属性，代码如下

8.            <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat=
"server" TargetControlID="TextBox1"

9.            OffsetX="-1" OffsetY="-1" HoverCssClass="hover" PopupControlID=
"Panel1" PopupPosition="bottom">

10.        </ajaxToolkit:HoverMenuExtender>

11.        5 切换到代码视图，在head元素间添加css样式，用来实现鼠标移动到目标控件时的样式，如下

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

13.        .hover

14.        {}{

15.        background-color:blue;

16.        background-repeat:repeat-x;

17.        background-position:left top;

18.        }

19.        </style>

前面在Panel中放置了三个LinkButton控件，点击了LinkButton控件后会在文本框中出现相应的内容，LinkButton的单击事件代码如下

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

2.            {

3.            TextBox1.Text = DateTime.Now.ToShortDateString();

4.            }

5.            protected void LinkButton3_Click(object sender, EventArgs e)

6.            {

7.            TextBox1.Text = DateTime.Now.TimeOfDay.ToString();

8.            }

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

10.        {

11.        TextBox1.Text = "oec2003";

12.        }

保存设计，运行程序，将鼠标移动文本框上时，会发现，文本框的样式变成了我们自定义的样式了，而且还会弹出一个菜单，就是Panel控件

点击菜单中的按钮在文本框中就会出现相应的内容 ，以上介绍ASP.NET的Panel控件。

Asp.Net Table控件动态生成表格操作实例

Asp.Net Table控件动态生成表格操作实例(代码调试通过)

.aspx

<form id="Form1" method="post" runat="server">

<asp:Label id="Label1" style="Z-INDEX: 101; LEFT: 256px; POSITION:

absolute; TOP: 40px" runat="server">Asp.Net Table控件动态生成表格操作实例</asp:Label>

<asp:Button id="Button1" style="Z-INDEX: 105; LEFT: 272px; POSITION:

absolute; TOP: 120px" runat="server"

Text="生 成"></asp:Button>

<asp:Table id="Table1" style="Z-INDEX: 104; LEFT: 272px; POSITION:

absolute; TOP: 160px" runat="server"

GridLines="Both"></asp:Table>

<asp:DropDownList id="DropDownList2" style="Z-INDEX: 103; LEFT:

344px; POSITION: absolute; TOP: 88px"

runat="server">

<asp:ListItem Value="1">1列</asp:ListItem>

<asp:ListItem Value="2">2列</asp:ListItem>

<asp:ListItem Value="3">3列</asp:ListItem>

<asp:ListItem Value="4">4列</asp:ListItem>

<asp:ListItem Value="5">5列</asp:ListItem>

</asp:DropDownList>

<asp:DropDownList id="DropDownList1" style="Z-INDEX: 102; LEFT:

280px; POSITION: absolute; TOP: 88px"

runat="server">

<asp:ListItem Value="1">1行</asp:ListItem>

<asp:ListItem Value="2">2行</asp:ListItem>

<asp:ListItem Value="3">3行</asp:ListItem>

<asp:ListItem Value="4">4行</asp:ListItem>

<asp:ListItem Value="5">5行</asp:ListItem>

</asp:DropDownList>

</form>

.aspx.cs

private void Button1_Click(object sender, System.EventArgs e)

{

int numrows;

int numcells;

int i=0;

int j=0;

int row=0;

TableRow r;

TableCell c;

//产生表格

numrows=Convert.ToInt32(DropDownList1.SelectedValue);

numcells=Convert.ToInt32(DropDownList2.SelectedValue);

for(i=0;i<numrows;i++)

{

r=new TableRow();

if(row/2!=0)

{

r.BorderColor=Color.Red;

}

row+=1;

for(j=0;j<numcells;j++)

{

c=new TableCell();

c.Controls.Add(new LiteralControl

("row"+j+",cell"+i));

r.Cells.Add(c);

}

Table1.Rows.Add(r);

}

}

asp.net2.0中的新增控件BulletedList的一些高级用法

asp.net2.0新增了一个BulletedList控件,通过它可以以列表形式显示数据,而不必再用Repeater,Datalist等实现相同的效果.今天做程序的时候正好用到了这个控件,就把它的一些比较高级一点的用法记录一下.
1.如何实现BulletinList与数据源的绑定?
string strSQL="select * from table";
SqlConnection conn=new SqlConnection("server=(local);database=contract;uid=sa;pwd=sa;");
DataSet ds=new DataSet();
SqlDataAdapter da=new SqlDataAdapter(strSQL,conn);
da.Fill(ds);
DataTable dt=ds.Tables[0];
//以上代码从数据库中取出数据放到DataTable中.
BulletedList bl=new BulletedList();
bl.DataSource = dt; //设置BulletedList的数据源为上面的DataTable

bl.DataTextField = "MODULENAME"; //设置BulletedList中显示的文本字段

bl.DataValueField = "INNERID"; //设置BulletedList的值字段

bl.DataBind(); //进行数据绑定
2.设置BulletedList的显示模式,设置其DisplayMode属性,主要有以下几个值:Text(文本样式)HyperLink(超链接样式),LinkButton(链接按钮样式).
这里我只谈一下LinkButton样式.我们想让点击BulletedList中选中的某一项时执行指定的操作.如何做呢?我们可以在BulletedList中写其Click事件的处理代码即可.那怎么得到BulletedList中点击的那一项的文本和值呢?可以用以下方法:
ListItem li=BulletedList1.Items[e.Index]; //得到BulletedList中选中的项
　　string strID=li.Value; //得到选中项的值
string strText=li.Text; //得到选中项的文本
　　联想：通过BulletedList可以实现新闻列表之类的东西，通过数据绑定可以很容易地实现，通过设置一些属性就可以定义出漂亮的样式，而不必象在php中和asp.net1.1中要自己写好多html代码．