Welcome to the 24th chapter of the FREE online programming course:
A Beginner's Guide to Asp.Net Programming for Delphi developers.
In the chapter titled "Developing and Using Custom User Controls in ASP.NET" ASP.NET User Control were introduced as reusable page elements.
User Controls allow an ASP.NET developer to wrap the common UI features of a web applications into reusable components. This reusabilty is not just limited to one application. Properly written user controls can be distributed for use in other web applications too.
The easiest way to add user controls on a Web Forms page is by specifying the required "HTML" markup at design-time. In real world applications you'll want to be able to dynamically load a user control and place it on the page.
Just as you can programmatically create an instance of any ASP.NET server control on a Web Forms page, you can do the same with user controls by using the containing page's LoadControl method.
While this simple explanation sounds like easy to accomplish there are a few issues you need to take into account when using the LoadControl method:
- In what Page event (Load, Init, ?) should you place the LoadControl call,
- How do you handle events raised by the User Control,
- and similar...
Let's start by creating a rather simple yet complex (??) User Control.
The Calculator User Control
We'll first build a User Control that allows a page visitor to process simple arithmetic operations like adding two numbers.As explained in the last chapter, you add a User Control to an ASP.NET web application using the Project Manager.
Our Calculator user control will host a DropDownList web server control (to allow a visitor to select the arithmetic operation), two TextBox component, a Button and a Label:
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="Calculator.pas" Inherits="Calculator.TCalculator"%>The operationsList DropDownList will show a list of possible arithetic operations. When a user click the calcButton the values from textBox1 and textBox2 will be used to do the selected operatin; the result is then presented in the resultLabel Label.
<asp:Panel runat="server" id="calcPanel">
<ASP:DropDownList id="operationsList" runat="server"></ASP:DropDownList><br>
<ASP:TextBox id="textBox1" runat="server"></ASP:TextBox><br>
<ASP:TextBox id="textBox2" runat="server"></ASP:TextBox><br>
<ASP:Label id="resultLabel" runat="server">Label</ASP:Label><br>
<ASP:Button id="calcButton" runat="server" text="Do Calc"></ASP:Button>
</asp:Panel>
The Calculator User Control will also provide an event a developer can handle: CalculationComplete
A few other properties are also exposed by the Calculator, like BackColor (wraps the BackColor property of the control container: calcPanel), Operation (currently selected operation) and others.
Here's the source code of the TCalculator class (with 'Designer Managed Code' removed), interface section :
interface
type
//event signature
TCalculationComplete = procedure(Sender : TObject) of object;
//operation enum
TOperation = (Add, Subtract, Multiply, Divide) ;
//user control class
TCalculator = class(System.Web.UI.UserControl)
...
private
fCalculationComplete: TCalculationComplete;
procedure BindOperationList;
public
procedure SetOperation(const Value: TOperation) ;
function GetOperation: TOperation;
function GetCalcResult: string;
function GetBackColor: Color;
procedure SetBackColor(const Value: Color) ;
property BackColor : Color read GetBackColor write SetBackColor;
property Operation : TOperation read GetOperation write SetOperation;
property CalcResult : string read GetCalcResult;
//event
property CalculationComplete : TCalculationComplete add fCalculationComplete remove fCalculationComplete;
end;
implementation
...
An intermediate Delphi developer should be familiar with the above code - just some standard Delphi OOP mambo-jambo :)
Note: The CalculationComplete property declaration uses the add and remove keywords instead of read and write. The add and remove keywords indicate to the compiler that CalculationComplete is a multicast event. A multicast event is an event that can trigger multiple event handlers.
It's time to take a peak into the implementation section of the TCalculator class and how you can load this user control dynamically and place it on a Web Forms page ...
