Click here to Skip to main content
Click here to Skip to main content

ASP EasyForm: ASP.NET-like forms in two minutes

, 27 Nov 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
EasyForm allows you to create ASP.NET-like forms, with state keeping and server side event handling

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" --> 
<% 
' --- EasyForm variables Declarations --- 
EF.DimVar "email","text" 
EF.DimVar "role","select" 
EF.DimVar "button1","button"

' --- Call to init method
EF.init 

' --- Mandatory handler for onLoad event
sub EF_onLoad() 
	if EF.IsFirstLoad then 
		email.value = "type your email" 
		role.value = "noselection"
	end if 
end sub

' --- Handler for a button click
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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Vincenzo Rossi
Software Developer (Senior)
Italy Italy
I'm a graduate in Computer Science.
I work with C++, Visual Basic 6, C#, asp, asp.Net, Windows Forms, SQL Server, Access, Flash.
 


"Short code, good code"



Comments and Discussions

 
GeneralGood Code, Awesome Concept and Great Article PinmembersuperbDotNetDeveloper2-Dec-08 9:07 
GeneralRe: Good Code, Awesome Concept and Great Article PinmembersuperbDotNetDeveloper2-Dec-08 9:18 
AnswerRe: Good Code, Awesome Concept and Great Article PinmemberVincenzo Rossi3-Dec-08 9:32 
GeneralGreat solution! Thanks PinmemberGrazia30-Nov-08 8:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.141015.1 | Last Updated 27 Nov 2008
Article Copyright 2008 by Vincenzo Rossi
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid