GridView Control in ASP.NET - Part 7
Using Fields with GridView Control
As to solve some of problems like enabling the GridView to render
its columns automatically is that we give up any control over column
formatting. For example, the BoxOfficeTotals column is
displayed as a decimal amount without any currency formatting. The EnTRyDatecolumn always
displays in short-date and long-time format. The solution to such problems is
to specify explicitly the fields that a GridView displays. The GridView control
supports the following types of fields:
· BoundField Enables
us to display the value of a data item as text.
· CheckBoxField Enables
us to display the value of a data item as a check box.
· CommandField Enables
us to display links for editing, deleting, and selecting rows.
· ButtonField Enables
us to display the value of a data item as a button (image button, link button,
or push button).
· HyperLinkField Enables
us to display the value of a data item as a link.
· ImageField Enables
us to display the value of a data item as an image.
· TemplateField Enables
us to customize the appearance of a data item.
Using ImageField
Introduction & Demonstration
We use an ImageField to display an image stored on
the server's hard drive. We can't use an ImageField to display
images stored in a database table.
In above picture, we have a GridView control in which two
pictures are displaying. We have also used a horizontal row to separate upload
section and display section. For upload we have used lots of controls. Here is
the code which I have used.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub Inserting(ByVal sender As Object, ByVal e As FormViewInsertEventArgs)
' Get the FileUpload control
Dim Images As FileUpload = CType(frmPhoto.FindControl("Images"),
FileUpload)
SqlDataSource1.InsertParameters("FileName").DefaultValue
= Images.FileName
' Save contents to file system
Dim savePath As String = MapPath("~/Images/" +
Images.FileName)
Images.SaveAs(savePath)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource1"
EmptyDataText="There
are no data records to display." Width="96px"
ShowHeader="false" Height="41px">
<Columns>
<asp:ImageField
DataImageUrlField="FileName"
DataImageUrlFormatString="~/Images/{0}"
DataAlternateTextField="AltText"
ControlStyle-Width="100px" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT [FILENAME],
[ALTTEXT] FROM [IMAGES_DETAILS]"
InsertCommand="INSERT INTO
IMAGES_DETAILS(FILENAME, ALTTEXT) VALUES (@FILENAME, @ALTTEXT)">
<InsertParameters>
<asp:Parameter Name="FILENAME" />
</InsertParameters>
</asp:SqlDataSource>
<hr />
<asp:FormView
id="frmPhoto"
DefaultMode="Insert"
DataSourceID="SqlDataSource1"
OnItemInserting="Inserting"
Runat="server">
<InsertItemTemplate>
<h3>Add Photo</h3>
<asp:Label
id="lblPhoto"
Text="Photo:"
AssociatedControlID="Images"
Runat="server" />
<br />
<asp:FileUpload
id="Images"
Runat="server" />
<br />
<asp:Label
id="lblAltText"
Text="Alternate
Text:"
AssociatedControlID="txtAltText"
Runat="server" />
<br />
<asp:TextBox
id="txtAltText"
Text='<%# Bind("AltText") %>'
Columns="50"
Runat="server" />
<br />
<asp:Button
id="btnInsert"
Text="Add New
Photo"
CommandName="Insert"
Runat="server" />
</InsertItemTemplate>
</asp:FormView>
</div>
</form>
</body>
</html>
Note: Continue in Next Part.
Comments
Post a Comment