Asp. NET in BulletedList list control use and detailed _ Basic application

The BulletedList control creates a unordered or ordered (numbered) list of items that are rendered as HTML UL or OL tags, respectively. You can specify the appearance of items, bullets, or numbers to statically define list items or to define list items by binding controls to data, or you can respond when a user clicks an item.

For ASP.net 1.x to dynamically display the bulledted list, either use the HTML <ol> or <ul> element constructs, or the "overkill" use repeater to display. The former is too inflexible, the latter is too overkill, perhaps Microsoft hears this kind of sound, so asp.net 2.0 finally got a bulletedlist come out. Although the control is not too much attention, but it can be seen that Microsoft really care about the "user needs." The main properties of the BulletedList control are BulletStyle, DisplayMode, items, and main Event click.

BulletStyle: The bullet number style value, corresponding to the System.Web.UI.WebControls.BulletStyle enumeration type value. There are 10 options for the following:

1.Circle: Indicates that the bullet numbering style is set to "0" empty circle.
2.CustomImage: Indicates that the bullet numbering style is set to a custom picture, and its picture is specified by the Bulletimageurl property.
3.Disc: Indicates that the bullet numbering style is set to the solid circle.
4.LowerAlpha: Indicates that the bullet numbering style is formatted as a lowercase letter. such as a, B, C, D, such as 26 lowercase English letters.
5.LowerRoman: Indicates that the bullet numbering style is set to lowercase roman numeral format. such as I, II, III, IV, and other lowercase roman numerals.
6.NotSet: Indicates that the bullet numbering style is not set. This is displayed as the default style in disc style.
7.Numbered: Indicates that the bullet numbering style is set to a number format. such as 1, 2, 3, 4 and other digital formats.
8.Square: Indicates that the bulleted number style is the entity black box.
9.UpperAlpha: Indicates that the bulleted numbering style is formatted in uppercase letters. such as a, B, C, D, and so on 26 uppercase English letters.
10.UpperRoman: Sets the bullet numbering style to uppercase Roman numeral format. Roman numerals in capitals such as I, II, III, IV, etc.

DisplayMode: The name implies the display mode, corresponding to the System.Web.UI.WebControls.BulletedListDisplayMode enumerated type value. There are three options for the following:

1. Text: Represents a list of items in plain text.
2. HyperLink: Represents a list of items in a hyperlink form. Link text is the Text property of a specific item listitem, and the link target is the Value property of ListItem.
3. LinkButton: Represents a list of items in the form of a server control LinkButton. Each ListItem item is then displayed as LinkButton, and the Click event is sent back to the server side for appropriate action.

Items: This property corresponds to a collection of System.Web.UI.WebControls.ListItem objects. Each item in a bulleted numbered list corresponds to a ListItem object. The ListItem object has four main properties:
Enabled: Whether the item is active. The default is true.
Selected: Whether the item is in the selected state. The default is true.
Text: The display literal for the item.
Value: The values of the item.
Click: This event is triggered when the displaymode of the BulletedList control is in LinkButton mode and bulletedlist an item in the control is clicked. The index number (starting from 0) of the clicked item in all items list is passed back to the server side as a return parameter when triggered.

The BulletedList display is as follows:

Again, here are three simple examples of three displaymode to better understand the various property methods and applications of BulletedList.

1.Text display Mode:

This pattern is the simplest and only provides a list of items to display. Its representation code is:

Copy Code code as follows:

<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>

Of course, data binding can also be used to implement the display, similar to the following Hyperlink data binding operations.

2.LinkButton display Mode:

This is only a brief description of its data-bound data display operation.

Copy Code code as follows:

<asp:bulletedlist id= "BulletedList1" runat= "Server" datasourceid= "SqlDataSource1"
Datatextfield= "ProductName" datavaluefield= "ProductID" displaymode= "LinkButton" >
</asp:BulletedList>
<asp:sqldatasource id= "SqlDataSource1" runat= "connectionstring=" <%$ connectionstrings: NorthwindConnectionString%> "
selectcommand= "SELECT top [ProductID], [ProductName] from [Products]" >
</asp:SqlDataSource>

3.HyperLink display Mode:

Items are displayed in a super connection

Of course, for the belletedlist control we use it to do a list display, for example, the menu bar of the head of the Web page, or dynamically read from the database all the fields of a column to be bound to display, today do the project just met to read the material in the database all the fields, think of using this control;

Foreground display:

Copy Code code as follows:

<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>

Background main code:

Copy Code code as follows:

protected void Blmq_click (object sender, BulletedListEventArgs e)
{
ListItem List = Blmq.items[e.index];
Response.Redirect ("/member/addcustomer.aspx?id=" + List.Value.Trim ());
}

Finally at the top of the front page

[/code]
<style type= "Text/css" >
#stuff ul{list-style:none;margin:0px;}
#stuff ul li{float:left;margin:0 10px}
</style>
[/code]

ok! horizontal into the menu mode!