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

4 Types of Lists

List Box

Bulleted List


Selected Item
  • Microsoft
  • Intel
  • Dell

Check Box List

Radio Button List



Selected Item


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:

FactorValue




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



IDNameAction
ms Microsoft Delete Edit
in Intel Delete Edit
de Dell Delete Edit

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.