天天看點

BulletedList使用及詳解

BulletedList是一個讓你輕松在頁面上顯示項目符号和編号格式(Bulledted List)的控件。對于ASP.NET 1.x裡要動态顯示Bulledted List時,要麼自己利用HTML的<ol>或<ul>元素構造,要麼就是“殺雞用牛刀”的動用Repeater來顯示。前者過于死闆,後者過于overkill,也許微軟聽到這種聲音,于是ASP.NET 2.0總算搞了個BulletedList出來了。這控件雖然給人不太多注意,但卻看得出微軟确實是在乎“使用者需求”的。BulletedList控件的主要屬性有BulletStyle、DisplayMode、Items和主要事件Click。

l        BulletStyle:項目符号編号樣式值,對應着System.Web.UI.WebControls.BulletStyle枚舉類型值。其共有以下10種選擇項:

1.      Circle:表示項目符号編号樣式設定為“○”空圈圈。

2.      CustomImage:表示項目符号編号樣式設定為自定義圖檔,其圖檔由BulletImageUrl屬性指定。

3.      Disc:表示項目符号編号樣式設定為“●”實圈圈。

4.      LowerAlpha:表示項目符号編号樣式設定為小寫字母格式。如a、b、c、d等26個小寫英文字母。

5.      LowerRoman:表示項目符号編号樣式設定為小寫羅馬數字格式。如i、ii、iii、iv等小寫的羅馬數字。

6.      NotSet:表示不設定項目符号編号樣式。此時将以Disc樣式為預設樣式顯示。

7.      Numbered:表示設定項目符号編号樣式為數字格式。如1、2、3、4等數字格式。

8.      Square:表示設定項目符号編号樣式為“■”實體黑方塊。

9.      UpperAlpha:表示設定項目符号編号樣式為大寫字母格式。如A、B、C、D等26個大寫英文字母。

10. UpperRoman:表示設定項目符号編号樣式為大寫羅馬數字格式。如I、II、III、IV等大寫的羅馬數字。

l        DisplayMode:顧名思義為顯示模式,對應着System.Web.UI.WebControls.BulletedListDisplayMode枚舉類型值。其共有以下三種選擇項:

1.      Text:表示以純文字形式來表現項目清單。

2.      HyperLink:表示以超連結形式來表現項目清單。連結文字為某個具體項ListItem的Text屬性,連結目标為ListItem的Value屬性。

3.      LinkButton:表示以伺服器控件LinkButton形式來表現項目清單。此時每個ListItem項都将表現為LinkButton,同時以Click事件回發到伺服器端進行相應操作。

l        Items:該屬性對應着System.Web.UI.WebControls.ListItem對象集合。項目符号編号清單中的每一個項均對應一個ListItem對象。ListItem對象有四個主要屬性:

?        Enabled:該項是否處于激活狀态。預設為True。

?        Selected:該項是否處于標明狀态。預設為True。

?        Text:該項的顯示文本。

?        Value:該項的值。

l        Click:該事件在BulletedList控件的DisplayMode處于LinkButton模式下,并BulletedList控件中的某項被點選時觸發。觸發時将被點選項在所有項目清單中的索引号(從0開始)作為傳回參數傳回伺服器端。

BulletedList顯示如下:

BulletedList使用及詳解

同樣,下面以三種DisplayMode情況作三個簡單示例,以便更好了解BulletedList的各種屬性方法和應用。

1.     Text顯示模式:

此種模式最為簡單,僅僅提供項目清單的顯示而以。其表現代碼為:

        <asp:BulletedList ID="BulletedList1" BulletStyle="Circle" runat="server">

            <asp:ListItem>Item #1</asp:ListItem>

            <asp:ListItem Text="Item #2"></asp:ListItem>

            <asp:ListItem Text="Item #3" Value="Item #3"></asp:ListItem>

        </asp:BulletedList>

當然,也可以通過資料綁定來實作資料顯示,做法類似下面HyperLink的資料綁定操作。

2.     LinkButton顯示模式:

這裡隻簡要說明其資料綁定的資料顯示操作。

            <asp:BulletedList ID="BulletedList1" runat="server" DataSourceID="SqlDataSource1"

                DataTextField="ProductName" DataValueField="ProductID" DisplayMode="LinkButton">

            </asp:BulletedList>

            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

                SelectCommand="SELECT TOP 10 [ProductID], [ProductName] FROM [Products]">

            </asp:SqlDataSource>

3.     HyperLink顯示模式:

各項以超連接配接顯示   

當然啦,對于BelletedList控件我們用得最多是用它做清單顯示,比如網頁頭部的菜單欄,或從資料庫中動态讀取某列的全部字段而加以綁定顯示,今天做項目恰好碰到讀取資料庫中材質全部字段的問題,想到用此控件;具體實作如下;

前台顯示:

<div id="stuff">

<asp:BulletedList ID="blMQ" runat="server" DataSourceID="sdsMQ" DataTextField="MQ_Name" DataValueField="id" DisplayMode="LinkButton" Width="98%" Height="62px" OnClick="blMQ_Click">

</asp:BulletedList>

<div>

<asp:SqlDataSource ID="sdsMQ" runat="server" SelectCommand="select * from Product_MaterialQ" ConnectionString="Data Source=computer/sa;Initial Catalog=Go24k_Shop;user id=sa;password=123456;">

</asp:SqlDataSource>

背景主要代碼:

    protected void blMQ_Click(object sender, BulletedListEventArgs e)

    {

        ListItem List = blMQ.Items[e.Index];

        Response.Redirect("/Member/AddCustomer.aspx?id=" + List.Value.Trim());

    }

最後在前台頁面頂部<head></head>部分加個樣式如下:

<style type="text/css">

        #stuff ul{list-style:none;margin:0px;}

        #stuff ul li{float:left;margin:0 10px}

</style>    

ok!橫排成菜單模式了!