In this final lesson we will show you how to use AspGrid to generate
data-bound forms. Our sample file is Sample6.asp.
Clicking on an employee in the left frame causes the right frame to
display the details on this employee as a form. We can edit any of the
fields and click the "Save" button to save changes.
When we click on the Add New button in the left frame, the right
frame shows an empty employee form, and the Save button becomes
the Insert button:
We can enter information on a new employee and click the Insert
button. However, the employee list in the left frame will not show the
new employee until we click the Refresh button.
Before looking at the code, let's recall that AspGrid, when used in
the usual grid mode, can be in three states: display state, edit
state and add-new state, the display state being the default one. We go
from the display state to edit state by clicking the pencil (Edit)
button, and go back to the display state by clicking ok or cancel.
Similarly, we go from the display to add-new state by clicking the plus
(Add New) button, and go back by clicking ok or cancel.
The states are controlled via special commands that AspGrid looks for
in the Request.QueryString collection. Specifically, moving from
the display to edit state is triggered by AspGridEditn, from
display to add-new state by AspGridAddn, from add-new state
back to display by AspGridInsertn, etc., where n is
the value of NumberOnPage property (1 by default).
AspGrid, when used in the form mode, can only be in two states:
edit and add-new.
The purpose of this lengthy introduction will be become clear as we
start examining our source code.
Sample6Left.asp
<%
Set LeftGrid = Server.CreateObject("Persits.AspGrid.1")
LeftGrid.FileName =
"Sample6Left.asp"
LeftGrid.Connect "AspGrid",
"", ""
LeftGrid.SQL = "select
id, '<A TARGET=RightFrame HREF=Sample6Right.asp?ID1=' + CStr(id) + '>'
+ FirstName + ' ' + LastName + '</A>' from Employee"
LeftGrid.Cols(1).Hidden
= True
LeftGrid.CanEdit = False
LeftGrid.CanAppend =
False
LeftGrid.ShowLeftSideButtons
False
LeftGrid.Table.Border
= 0
LeftGrid.ShowHeader
= False
%>
<HTML>
<BODY>
<H3>Employees:</H3>
<% LeftGrid.Display
%>
<% LeftGrid.Disconnect
%>
<FORM ACTION=Sample6Left.asp>
<INPUT TYPE=SUBMIT
NAME=Refresh VALUE="Refresh">
</FORM>
<FORM ACTION=Sample6Right.asp
METHOD=GET TARGET="RightFrame">
<INPUT TYPE=SUBMIT
NAME=AspGridAdd1 VALUE="Add New">
<INPUT TYPE=HIDDEN
NAME=ID1 VALUE=0>
</FORM>
</BODY>
</HTML> |
Sample6Right.asp
<HTML>
<BODY>
<%
Set Form = Server.CreateObject("Persits.AspGrid.1")
Form.Connect "AspGrid",
"", ""
Form.FileName = "Sample6Right.asp"
Form.UseImageButtons
= False
Form.SQL = "select id,
FirstName, LastName, DepartmentID, Salary, MaritalStatus, FullyVested from
Employee where id = " & Request("ID1")
Form.Cols(4).AttachForeignTable
"select id, name from departments", 1, 2
Form.Cols(6).Array =
Array( "Single", "Married", "Divorced" )
Form.Cols(6).VArray
= Array( 1, 2, 3 )
Form.Cols(7).AttachCheckBox
"Yes", "No"
If Request("ID1") <>
"" or Request("AspGridAdd1") <> "" Then
Form.BuildForm
Form.Disconnect
End If
%>
<TABLE BGCOLOR="#C0C0C0"
BORDER=3 CELLSPACING=3 CELLPADDING=3 WIDTH=100%>
<TD>
<TABLE BGCOLOR="#C0C0C0"
BORDER=0 CELLSPACING=0 CELLPADDING=3 WIDTH=100%>
<FORM METHOD=GET ACTION=Sample6Right.asp>
<TD>First Name:</TD><TD><%
= Form.Cols(2).FormHTML %></TD>
<TD>Last Name:</TD><TD><%
= Form.Cols(3).FormHTML %></TD><TR>
<TD>Department:</TD><TD><%
= Form.Cols(4).FormHTML %></TD>
<TD>Salary:</TD><TD><%
= Form.Cols(5).FormHTML %></TD><TR>
<TD>Marital Status:</TD><TD><%
= Form.Cols(6).FormHTML %></TD>
<TD>Fully Vested:</TD><TD><%
= Form.Cols(7).FormHTML %></TD><TR>
<INPUT TYPE=HIDDEN
NAME=ID1 VALUE=<% = Request("ID1") %>>
<TD COLSPAN=4>
<% If Request("AspGridAdd1")
<> "" Then %>
<INPUT TYPE=SUBMIT
NAME=AspGridInsert1 VALUE=Insert>
<% Else %>
<INPUT TYPE=SUBMIT
NAME=AspGridSave1 VALUE=Save>
<% End If %>
</TD>
</FORM>
</TABLE>
</TD>
</TABLE>
</BODY>
</HTML> |
The file Sample6.asp is identical to Sample4.asp so we
do not show or discuss it here.
Let's go over the file Sample6Left.asp. Unlike Sample4Left.asp
it allows the left-side grid to display "delete" buttons. It also has two
forms that host the buttons Add New and Refresh. The Refresh
form invokes Sample6Left.asp itself thus causing it to refresh.
The other form,
<FORM ACTION=Sample6Right.asp
METHOD=GET TARGET="RightFrame">
<INPUT TYPE=SUBMIT
NAME=AspGridAdd1 VALUE="Add New">
<INPUT TYPE=HIDDEN
NAME=ID1 VALUE=0>
</FORM>
invokes the right-frame file Sample6Right.asp and passes two
parameters to it, AspGridAdd1=Add+New and ID1=0. The first
parameter instructs the right-frame grid to switch to the add-new state.
The second parameter simply ensures that the Request("ID1") variable
used in the right frame does not evaluate to an empty string, or the right-frame
grid's SQL statement will be invalid.
The file Sample6Right.asp uses methods and properties we have
not seen before, and therefore deserves special attention. Let's examine
it line by line.
Form.UseImageButtons
= False
Our form's only button, Save (or Insert) is a regular
SUBMIT button.
We need to notify AspGrid of that by setting UseImageButtons to
False.
Form.SQL = "select
id, FirstName, LastName, DepartmentID, Salary, MaritalStatus, FullyVested
from Employee where id = " & Request("ID1")
When using AspGrid in the Form mode (edit state), it is our responsibility
to make sure that our SQL statement returns one record, the one that will
be shown in the form for editing. In this example we use the WHERE
clause with the variable Request.QueryString("ID1") passed from
the left frame to limit our recordset to just one record.
When displaying AspGrid in the add-new state, it is not important how
many records there are in the recordset. In our example, Request("ID1")
will evaluate to 0, so the recordset will be empty.
These 4 lines are identical to those in the previous lessons:
Form.Cols(4).AttachForeignTable
"select id, name from departments", 1, 2
Form.Cols(6).Array
= Array( "Single", "Married", "Divorced" )
Form.Cols(6).VArray
= Array( 1, 2, 3 )
Form.Cols(7).AttachCheckBox
"Yes", "No"
Let's look closely at the next few lines:
If Request("ID1")
<> "" or Request("AspGridAdd1") <> "" Then
Form.BuildForm
Form.Disconnect
End If
The new method here is BuildForm which we use instead of Display
in the form mode. To a certain degree it is similar to Display,
but it is also different in one fundamental respect: this method does not
send out any output HTML. Instead, it generates HTML input tags for each
individual field in our one-record recordset and puts these tags in their
respective Column objects. These tags can then be retrieved via
the Grid.Cols(i).FormHTML property as we will see shortly.
When using AspGrid in the Form mode, we no longer enjoy the convenience
of automatic form generation. It is now our responsibility to build an
HTML FORM, supply a SUBMIT
button and provide a hidden INPUT
tag to ensure the persistence of the current record ID within the right
frame.
On the other hand, it is AspGrid's responsibility to generate correct
input tags for each item on the form. Again, it is our job to embed these
tags in our HTML file:
<FORM METHOD=GET
ACTION=Sample6Right.asp>
<TD>First Name:</TD><TD><%
= Form.Cols(2).FormHTML %></TD>
<TD>Last Name:</TD><TD><%
= Form.Cols(3).FormHTML %></TD><TR>
<TD>Department:</TD><TD><%
= Form.Cols(4).FormHTML %></TD>
<TD>Salary:</TD><TD><%
= Form.Cols(5).FormHTML %></TD><TR>
<TD>Marital Status:</TD><TD><%
= Form.Cols(6).FormHTML %></TD>
<TD>Fully Vested:</TD><TD><%
= Form.Cols(7).FormHTML %></TD><TR>
<INPUT TYPE=HIDDEN
NAME=ID1 VALUE=<% = Request("ID1") %>>
...
</FORM>
For example, the code <%
= Form.Cols(2).FormHTML %> will evaluate to the
tag <INPUT TYPE=TEXT NAME=FIELD1 VALUE="John">.
In the tag <INPUT
TYPE=HIDDEN NAME=ID1> the NAME
attribute is set to ID1 because that is the name AspGrid will be
looking for in Request.QueryString to retrieve the current record
ID. The terminating "1" corresponds to the value of the NumberOnPage
property which is 1 by default.
The following lines either generate an Insert or Save
button depending on which state the form is currently in. Specifically,
if the form is in the edit state, a Save button will be shown. If the form
is in the add-new state, the Insert button will be shown.
<% If Request("AspGridAdd1")
<> "" Then %>
<INPUT TYPE=SUBMIT
NAME=AspGridInsert1 VALUE=Insert>
<% Else %>
<INPUT TYPE=SUBMIT
NAME=AspGridSave1 VALUE=Save>
<% End If %>
Go back to Lesson 5