SynapseIndia dotnet client library Development

SynapseIndia Dotnet Client Library

Partial Page Updates-Update Progress Control

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

<title>Update Progress</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

Some page content<br />

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" >

<ProgressTemplate> Processing… </ProgressTemplate>

</asp:UpdateProgress> More page content<br />

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

<ContentTemplate> <div style="border-style:solid;background-color:gray;">

<asp:Button ID="Button1" runat="server" Text="Update" /><br /><br />

<asp:Label runat="server" ID="time1"></asp:Label><br /> </div><br />

</ContentTemplate>

</asp:UpdatePanel><br />

</div>

</form>

</body>

</html>

Partial Page Updates –Update Progress Control

Partial Page Updates-Update Progress Control Partial Page Updates –Update Progress Control

Partial Page Updates-Timer Control

ASP.NET Ajax introduces the TimerControl which performs postbacks at defined

intervals.

Use the Timer control when the following is required:

• Periodically update the contents of one or more UpdatePanel controls without

refreshing the whole Web page.

• Run code on the server every time that a Timer control causes a postback.

• Synchronously post the whole Web page to the Web server at defined intervals.

The Timer control is a server control that embeds a JavaScript component into the

Web page. The JavaScript component initiates the postback from the browser

when the interval that is defined in the Interval property has elapsed.

When a postback was initiated by the Timer control, the Timer control raises the

Tick event on the server. An event handler for the Tick event can be created to

perform actions when the page is posted to the server.

Partial Page Updates –Timer Control

http://localhost:2417/AspNet_AJAX_Documentation/mref/T_System_Web_UI_Timer.aspx

Partial Page Updates-Timer Control

Using TimerControl with UpdatePanel to update the time on a page every five seconds <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Clock</title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager runat="server" ID="SM1" /> <div> <asp:TimerControl runat="server" ID="Time" Interval="5000" Enabled="true" /><asp:UpdatePanel runat="server" ID="TimePanel"> <Triggers> <asp:AsyncPostBackTrigger ControlID="Time" EventName="Tick" /> </Triggers> <ContentTemplate> <%= DateTime.Now.ToLongTimeString() %> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html>

Partial Page Updates –Timer Control

ASP.NET AJAX Client Library

The AJAX Library brings concepts from the .NET Framework to JavaScript running in the

browser, making the server and client coding models a bit more consistent

The AJAX Library has also added a client-side page lifecycle, similar in concept to the ASP.NET

server-side page lifecycle. This addition makes it easy to participate in the processing of

the page, work with partial page rendering, and provide event handlers for user actions.

ASP.NET AJAX Library establishes a page lifecycle for JavaScript code running in the browser

• The Browser Page Lifecycle

The pageLoad and pageUnload functions are the primary points to interact with the browser page lifecycle.

The pageLoad function is automatically called after the page is initially retrieved from the web server and some script

processing has occurred.

The pageUnload function is then called whenever a subsequent request is initiated (for postback, partial page rendering, or

even when navigating to a different application).

When the page is loaded again, even during partial rendering, the pageLoad function will again be triggered.



<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Browser Life Cycle</title><script type="text/javascript">function pageLoad(sender, args) { alert("hello");} function pageUnload(sender, args) { alert("goodbye");} </script></head><body><form id="form1" runat="server"> <asp:ScriptManager runat="server" ID="sm" /><div></div></form></body></html>


ASP.NET AJAX Client Library-Type System

The Microsoft AJAX Library adds a type system and extensions to JavaScript objects in order

to

provide

• Namespaces

• Inheritance

• Interfaces

• Enumerations

• Reflection

• Helpers for strings and arrays.

They enable to write ASP.NET AJAX applications in a structured way that improves

maintainability, makes it easier to add features, and makes it easier to layer

functionality.

The AJAX Library brings classic OOP concepts to JavaScript. It adds namespace support for

grouping functionality. It also provides helpful debugging facilities, a schema for

providing type information, and a means for localizing string and image resources.

ASP.NET AJAX Client Library – Type System

ASP.NET AJAX Client Library-Type System: Namespaces

The AJAX Library synthesizes namespaces by creating objects with those names.

Class definitions can be organized logically in just the same way that is organized using C# or

VB.NET.

If separate files are created for different namespaces, it is possible load them conditionally the

same way the Common Language Runtime loads just the assemblies it needs for an

application and does so on demand

ASP.NET AJAX Client Library – Type System : Namespaces

ASP.NET AJAX Client Library-Type System: Namespaces

<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"><title>ASP.NET AJAX Namespaces</title><script type="text/javascript">function pageLoad(sender, args) { Type.registerNamespace('Wrox.ASPAJAX'); alert(Type.isNamespace(Wrox.ASPAJAX)); //displays var namespaces = Type.getRootNamespaces(); var mystr=""; for(var i = 0, length = namespaces.length; i < length; i++) { mystr=mystr+"\n"+namespaces[i].getName(); } alert(mystr); //displays } </script></head><body> <form id="form1" runat="server"> <asp:ScriptManager runat="server" ID="scriptManager1" /> <div> </div> </form></body></html>

ASP.NET AJAX Client Library – Type System : Namespaces

ASP.NET AJAX Client Library-Type System: Class

Classes are reference types. All classes in JavaScript derive from object.

Classes in ASP.NET AJAX helps to create objects and components that derive from base

classes in the Microsoft AJAX Library by using an object-oriented programming model.

Classes can have four kinds of members: fields, properties, methods, and events.

• Fields and properties are name/value pairs that describe characteristics of an

instance of a class. Fields are composed of primitive types and are accessed

directly

• With properties, the value can be any primitive or reference type and is accessed

by get and set accessor methods. In ASP.NET AJAX, the get and set accessors are

separate functions, which by convention use the prefix "get_" or "set_" in the

function name

ASP.NET AJAX Client Library – Type System : Class


The AJAX Library follows the pattern of declaring a function as the class constructor.

JavaScript allows you to modify the prototype of the function directly, which is how the

AJAX Library creates class members.

The class must then be registered so that it can participate in the semantics of the type

system

• Local members are accessed with a prefix of “this”.

• The call to registerClass is on the type being registered. The prototype of the base

type in JavaScript has been modified to add type-system support. Once the type is

registered, an instance of it can be created and its members called.

• The registerClass function actually has three possible parameters: The first one is for

the name of the type, the second is for the base type being extended, and the last is

to specify any interfaces that the class implements.



<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"><title>ASP.NET AJAX Class</title><script type="text/javascript">function pageLoad(sender, args) { Type.registerNamespace('Wrox.ASPAJAX.Samples'); Wrox.ASPAJAX.Samples.Album = function(title, artist) { this._title = title; this._artist = artist; } Wrox.ASPAJAX.Samples.Album.prototype = { get_title: function () { return this._title; }, get_artist: function() { return this._artist; } } Wrox.ASPAJAX.Samples.Album.registerClass('Wrox.ASPAJAX.Samples'); var anAlbum = new Wrox.ASPAJAX.Samples.Album("Round Room", "Phish "); alert(anAlbum.get_title());}</script></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager runat="server" ID="sm" /> </div> </form></body></html>


ASP.NET AJAX Client Library -Type System: Class-Inheritance

Inheritance: Instead of modifying a type directly, inherit from it and extend it in

new members by overriding existing ones

In the prototype model, a derived class has full access to the private members of

the parent class. To be precise, in JavaScript the notion of private members is

not the same as in classic OOP.

ASP.NET AJAX Client Library – Type System : Class - Inheritance

ASP.NET AJAX Client Library-Type System: Class-Inheritance

<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>ASP.NET AJAX Class Inheritance</title> <script type="text/javascript"> function pageLoad(sender, args) { Type.registerNamespace('Wrox.ASPAJAX.Samples'); Wrox.ASPAJAX.Samples.Album = function(title, artist) { this._title = title; this._artist = artist; } Wrox.ASPAJAX.Samples.Album.prototype = { get_title: function () { return this._title; }, get_artist: function() { return this._artist; } } Wrox.ASPAJAX.Samples.Album.registerClass('Wrox.ASPAJAX.Samples');

Wrox.ASPAJAX.Samples.TributeAlbum = function(title, artist, tributeArtist) {

Wrox.ASPAJAX.Samples.TributeAlbum.initializeBase(this, [title, artist]); this._tributeArtist = tributeArtist; }


ASP.NET AJAX Client Library-Type System: Class-Inheritance

Wrox.ASPAJAX.Samples.TributeAlbum.prototype = { get_tributeArtist: function() { return this._tributeArtist; }, set_tributeArtist: function(tributeArtist) { this._tributeArtist = tributeArtist; } } Wrox.ASPAJAX.Samples.TributeAlbum.registerClass('Wrox.ASPAJAX.Samples.TributeAlbum', Wrox.ASPAJAX.Samples.Album); var anotherAlbum = new Wrox.ASPAJAX.Samples.TributeAlbum("Groove", "Various Artists", "Phish"); var title=anotherAlbum.get_title (); var tributeartist=anotherAlbum.get_tributeArtist(); alert("Title:"+title+",TributeArtist:"+tributeartist); } </script></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager runat="server" ID="sm" /> </div> </form></body></html>


Technology

SynapseIndia dotnet client library Development