Page 2 - List Controls

DropDown - HTML defines each ListItem, however a button is needed to post

Table - header defined in HTML, but the contents are generated from C#

xxxxList - ListBox, BulletedList, CheckBoxList, RadioButtonList

DataList - HTML defines a list of images with a custom paging function

Repeater - HTML defines a HeaderTemplate, ItemTemplate, and FooterTemplate and C# events

ListView - HTML defines ObjectDataSource and ListView with built-in paging and C# to define object

GridView - each field has a TemplateField which can define Header, Item, EditItem, and Footer templates with options (paging, sorting) and C# events

TreeView - indented expandable and colapseable nodes

DDL Populate in HTML

In aspx's HTML

asp:DropDownList

- Note: no AutoPostBack or PostBackUrl

asp:ListItem text and value

asp:Button with OnClick and PostBackUrl

In C#

Button1_Click

- display via Label1.Text = DropDownList1.SelectedItem

DropDownList Execution

Red Black Blue Green Yellow
Selected Item

DDL Populate in C#

In aspx's HTML

asp:DropDownList

- Note: no AutoPostBack or PostBackUrl

asp:ListItem text and value

asp:Button with OnClick and PostBackUrl

In C#

Button1_Click

DropDownList2.DataSource, DataValueField, DataTextField, DataBind

- display via Label1.Text = DropDownList1.SelectedItem

DropDownList Execution

Microsoft Intel Dell
Selected Item

DDL Populate w asp:DataSource

In aspx's HTML

asp:DropDownList Note: no AutoPostBack or PostBackUrl

asp:ListItem text and value

asp:Button with OnClick and PostBackUrl

In C#

Button1_Click

DropDownList2.DataSource, DisplayMember, DataBind

- display via Label1.Text = DropDownList1.SelectedItem

DropDownList Execution

Intel, Inc. Microsoft IBM, Inc. Apple Google, Inc. Amazon Dell, Inc. Samsung
Selected Item

Dynamic Table for Factorial

HTML

asp:TextBox for input value
asp:Button and click on it to create C# event
asp:Table
asp:TableRow
asp:TableCell>Factor< for 1st heading
asp:TableCell>Value< for 2nd heading

C#

TableRow row = new TableRow();
TableCell cell1 = new TableCell();
TableCell cell1 = new TableCell();
cell1.Text = value.ToString();
row.Cells.Add(cell1);
etc for each column
Table1.Rows.Add(row);

Number of Factors:

Factor

Value

DataList for Image Gallery

Javascript shows enlargen in hidden div
function EnlargenImage(Img) {
document.getElementById('[% =enlargenImage.ClientID %]').src = Img.src;
var x = document.getElementById('hiddenDiv').style.display = 'block';

HTML

asp:DataList RepeatColumn='3'
ItemTemplate
Table
tr
td asp:ImageButton ImageUrl='Eval(value)'
tr
asp:Label Text='Eval(Text)'
asp:Button for next page
div id='hiddenDiv'
asp:Image for enlargen image

C#

Page_Load()
List allFilles = new List();
string[] filePaths = Directory.GetFiles(Server.MapPath('~/Images/');
foreach (string filePath in filePaths) {
string fileName = Path.GetFileName(filePath);
allFiles.Add(new ListItem(fileName, '~/Images/'+fileName))
DataList1.DataSource = allFiles;
DataList1.DataBind();
Session['Index'] = 3;;

NextPage_Click()
GetAllFiles();
...
...
...
...
...

Home.jpg

Logo.jpg

Repeater Method 1

In aspx's HTML

asp:Repeater

headertemplate to define table and headings

itemtemplate to define each item with Eval

footertemplate to end table definition

In C#

Define and load the list

Repeater1 datasource=list and databind

Product ID	Product Name
ms	Microsoft
in	Intel
de	Dell

Repeater Method 2

In aspx's HTML - same plus:

itemtemplate to define each item additionally with:

- asp:LinkButton for Delete OnClientClick and OnClick

- asp:LinkButton for Edit with OnClick

footertemplate

- 2 asp:Textbox to add Id and Name

- asp:LinkButton for Add with OnClick

- to end table definition

In C# - same plus:

Repeater1.DataSource and DataBind

OnEdit

OnDelete

OnAdd

Product ID	Product Name
ms	Microsoft	Delete Edit
in	Intel	Delete Edit
de	Dell	Delete Edit
		Add

tbd

List View

In aspx's HTML:

asp:ObjectDataSource to define object class

asp:ListView with DataSourceID and DataKeyName

- layouttemplate to define a table with each field

- asp:DataPager

- itemtemplate

In C#:

public class Product

public DataSet GetProducts()

ID	Product Name
int	Intel, Inc.
ms	Microsoft
ibm	IBM, Inc.

1 2 3 

Grid View

In aspx's HTML:

asp:GridView AutoGenerateColumns="False" + ShowFooter

Columns

asp:TemplateField with HeaderText for each field

- ItemTemplate with asp:Label to define each field

- FooterTemplate with asp:TextBox to define each field

asp:TemplateField with HeaderText for Action

-ItemTemplate

--- asp:LinkButton for Delete OnClientClick and OnClick

--- asp:LinkButton for Edit with OnClick

-FooterTemplate

--- asp:LinkButton for Add with OnClick

In C#:

GridView1.DataSource and DataBind

OnDelete(sender,args)

LinkButton item = sender as LinkButton;

GridViewRow row = btn.NamingContainer as GridViewRow;

string productID = (row.FindControl("gridviewProductID") as Label).Text;

var idx = products.FindIndex(x => x.ProductID.Equals(productId.Trim()));

products.RemoveAt(idx);

GridView1.DataSource = null;

GridView1.DataSource = products;

GridView1.DataBind();

ResultLabel.Text = productID + " was deleted";

tbd

Tree View

In aspx's HTML:

asp:TreeView ID and runat, but no closing/ending

[Nodes]

[TreeNode

[/Nodes

[TreeView

In C#:

none

Skip Navigation Links.