Introduction
EasyForm is a tiny classic-ASP library made up of two ASP files and less than 300 lines of code. Use it if you want:
- Automatic keeping of HTML controls state
- An easy way to set and get the control's values, attributes and additional data
- Server-side event handling
Background
ASP.NET technology takes advantage of the hundreds of classes in .NET Framework. Its power cannot be compared to the good old ASP, so it doesn't make sense trying to emulate its many features using the beloved ancestor. Even if that were possible, we would get a new complex framework. Such a work would be a waste of time: who would spend time learning to use a non-standard clone where there is the original? Nevertheless, classic ASP applications still exist and need maintenance, and others will be created. My purpose was to implement something that speeded up some work involved in creating ASP forms. It had to be easy to learn, easy to use, lightweight and able to work on hosting environments with restricted privileges (that is not allowing self-made COM objects).
Using the Code
First of all, my suggestion is to download and run the examples. The sample code is really simple to understand.
Two Minutes Recipe
Copy EasyForm.asp and Encryption.asp in any directory of your Web application.
Make a form page using a structure similar to the following:
<!--#include file="inc/EasyForm.asp" -->
<%
EF.DimVar "email","text"
EF.DimVar "role","select"
EF.DimVar "button1","button"
EF.init
sub EF_onLoad()
if EF.IsFirstLoad then
email.value = "type your email"
role.value = "noselection"
end if
end sub
sub button1_onclick()
response.write "user email = " & email.value
response.write "<br>user role = " & role.value
end sub
%>
<html>
<body>
<form method="post">
Email
<input type="text" <%email.Bind%> />
<br>
Role
<select <%role.bind%>>
<option <%role.addoption "noselection"%>>Select role...</option>
<option <%role.addoption "cs"%>>C# developer</option>
<option <%role.addoption "cpp"%>>C++ developer</option>
<option <%role.addoption "web"%>>Web developer</option>
</select>
<br>
<input type=button value="Save" <%button1.Bind %> />
<%EF.EndForm%>
</form>
</body>
</html>
That is:
- Include EasyForm.asp in your form page.
- Use
EF.DimVar to declare the EasyForm variables and their control type. - Call the
EF.init method. - Define the
EF_onLoad sub and write the initialization code. - Attach each HTML control to an
EasyForm variable using the Bind and/or AddOption methods of the variable. Don't specify the name and value attributes for controls other than buttons. When you attach an EasyForm "button" variable to a button control, you must define a handler for the click event of that button. Sample1 and Sample2 show how to attach each type of HTML control to an EasyForm variable. - Call
EF.EndForm before the enclosing tag of the form.
Tell Me More
EasyForm.asp
The EasyForm.asp file defines the two classes EasyForm and EFVariable, then it creates an instance of EasyForm class called EF, ready to be used in your pages.
Encryption.asp
This file is included in EasyForm.asp. Here we have the functions EF_Encrypt and EF_Decrypt, used internally to perform a trivial cryptography of data stored in hidden fields. Replace them if you need.
EF Object
The EF object is an instance of the EasyForm class created automatically when you include EasyForm.asp file.
EF.DimVar Method
EF.DimVar VarName, ControlType
VarName: string that specifies the name of the variable ControlType: string that specifies the type of HTML control to which the variable will be attached.
Possible values are "button", "checkbox","hidden", "password", "radio", "select" ,"text", "textarea", " ,"generic", "literal"
Declares an EasyForm variable. EasyForm variables are instances of class EFVariable. You must create them using EF.DimVar method. On creation, each variable reads its value from posted data, if any, matching the name you declared for it through EF.DimVar. Otherwise defaults to an empty string or to the value you assign it in EF_onLoad sub.
After it is declared, the EasyForm variable name exists at global scope. You will use it as any other object variable.
If you declare a "button" variable named MyButton and you attach it to a button control, then you must define a handler named MyButton_OnClick for the click event of that button. In more complex situations, you may use the EF_Call JavaScript function instead of attaching a "button" variable.
The "generic" type allows you to attach an EasyForm variable to a generic HTML element. This is useful to attach data to the element or to set its attributes in server-side code.
Literals are special EasyForm variables that do not need to be attached to a control or element. Literals are similar to classic variables, but they are able to remember their value in subsequent form postbacks, using encrypted hidden fields.
EF.init Method
You must call it after EasyForm variables declaration. This method calls the EF_onLoad sub and, if an event is fired, the related handler. If you need to use some global variables inside EF_onLoad or other handlers, declare and initialize such variables before calling EF.init.
EF.EndForm Method
You must call it. This method adds some hidden fields and the EF_Call JavaScript function to the form, in order to save controls state and to fire events to server side. Call it just before the enclosing tag of the form.
EF.IsFirstLoad Property
Boolean readonly property. Its value is true if the page is loaded for the first time.
EF_onLoad Sub
You must define this sub, even if it may be empty. The initialization code for the EasyForm variables should be placed here. This sub is called each time the page is loaded and you may use EF.IsFirstLoad property to distinguish between a first load and a postback. This is important to prevent your initialization code from overwriting the user inputs after a postback. You get and set the value of an EasyForm variable using its Value property.
EFVariable Class
An EasyForm variable is an instance of the EFVariable class. Its properties and methods make it easy to work with HTML controls. When you attach an EFVariable to an HTML control, you don't have to take care of keeping the control state in subsequent postbacks. The EFVariable does it for you. You must declare an EFVariable using EF.DimVar.
Value Property
The Value property allows you to get and set the string value of the variable. Depending on the type of HTML control to which the variable is attached, such a value will be rendered in the right way.
Bind Method
The Bind method attaches the variable to a control. You must call the Bind method in the HTML tag of the control. This method injects in the control HTML the variable name as the name attribute of the control. Also, based on controltype, it writes the HTML necessary to set the current value of the control. If you set some attributes using the Attributes property of the variable, then the Bind method injects the couples (AttributeName, AttributeValue) in the control. For <radio> and <option> tag, use AddOption instead.
NOTE: <select> tag still needs a call to Bind. See Sample1 and Sample2.
AddOption Method
AddOption OptionValue
It's similar to Bind method and must be used with <option> elements and <input type=radio>. See Sample1 and Sample2.
Attributes Collection Property
object.Attributes(AttributeName) = AttributeValue
StringVar = object.Attributes(AttributeName)
Gets and sets the string value of an attribute. When calling Bind method, the assignments AttributeName="AttributeValue" are written in the HTML for each attribute in the collection. If the attribute value is boolean and is true, then the only attribute name is written (example: readonly, disabled). The collection is stateful, and is stored in an encrypted hidden field. This means that if you set any attributes, you don't need to set them again in subsequent postbacks. See Sample3 and Sample4.
Data Collection Property
object.Data(DataName) = DataValue
StringVar = object.Data(DataName)
Gets or sets the string value for custom data. Unlike attributes, custom data are not automatically written in HTML. The collection is stateful, and is stored in an encrypted hidden field.
In case of select and radio controls, the data names can be indexed using the values of the options as indexes. You can get the data value corresponding to the selected option of the control using the value keyword:
object.Data(DataName[optionValue]) = DataValue
StringVar = object.Data(DataName[value])
See Sample4.
EF_Call JavaScript Function
EF_Call ( ServerSideSub [, Argument])
Called on client side, executes the server side sub specified in ServerSideSub parameter. If you specify an Argument then the sub must take a parameter. Calling EF_Call with an empty string performs a submit without calling any sub. See Sample3 and Sample4.
History
- 27th November, 2008: Initial post
