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顯示如下:
同樣,下面以三種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!橫排成菜單模式了!