Вы находитесь на странице: 1из 16

SynapseIndia Dotnet Client

Library

PartialPage
UpdatesProgress Control
Partial Page Updates
Update
Progress Update
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>

PartialPage
UpdatesProgress Control
Partial Page Updates
Update
Progress Update
Control

Partial
Page
Updates-Timer 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
<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>

ASP.NET
AJAX Client Library
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.

ASP.NET
AJAX Client Library
ASP.NET AJAX Client
Library
<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.NETLibrary
AJAX Client
LibraryASP.NET AJAX Client
Type
SystemType 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 LibraryType System:
Namespaces
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 LibraryType 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
Client
LibraryType: System:
ASP.NET AJAX
ClientAJAX
Library
Type
System
Class 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
Client
LibraryType: System:
ASP.NET AJAX
ClientAJAX
Library
Type
System
Class 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.

ASP.NET AJAX ASP.NET


Client Library
Type
System
ClassClass
AJAX Client
Library
Type :System:
<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
Type System
: Class
- Inheritance
ASP.NET
AJAXLibrary
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
AJAXLibrary
Client LibrarySystem:
Class-Inheritance
ASP.NET AJAX
Client
TypeType
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
AJAXLibrary
Client LibrarySystem:
Class-Inheritance
ASP.NET AJAX
Client
TypeType
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>

Вам также может понравиться