Scribd
Upload
59 views

Ajax Toolkit Blog

This document discusses how to create custom components for the ASP.NET AJAX Control Toolkit. It provides an overview of behaviors and extenders, and outlines the key elements needed to build an extender component, including the extender class, behavior class, properties class, client-side and server-side code, and markup. Examples are given of core controls in the toolkit and how questions from attendees will be handled.

Uploaded by

emraan khan
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

Ajax Toolkit Blog

This document discusses how to create custom components for the ASP.NET AJAX Control Toolkit. It provides an overview of behaviors and extenders, and outlines the key elements needed to build an extender component, including the extender class, behavior class, properties class, client-side and server-side code, and markup. Examples are given of core controls in the toolkit and how questions from attendees will be handled.

Uploaded by

emraan khan
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Naresh

Information

Information
Technologies
Nagaraju Bende
[email protected]
MCAD.NET Sr Consultant,Trainer
http://nbende.wordpress.com
Agenda Day 6
ASP.NET AJAX Control Toolkit.
Installing Toolkit
Toolkit Template
http://nbende.wordpress.com
ToolKitControls
Demos
Using the Toolkit for Page Development
Easily enhance existing websites (or create
new ones)
Over 50 AJAX-Enabled Components
JavaScript skills not required
http://nbende.wordpress.com
JavaScript skills not required
Drag-and-drop Design Experience
improved in VS 2008
Easily deployed to websites BIN directory
Included source allows customization and/or
fixes by customers
Installing Toolkit
CodePlex
Toolkit dll
http://nbende.wordpress.com
Toolkit dll
Toolkit Fundamentals
Cross-browser support (the Toolkit supports what
ASP.NET AJAX supports)
IE 6
IE 7
Firefox
http://nbende.wordpress.com
Safari
Opera
Plays nicely with other AJAX Frameworks
Extenders, Controls, and Behaviors
Code and official releases available at
http://www.CodePlex.com/
Behaviors and Extenders in ASP.NET
AJAX
Behaviors
Add or modify functionality to an element on the
page
Written in JavaScript
Modify the HTML DOM
http://nbende.wordpress.com
Modify the HTML DOM
Extenders
ASP.NET components
Associate an ASP.NET Control with a Behavior
Leverage Server-Side and Design Time
Creating A Toolkit Component
Two types of components in the Toolkit
Behavior + Extender
ASP.NET AJAX-aware Control (ScriptControl)
http://nbende.wordpress.com
Which to choose?
If required HTML shape is very specific, write a
control and then attach behaviors to it
If HTML shape is simple or common, write an
extender
Creating an Extender Project
Toolkit package has Visual Studio templates
for:
Toolkit-enabled website
Toolkit component
project
Toolkit Components
http://nbende.wordpress.com
Toolkit Components
VB & C# for each
<!-- Create an extender in markup
-->
<cc1:MyExtender runat=server
// Create an extender in code // Create an extender in code
MyExtender MyExtender ex1 = new ex1 = new MyExtender MyExtender(); ();
ex1.TargetControlID = TextBox1; ex1.TargetControlID = TextBox1;
Using a Toolkit Component
Creating An Extender: Creating An Extender:
http://nbende.wordpress.com
<cc1:MyExtender runat=server
TargetControlID=TextBox1
MyStringProp=Hello
MyIntProp=23 />
ex1.TargetControlID = TextBox1; ex1.TargetControlID = TextBox1;
ex1.MyStringProp = Hello; ex1.MyStringProp = Hello;
ex1.MyIntProp = 23; ex1.MyIntProp = 23;
Page.Add Page.Add(ex1); (ex1);
Some Toolkit Controls
1) Tabcontrol
2) ConfirmButton Extender
3) MaskedEdit
4) PasswordStrength
http://nbende.wordpress.com
4) PasswordStrength
5) ValidatorCallout

Questions ??
Nagaraju Bende
[email protected]
MCAD.NET Sr Consultant,Trainer
http://nbende.wordpress.com
Questions ??
Anatomy of a Toolkit Component
The Extender The Extender
[ClientScript()]
[TargetControlType(typeof(Control))]
public class MyExtender :
ExtenderControlBase
{
[ExtenderProperty]
http://nbende.wordpress.com
[ExtenderProperty]
public string MyStringProp{}
[ExtenderProperty]
public int MyIntProp{}
}
Anatomy of a Toolkit Component
The Extender The Extender
[ClientScript()]
public class MyExtender :
ExtenderBase<TextBox>
{
The Behavior The Behavior
MyProject.MyBehavior = function(e) {
MyProject.MyBehavior.initializeBase(this, [e]);
this._myStringPropValue = null;
http://nbende.wordpress.com
//
}
this._myStringPropValue = null;
this._myStringIntValue = 0;
}
MyProject.MyBehavior.prototype = {
initialize function() { },
get_MyStringProp : function(){},
set_MyStringProp : function(value){},
get_MyIntProp : function(){},
set_MyIntProp : function(value){}
}
Anatomy of a Toolkit Component
[ClientScript()]
public class MyExtender :
ExtenderBase<TextBox>
{
TThe TThe Extender Extender
he Properties he Properties
public class MyExtenderProperties :
PropertiesBase<TextBox>
{
The Behavior The Behavior
AtlasControlToolkit.MyBehavior = function() {
AtlasControlToolkit.MyBehavior.initializeBase(this);
The Markup The Markup
<cc1:MyExtender runat="server"
http://nbende.wordpress.com
//
}
{
public string MyStringProp{ }
public int MyIntProp{ }
}
AtlasControlToolkit.MyBehavior.initializeBase(this);
var _myStringPropValue;
this.initialize = function() { }
this.get_MyStringProp = function(){}
this.set_MyStringProp = function(value){}
}
TargetControlID="TextBox1"
MyStringProp="Hello"
MyIntProp="23"
</cc1:MyExtender>
Anatomy of a Toolkit Component
The Extender The Extender
[ClientScript()]
public class MyExtender :
ExtenderBase<TextBox>
{
The Properties The Properties
public class MyExtenderProperties :
PropertiesBase<TextBox>
{
The Behavior The Behavior
AtlasControlToolkit.MyBehavior = function() {
AtlasControlToolkit.MyBehavior.initializeBase(this);
The Markup The Markup
<cc1:MyExtender
runat="server">
The Code The Code
MyExtender ex1 = new
MyExtender();
http://nbende.wordpress.com
//
}
{
public string MyStringProp{ }
public int MyIntProp{ }
}
AtlasControlToolkit.MyBehavior.initializeBase(this);
var _myStringPropValue;
this.initialize = function() { }
this.get_MyStringProp = function(){}
this.set_MyStringProp = function(value){}
}
runat="server">
<cc1:MyExtenderProperties
TargetControlID="TextBox1"
MyStringProp="Hello"
MyIntProp="23"/>
</cc1:MyExtender>
MyExtender();
ex1.MyStringProp = "Hello";
ex1.MyIntProp = 23;
ex1.TargetControlID =
"TextBox1";
Page.Add(ex1);

You might also like