Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1of 30

Database Programming

Core Data Controls


-Details View
-Form View
Details View
GridView Control
The GridView control is the most
powerful control / workhorse of the
ASP.NET Framework. It is one of the
most feature-rich and complicated of all
the ASP.NET controls. The GridView
control enables us to display, select, sort,
page, and edit data items such as
database records.
GridView Control
-Displaying Data
The GridView renders its data items
in an HTML table. Each data item is
rendered in a distinct HTML table
row. The GridView is associated with
its data source through its
DataSourceID property
GridView Control
-Displaying Empty Data
The GridView includes two properties that
enable us to display content when no results
are returned from the GridView control’s data
source. We can use either the EmptyDataText
property or the EmptyDataTemplate property
to handle empty data.

EmptyDataText=”<img src=’sad.gif’/> No
Matching Movies!”
GridView Control
-Selecting Data
enable a user to select a particular row in
a GridView control. This is useful when
you want to build single-page
Master/Details forms.
first GridView has its
AutoGenerateSelectButton property
enabled. When this property has the value
True, a Select link is displayed next to
each row.
GridView Control
-Selecting Data
We can determine which row is selected in
a GridView control by using any of the
following methods:
SelectedDataKey()—Returns the DataKey
object associated with the selected row (useful
when there are multiple data keys).
SelectedIndex()—Returns the (zero-based)
index of the selected row.
SelectedValue()—Returns the data key
associated with the selected row.
GridView Control
-Selecting Data
Data Keys
We associate a value with each row in a
GridView by providing a value for the
GridView control’s DataKeyNames
property. We can assign the name of a
single database column to this property or
we can assign a comma-separated list of
column names to this property.
GridView Control
-Sorting Data
We can sort the rows rendered by a
GridView control by enabling the
AllowSorting property.
GridView Control
-Paging Through Data
When working with a large number of
database rows, it is useful to be able to
display the rows in different pages. We
can enable paging with the GridView
control by enabling its AllowPaging
property.

AllowPaging=”true” PageSize=”5”
GridView Control
- Customizing Paging
 Customizing the Paging Interface By default, when
paging is enabled, the GridView renders a list of page
numbers at the bottom of the grid. We can modify the
user interface for paging through records by modifying
the GridView control’s PagerSettings property.

 PageSize=”3”
 PagerSettings-Mode=”NextPreviousFirstLast”
 PagerSettings-Position=”TopAndBottom”
 PagerStyle-HorizontalAlign=”Center”
GridView Control
- PagerSettings class
The PagerSettings class supports the following properties:
 
 FirstPageImageUrl—Enables you to display an image for the first page link.
 FirstPageText—Enables you to specify the text for the first page link.
 LastPageImageUrl—Enables you to display an image for the last page link.
 LastPageText—Enables you to specify the text for the last page link.
 Mode—Enables you to select a display mode for the pager user interface. Possible
values are NextPrevious, NextPreviousFirstLast, Numeric, and NumericFirstLast.
 NextPageImageUrl—Enables you to display an image for the next page link.
 NextPageText—Enables you to specify the text for the next page link.
 PageButtonCount—Enables you to specify the number of page number links to
display.
 Position—Enables you to specify the position of the paging user interface. Possible
values are Bottom, Top, and TopAndBottom.
 PreviousPageImageUrl—Enables you to display an image for the previous page
link.
 PreviousPageText—Enables you to specify the text for the previous page link.
 Visible—Enables you to hide the paging user interface.
GridView Control
- Formatting
 The GridView control includes a rich set of formatting
properties that you can use to modify its appearance. The
control also exposes several Style objects that include the
CssClass property:
 
 AlternatingRowStyle—Enables you to format every other
row.
 FooterStyle—Enables you to format the footer row.
 HeaderStyle—Enables you to format the header row.
 PagerStyle—Enables you to format the pager row.
 RowStyle—Enables you to format each row.
 SelectedRowStyle—Enables you to format the selected
row.
GridView Control
- Formatting
 list of these properties.

 GridLines—Renders borders around table cells. Possible


values are Both, Vertical, Horizontal, and None.
 ShowFooter—When True, renders a footer row at the
bottom of the GridView.
 ShowHeader—When True, renders a header row at the
top of the GridView.
Grid View – Changing Datasource
// Build shopping list
List<string> shoppingList = new List<string>();
shoppingList.Add(“Bread”);
shoppingList.Add(“Milk”);
shoppingList.Add(“Beer”);
shoppingList.Add(“Waffles”);
// Bind to GridView
grdShoppingList.DataSource = shoppingList;
grdShoppingList.DataBind();
GridView Control
-Editing & Deleting Data
The GridView control also enables us to edit
database data. The amazing thing is that we can
use the GridView to edit the contents of a
database table row without writing a single line
of code.
AutoGenerateEditButton=”true”
AutoGenerateDeleteButton=”true”
 When we click an Edit link, we can edit a particular
database row. The GridView automatically renders a
check box for any Boolean columns and a text field
for any other type of column.
GridView Control
-Editing Data
Handling Concurrency Issues

 The GridView control tracks the original and updated


values of a column so that you can handle
concurrency conflicts. Imagine that you are building
a massive order entry system. Your company has
hundreds of employees modifying orders with a page
that contains a GridView control. If two employees
open the same customer record at the same time, then
one employee might overwrite changes made by the
other employee.
 For that we have handle concurrency in DataSource also.
GridView Control
- Using Fields with the GridView Control
One problem with enabling the GridView to render its
columns automatically is that you give up any control
over column formatting. For example, the
BoxOfficeTotals column is displayed as a decimal
amount without any currency formatting. The
EntryDate column always displays in short-date and
long-time format.
Furthermore, it would be nice to be able to display the
values of certain columns as images, drop-down lists,
or hyperlinks. If you use the automatically generated
columns, then you are stuck with the user interface
you are given.
GridView Control
- Using Fields with the GridView Control
The GridView control supports the following types of fields:
BoundField—Enables you to display the value of a data item as text.
CheckBoxField—Enables you to display the value of a data item as a
check box.
CommandField—Enables you to display links for editing, deleting,
and selecting rows.
ButtonField—Enables you to display the value of a data item as a
button (image button, link button, or push button).
HyperLinkField—Enables you to display the value of a data item as a
link.
ImageField—Enables you to display the value of a data item as an
image.
TemplateField—Enables you to customize the appearance of a data
item. The following sections examine how you can take advantage of
each of these different types of fields.
GridView Control
- Using Fields with the GridView Control
BoundFields
A BoundField always displays the value of a data item as
text when a row is in normal display mode. When a row is
selected for editing, a BoundField displays the value of a
data item in a single line text field.

The most important three properties of the BoundField


class are the DataField, DataFormatString, and
HeaderText properties.
 
<asp:BoundField DataField=”BoxOfficeTotals”
DataFormatString=”{0:c}” HeaderText=”Box Office
Totals” />
GridView Control
- Using Fields with the GridView Control
CheckBoxFields
A CheckBoxField, as we can probably guess,
displays a check box. When a row is not in edit
mode, the check box is displayed but it is disabled.
GridView Control
- Using Fields with the GridView Control
CommandFields
 We can use a CommandField to customize the appearance of the
Edit, Delete, Update, Cancel, and Select buttons displayed by
the GridView control.

<Columns>
<asp:CommandField ButtonType=”Image”
ShowEditButton=”true” EditText=”Edit Movie” EditImageUrl=”Edit.gif”
UpdateText=”Update Movie” UpdateImageUrl=”Update.gif”
ShowCancelButton=”true” CancelText=”Cancel Edit”
CancelImageUrl=”Cancel.gif”
ShowDeleteButton=”true” DeleteText=”Delete Movie”
DeleteImageUrl=”Delete.gif” />
</Columns>
GridView Control
- Using Fields with the GridView Control
HyperLinkFields
We can use a HyperLinkField to create a link to
another page. A HyperLinkField is particularly useful
when we need to build two page Master/Detail forms.

<Columns>
<asp:HyperLinkField
HeaderText=”Movie Categories”
DataTextField=”Name”
DataNavigateUrlFields=”Id”
DataNavigateUrlFormatString=”Details.aspx?id={0}” />
</Columns>
GridView Control
- Using Fields with the GridView Control
ImageFields
We can use an ImageField to display an
image stored on the server’s hard drive.
You can’t use an ImageField to display
images stored in a database table.
GridView Control
- Using Fields with the GridView Control
ImageFields
<script runat=”server”>
protected void frmPhoto_ItemInserting(object sender, FormViewInsertEventArgs e)
{
// Get the FileUpload control
FileUpload upPhoto = (FileUpload)frmPhoto.FindControl(“upPhoto”);
srcImages.InsertParameters[“FileName”].DefaultValue = upPhoto.FileName;
string savePath = MapPath(“~/Photos/” + upPhoto.FileName);
// Save contents to file system
upPhoto.SaveAs(savePath);
}
</script>
 <asp:GridView id=”grdImages”
DataSourceID=”srcImages” AutoGenerateColumns=”false”
ShowHeader=”false” Runat=”server”>
<Columns>
<asp:ImageField DataImageUrlField=”FileName” DataImageUrlFormatString=”~/Photos/{0}”
DataAlternateTextField=”AltText” ControlStyle-Width=”200px” />
</Columns>
</asp:GridView>
GridView Control
- Using Fields with the GridView Control
TemplateFields
A TemplateField enables us to add any
content to a GridView column that we need.
A TemplateField can contain HTML,
DataBinding expressions, or ASP.NET
controls. TemplateFields are particularly
useful when we are using a GridView to edit
database records. We can use a TemplateField
to customize the user interface and add
validation to the fields being edited.
GridView Control
- Using Fields with the GridView Control
TemplateFields
<Columns>
<asp:TemplateField HeaderText=”Title”>
<ItemTemplate>
<%# Eval(“Title”)%>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox
id=”txtTitle”
Text=’<%# Bind(“Title”) %>’
Runat=”server” />
<asp:RequiredFieldValidator id=”valTitle”
ControlToValidate=”txtTitle” Text=”(required)”
Runat=”server” />
</EditItemTemplate>
</asp:TemplateField>
</Columns>
GridView Control
- Using Fields with the GridView Control
TemplateFields
<Columns>
<asp:TemplateField HeaderText=”Category”>
<ItemTemplate>
<%# Eval(“Name”) %>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList
id=”ddlCategory”
DataSourceID=”srcMovieCategories” DataTextField=”Name”
DataValueField=”Id”
SelectedValue=’<%# Bind(“CategoryId”) %>’
Runat=”server” />
</EditItemTemplate>
</asp:TemplateField>
</Columns>
GridView Control
- Control Events

RowUpdating—Raised immediately before a GridView updates a record.


RowUpdated—Raised immediately after a GridView updates a record.
RowDeleting—Raised immediately before a GridView deletes a record.
RowDeleted—Raised immediately after a GridView deletes a record.
PageIndexChanging—Raised immediately before the current page is
changed.
PageIndexChanged—Raised immediately after the current page is
changed.
Sorting—Raised immediately before sorting.
Sorted—Raised immediately after sorting.
SelectedIndexChanging—Raised immediately before a row is selected.
SelectedIndexChanged—Raised immediately after a row is selected.

You might also like