Microsoft ASP .NET Professional Projects - Premier Press
.pdf
The ItemTemplate is the only required template and it defines the content and layout of the list. The AlternatingItemTemplate defines the content and layout of alternating items. The SeperatorTemplate is for items between the items and alternating items. Finally, the HeaderTemplate and FooterTemplate determine the rendering of the header and footer of the list, respectively. The DataRepeater has no built-in styles and all HTML elements must be explicitly specified in the various templates. For example, to give a tabular look, you would define the table tab in the HeaderTemplate, the closing table tag in the FooterTemplate and the table row, and table data tags in the ItemTemplate (and/or in the AlternatingItemTemplate). In Figure 4.2, I render the Groups table in a tabular format using the DataRepeater.
Figure 4.2: The DataRepeater.
Repeater.aspx
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<html>
<script language="VB" runat="server">
Dim myConnection As OleDbConnection
Dim myCommand As OleDbDataAdapter
Dim ds As New DataSet
Dim ConnStr As String
Dim SQL As String
Sub Page_Load(Source As Object, E As EventArgs)
ConnStr = "Provider=SQLOLEDB; Data Source=(local); Initial Catalog=ASPNET;User
ID=sa;"
myConnection = New OleDbConnection(ConnStr)
if NOT (isPostBack)
rebind end if
End Sub
Sub ReBind()
'DataSetCommand
SQL = "select * from Groups"
myCommand = New OleDbDataAdapter(SQL, myConnection) 'use Fill method of DataSetCommand to populate dataset myCommand.Fill(ds, "Groups")
'Binding a Grid
DataGrid1.DataSource=ds.Tables("Groups").DefaultView
DataGrid1.DataBind()
End Sub </script> <body>
<h3><font face="Verdana"> Data Repeater</font></h3> <form runat=server>
<asp:Repeater id="DataGrid1" runat="server"> <HeaderTemplate>
<table border = 1> <tr>
<td><b>Name</b></td>
<td><b>Group</b></td>
<td><b>Type</b></td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td> <%# Container.DataItem("code_display") %></td> <td><%# Container.DataItem("code_category") %></td>
<td><%# Container.DataItem("type") %></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr style="background-color: silver">
<td> <%# Container.DataItem("code_display") %></td>
<td><%# Container.DataItem("code_category") %></td>
<td><%# Container.DataItem("type") %></td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
This sample populates a DataSet with records from the Groups table. The opening table tag is in the HeaderTemplate, and the closing table tag in the FooterTemplate. The table data and table row tags are applied both in the ItemTemplate and the AlternatingItemTemplate. Finally, every other row has a silver background due to the style specified in the AlternatingItemTemplate.
DataGrid
The DataGrid control is used to create attractive, tabular layouts of data associated with it. With the DataGrid control you can specify styles for the header row, the footer row, the item rows the alternating rows and also create column level templates. The DataGrid supports advanced features like in-line editing, sorting, and paging.
To introduce the DataGrid, I will build a form to add, update, and delete records in the Masters table. I will then present a sequence of forms, each of which presents a new facet of the DataGrid. In the end, I will have a form with editing capabilities. I will continue working on this form in Project 1, and at the end I will have a full-fledged Maintenance Form.
A Basic Grid
In the DataBind.aspx example, I showed you how to results. The following statements in the Page_Load
bind to a DataGrid and present the event do this:
DataGrid1.DataSource=ds.Tables("Masters").DefaultView
DataGrid1.DataBind()
The DataBind method causes the DataGrid to refresh its data. Bound controls will be populated with data only when this method is called. This gives control to the developer as he can now refresh data as needed, preventing unnecessary datasource access. Typically, this method is called at Page_Load and then when it is required to refresh the DataGrid. Calling this method at the page level (page.DataBind() or just DataBind()) will cause all data binding expressions on the page to be evaluated.
You will observe that the resulting DataGrid is quite dull, so let's embellish it by applying styles.
The Masters Grid with Style
Figure 4.3 shows what the Masters grid will look like after the application of styles.
Figure 4.3: Master1 DataGrid.
Our code is in Masters1.aspx, which has a Code Behind file called Masters1.vb. Following the aspx form is an explanation.
Masters1.aspx
<%@Page Language="VB" Inherits="BaseClass" Src="Masters1.vb" %>
<html>
<head>
<title>Masters DataGrid 1</title>
</head>
<body>
<br>
<form runat=server>
<b>Chart of Accounts:</b><br>
<asp:DataGrid id="Grid1" runat="server" AutoGenerateColumns="false" BackColor="White"
BorderWidth="1px" BorderStyle="Solid" BorderColor="Tan"
CellPadding="2" CellSpacing="0"
Font-Name="Verdana" Font-Size="8pt"> <Columns>
<asp:BoundColumn HeaderText="Account" DataField="code_display"> <HeaderStyle Width="150px">
</HeaderStyle>
</asp:BoundColumn>
<asp:BoundColumn HeaderText="Group" DataField="category"> <HeaderStyle Width="150px">
</HeaderStyle>
</asp:BoundColumn>
<asp:BoundColumn HeaderText="Type" DataField="type"> <HeaderStyle Width="50px">
</HeaderStyle>
</asp:BoundColumn>
<asp:BoundColumn HeaderText="Opening" DataField="opening"> <HeaderStyle Width="50px">
</HeaderStyle>
</asp:BoundColumn>
<asp:BoundColumn HeaderText="Closing" DataField="closing"> <HeaderStyle Width="50px">
</HeaderStyle>
</asp:BoundColumn>
</Columns>
<HeaderStyle BackColor="DarkRed" ForeColor="White" Font-Bold="true"> </HeaderStyle>
<ItemStyle ForeColor="DarkSlateBlue"> </ItemStyle>
<AlternatingItemStyle BackColor="Beige"/> </asp:DataGrid>
</form>
</body>
</html>
The script of the Code Behind file, Masters1.vb is as follows:
Masters1.vb
Imports System
Imports System.Collections
Imports System.Text
Imports System.Data
Imports System.Data.OleDb
Imports System.Web.UI
Imports System.Web.UI.WebControls
Public Class BaseClass
Inherits System.Web.UI.Page
Protected Grid1 as DataGrid
Dim myConnection As OleDbConnection
Dim myCommand As OleDbDataAdapter
Dim ds As New DataSet
Dim ConnStr As String
Dim SQL As String
Sub Page_Load(Source As Object, E As EventArgs)
ConnStr = "Provider=SQLOLEDB; Data Source=(local); Initial Catalog=ASPNET;User
ID=sa;"
myConnection = New OleDbConnection(ConnStr)
if NOT (isPostBack)
rebind
end if
End Sub
Sub ReBind()
'DataSetCommand
SQL = "select m.*, g.code_display as category "
SQL = SQL + "from masters m, groups g "
SQL = SQL + " where m.code_category = g.code_value"
myCommand = New OleDbDataAdapter(SQL, myConnection)
'use Fill method of DataSetCommand to populate dataset
myCommand.Fill(ds, "masters")
'Binding a Grid
Grid1.DataSource=ds.Tables("masters").DefaultView
Grid1.DataBind()
End Sub
End Class
Let's dissect the code. The first thing you will note is that I told the DataGrid not to automatically generate columns by turning off the AutoGenerate attribute. I then set the Font, BackColor, ForeColor, CellPadding, and CellSpacing properties. Next, I set the property tags of the DataGrid to specify the columns to be displayed. You will note that this is an XML-like tag setting. Finally, note that the DataGrid has a HeaderStyle with which I customize the header row, an ItemStyle which is used to render the ForeColor of all elements to DarkSlateBlue, and an AlternatingItemStyle which I use to render every other row's BackColor to
Beige.
The Editable Masters Form
I now add editing capabilities to the grid. The grid will now have a link called "edit," which will take you to the edit mode when clicked on. Figure 4.4 shows what the DataGrid looks like at this stage.
Figure 4.4: Masters2 DataGrid.
Two new links, with the captions "OK" and "Cancel," will appear at this stage. We can either accept the updates by clicking "OK," or leave the data as it was by selecting "Cancel." Figure 4.5 shows what the form will look like in edit mode.
Figure 4.5: Masters2 DataGrid in Edit Mode.
Masters2.aspx
<%@Page Language="VB" Inherits="BaseClass" Src="masters2.vb" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<html>
<script language="VB" runat="server">
Sub Grid1_Update(sender As Object, e As DataGridCommandEventArgs)
Dim sql As string
Dim code_display As String
Dim code_category As String
Dim type As String
Dim opening As String
Dim closing As String
Dim myTextBox As TextBox
'This is the key value: Retrieved from the DataKey, since it's a read only field Dim code_value as string = Grid1.DataKeys.Item(E.Item.ItemIndex).ToString myTextBox = E.Item.FindControl("edit_name")
code_display = mytextbox.text
myTextBox = E.Item.FindControl("edit_group") code_category = mytextbox.text
myTextBox = E.Item.FindControl("edit_type") type = mytextbox.text
myTextBox = E.Item.FindControl("edit_opening") opening = mytextbox.text
myTextBox = E.Item.FindControl("edit_closing") closing = mytextbox.text
'Now execute stored procedure
sql = "Execute p_masters " + code_value + ", '" + code_display + " '," sql = sql + code_category + ", '" + type +"' ," + opening + "," + closing RunSql(sql)
Grid1.EditItemIndex = -1
ReBind()
End Sub </script>
<body style="font: 10pt verdana"> <form runat="server">
<h3><font face="Verdana">Chart of Accounts </font></h3> <asp:Label id="Message" runat="server"/>
<asp:DataGrid id="Grid1" runat="server"
AutoGenerateColumns="false"
BackColor="White"
BorderWidth="1px" BorderStyle="Solid" BorderColor="Tan"
CellPadding="2" CellSpacing="0"
Font-Name="Verdana" Font-Size="8pt"
OnEditCommand="Grid1_Edit"
OnCancelCommand="Grid1_Cancel"
OnUpdateCommand="Grid1_Update"
DataKeyField="code_value">
<Columns>
<asp:EditCommandColumn
EditText="Edit"
CancelText="Cancel"
UpdateText="OK"
ItemStyle-Wrap="false"
HeaderText="Click to Edit"
HeaderStyle-Wrap="false"/>
<asp:BoundColumn HeaderText="Account #" ReadOnly="true" DataField="code_value"/>
<asp:TemplateColumn HeaderText="Name" > <ItemTemplate>
<asp:Label Text='<%# Container.DataItem("code_display") %>' runat="server"/> </ItemTemplate>
<EditItemTemplate>
<asp:TextBox id="edit_name" Text='<%# Container.DataItem("code_display") %>' runat="server"/>
</EditItemTemplate>
</asp:TemplateColumn> <asp:TemplateColumn HeaderText="Group" >
<ItemTemplate>