Vous êtes sur la page 1sur 15

Naresh

Information

Information
Technologies
Nagaraju Bende
nbende@gmail.com
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
nbende@gmail.com
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);