12. april 2023 | Microsoft Norge

ASP.NET AJAX Control ToolkitJan Blomquist, MVP, MCT

www.traincert.net

www.cbtoffice.no

Agenda

Using the Toolkit for Page Development

Easily enhance existing websites (or create new ones)

Over 30 AJAX-Enabled Component

JavaScript skills not required

Drag-and-drop Design Experience– Will be improved in Orcas

Easily deployed to website’s BIN directory

Included source allows customization and/or fixes by customers

Creating a Toolkit-enabled Website

Using the Toolkit for Component Development

Primary focus on enabling easy AJAX component development

“Plumbing” code is included in templates so you don’t have to write it!

Lots of added functionality and features

Focus on preserving ASP.NET AJAX techniques and practices– Writing code with the Toolkit leverages ASP.NET

AJAX so you’re not learning different concepts

Many support alternatives (forums, community, source code, etc.)

More about 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

Extenders– ASP.NET components– Associate an ASP.NET Control with a Behavior– Leverage Server-Side and Design Time

The ASP.NET AJAX Library JavaScript Framework

Object oriented framework build on JavaScript

Provides automatic cross-browser compatibility layer

Built-in classes for WebService calls, Type system, basic DOM operations

Allows structured programming and encapsulation

No more sprinkling JavaScript around your site!

Creating A Toolkit Component

Two types of components in the Toolkit– Behavior + Extender– “ASP.NET AJAX-aware” Control (ScriptControl)

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

Anatomy of a Toolkit Component

The ExtenderThe Extender[ClientScript(“…”)][TargetControlType(typeof(Control))]public class MyExtender :

ExtenderControlBase{

[ExtenderProperty]public string MyStringProp{}

[ExtenderProperty]public int MyIntProp{}

}

Anatomy of a Toolkit Component

The ExtenderThe Extender

[ClientScript(“…”)]public class MyExtender :

ExtenderBase<TextBox> {

// …}

The BehaviorThe BehaviorMyProject.MyBehavior = function(e) { MyProject.MyBehavior.initializeBase(this, [e]); 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 ExtenderTThe Extenderhe Propertieshe Properties

public class MyExtenderProperties : PropertiesBase<TextBox>

{

public string MyStringProp{ … }

public int MyIntProp{ … }}

The BehaviorThe Behavior

AtlasControlToolkit.MyBehavior = function() { AtlasControlToolkit.MyBehavior.initializeBase(this); var _myStringPropValue;

this.initialize = function() { … }

this.get_MyStringProp = function(){} this.set_MyStringProp = function(value){}}

The MarkupThe Markup

<cc1:MyExtender runat=“server”TargetControlID=“TextBox1”MyStringProp=“Hello” MyIntProp=“23”

</cc1:MyExtender>

Anatomy of a Toolkit Component

The ExtenderThe Extender

[ClientScript(“…”)]public class MyExtender :

ExtenderBase<TextBox> {

// …}

The PropertiesThe Properties

public class MyExtenderProperties : PropertiesBase<TextBox>

{

public string MyStringProp{ … }

public int MyIntProp{ … }}

The BehaviorThe Behavior

AtlasControlToolkit.MyBehavior = function() { AtlasControlToolkit.MyBehavior.initializeBase(this); var _myStringPropValue;

this.initialize = function() { … }

this.get_MyStringProp = function(){} this.set_MyStringProp = function(value){}}

The MarkupThe Markup

<cc1:MyExtender runat=“server”><cc1:MyExtenderProperties

TargetControlID=“TextBox1”MyStringProp=“Hello” MyIntProp=“23”/>

</cc1:MyExtender>

The CodeThe Code

MyExtender ex1 = new MyExtender();ex1.MyStringProp = “Hello”;ex1.MyIntProp = 23;ex1.TargetControlID = “TextBox1”;Page.Add(ex1);

Creating an Extender Project

Toolkit package has Visual Studio templates for: • Toolkit-enabled website

• Toolkit component project

• Toolkit Components

• VB & C# for each

Creating a Toolkit Extender

GRATIS AJAX WIDGETS

GAIA AJAX Web Widgets for ASP.NET

– www.ajaxwebwidgets.com

– Gratis til alle deltagere på MSDN – Registrer deg med kupong

kode:gaiax (gyldig ut februar)

12. april 2023 | Microsoft Norge

Til slutt…

Hjelp oss å bli bedre– Fyll ut evalueringen som kommer på e-post– Gi direkte råd til Microsoft-representanter

Hold deg oppdatert– www.microsoft.no/informasjon – Besøk oss på www.microsoft.no/msdn eller

www.microsoft.no/technet