16
Chương: 17 Data Controls Lập trình Web Lập trình Web 1 Lập trình Web

Data controls

Embed Size (px)

Citation preview

Page 1: Data controls

Chương: 17

Data Controls

Lập trình Web Lập trình Web

1 Lập trình Web

Page 2: Data controls

Nội dungNội dungThe GridViewFormatting the GridViewSelecting a GridView RowEditing with the GridViewSorting and Paging the GridViewUsing GridView TemplatesThe DetailsView and FormView

Lập trình Web 2

Page 3: Data controls

The GridViewThe GridViewAutomatically Generating ColumnsDefining Columns

Lập trình Web3

Page 4: Data controls

The GridViewThe GridViewAutomatically Generating ColumnsDefining Columns

Lập trình Web4

Page 5: Data controls

Defining Columns: Defining Columns: Column TypesColumn TypesClass DescriptionBoundField This column displays text from a field in the data

sourceButtonField This column displays a button in this grid columnCheckBoxField

This column displays a check box in this grid column

CommandField

This column provides selection or editing buttons

HyperLinkField

This column displays its contents (a field from the data source or static text) as a hyperlink

ImageField This column displays image data from a binary field (providing it can be successfully interpreted as a supported image format)

TemplateField

This column allows you to specify multiple fields, custom controls, and arbitrary HTML using a custom template. It gives you the highest degree of control but requires the most work Lập trình Web 5

Page 6: Data controls

Defining Columns:Defining Columns:

Lập trình Web 6

Page 7: Data controls

Defining Columns: Defining Columns: BoundField BoundField PropertiesProperties

Property DescriptionDataField Identifies the field (by name) that you want

to display in this ColumnDataFormatString Formats the field. This is useful for getting

the right representation of numbers and dates

ApplyFormatInEditMode

If true, the DataFormat string is used to format the value even when the value appears in a text box in edit mode. The default is false

FooterText, HeaderText, and HeaderImageUrl

Sets the text in the header and footer region of the grid if this grid has a header and footer. To show an image in the header instead of text, set the HeaderImageUrl property

ReadOnly If true, it prevents the value for this column from being changed in edit mode

InsertVisible If true, it prevents the value for this column from being set in insert mode

Lập trình Web 7

Page 8: Data controls

Defining Columns: Defining Columns: BoundField BoundField PropertiesPropertiesProperty DescriptionVisible If false, the column won’t be visible in

the pageSortExpression Sorts your results based on one or more

columnsHtmlEncode If true (the default), all text will be HTML

encoded to prevent special characters from mangling the page

NullDisplayText Displays the text that will be shown for a null value

ConvertEmptyStringToNull

If true, converts all empty strings to null values

ControlStyle, HeaderStyle,FooterStyle, and ItemStyle

Configures the appearance for just this column, overriding the styles for the row

Lập trình Web 8

Page 9: Data controls

Formatting the GridViewFormatting the GridViewFormatting FieldsUsing StylesFormatting-Specific Values

Lập trình Web9

Page 10: Data controls

Formatting FieldsFormatting FieldsEach BoundField column provides a DataFormatString

property you can use to configure the appearance of numbers and dates using a format string.

Lập trình Web 10

<asp:BoundField DataField="UnitPrice" HeaderText="Price"DataFormatString="{0:C}" />

Page 11: Data controls

Formatting FieldsFormatting FieldsNumeric Format Strings: View Table 17-3. in the ebook

at page 584.Time and Date Format Strings: View Table 17-4 in the

ebook at page 585

Lập trình Web 11

Page 12: Data controls

Selecting a GridView RowSelecting a GridView RowAdding a Select ButtonUsing Selection to Create Master-Details Pages

Lập trình Web12

Page 13: Data controls

Adding a Select ButtonAdding a Select ButtonHere’s an example that displays a select button:

And here’s an example that shows a small clickable icon

Lập trình Web 13

<asp:CommandField ShowSelectButton="True" ButtonType="Button"SelectText="Select" />

<asp:CommandField ShowSelectButton="True" ButtonType="Image"SelectImageUrl="select.gif" />

Page 14: Data controls

Using a Data Field As a Select Using a Data Field As a Select ButtonButton

Lập trình Web 14

<asp:ButtonField ButtonType="Button" DataTextField="ProductID" />

<asp:ButtonField CommandName="Select" ButtonType="Button"DataTextField="ProductID" />

Page 15: Data controls

Using Selection to Create Master-Using Selection to Create Master-Details PagesDetails Pages

Lập trình Web 15

Page 16: Data controls

Sorting and Paging the Sorting and Paging the GridViewGridViewSortingPaging

Lập trình Web16