Update Progress Control in ASP.NET AJAX

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 ControlPartial 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

Partial Page Updates-Timer Control
Using TimerControl with UpdatePanel to update the time on a page every five seconds
<head runat="server">
<title>Clock</title>
</head>
<body>
<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.

<title>Browser Life Cycle</title>
<script type="text/javascript">
function pageLoad(sender, args) {
alert("hello");
}
function pageUnload(sender, args) {
alert("goodbye");
}
</script>
</head>
<body>
<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
<title>ASP.NET AJAX Namespaces</title>
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>
<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.

<title>ASP.NET AJAX Class</title>
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>
<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
<title>ASP.NET AJAX Class Inheritance</title>
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>
<div> <asp:ScriptManager runat="server" ID="sm" /> </div>
</form>
</body>
</html>

Update Progress Control in ASP.NET AJAX

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Update Progress Control in ASP.NET AJAX

Similar to Update Progress Control in ASP.NET AJAX (20)

More from Synapseindiappsdevelopment

More from Synapseindiappsdevelopment (20)

Recently uploaded

Recently uploaded (20)

Update Progress Control in ASP.NET AJAX