SynapseIndia dotnet client library

Page 1

SynapseIndia Dotnet Client Library

Partial–Page 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>

Partial–Page 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>

AJAX Client LibraryASP.NET AJAX ASP.NET Client Library – 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: Class System: Class ASP.NET AJAX Client AJAX Library – Type System 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: Class System: Class ASP.NET AJAX Client AJAX Library – Type System 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 AJAXASP.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>

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.