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

来源：互联网发布：简单的php网页编辑：程序博客网时间：2024/05/01 12:51

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代码．