Asp.Net Ajax Component Development
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Asp.Net Ajax Component Development

Uploaded on


  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • Add the reference to the JavaScript class normally and show the error message that occurs. Then switch to the ScriptManager
  • create


  • 1. ASP.NET AJAX Component Development San Diego .NET User Group Meeting February 6, 2007 Joel Rumerman
  • 2. Topics
    • AJAX Overview
    • ASP.NET AJAX Overview
    • Extending ASP.NET AJAX
    • Developing ASP.NET AJAX Components
  • 3. AJAX Overview
    • A synchronous J avaScript A nd X ML
      • The ability to execute a request to an HTTP endpoint (or SOAP) in an out-of-band fashion from a web page and receive a response and do something with that response
    • Asynchronous : talk to end points using a request - callback pattern
    • JavaScript : language used to execute the AJAX request and handle the response
    • XML (XSL, XSLT) : data transfer structure for data being passed to and from the server
  • 4. Other AJAX Pieces
    • XMLHttp : browser object that provides the ability to perform asynchronous requests.
      • browsers implement XMLHttp object in different ways
    • JSON : JavaScript Object Notation
      • Defined by a BNF
      • Used to pass data to and from the server
      • Lighter-weight compared to XML
  • 5. What is ASP.NET AJAX?
    • A new web development technology that integrates cross-browser client script libraries with the ASP.NET 2.0 development framework
      • Cross-browser client script libraries
        • Object-Oriented JavaScript Framework
        • .NET like Programming Constructs
          • Types
          • Inheritance
          • Interfaces
          • Events
        • Standardizes Client Programming Across Browsers
      • Server side ASP.NET features facilitate adding client behaviors to web pages
        • Classes contained within the System.Web.UI namespace
          • ScriptManager, ScriptReference, ScriptManagerProxy, UpdatePanel, Timer
        • Server code isn’t required
  • 6. The State of ASP.NET AJAX
    • On January 23, 2007 1.0 Shipped
    • Fully supported Microsoft product (24x7x365) for 10 years
    • Documentation, forums, downloads, and showcase at
    • Client source code available under Microsoft Permissive License
    • Server source code available under Microsoft Resource License
  • 7. Where is ASP.NET AJAX Going
    • Version 2 integrates directly with Orcas
      • Better IDE experience
        • JavaScript Intellisense
        • Debugging support
        • Better design time integration
      • More Features
        • Client Side Data Binding
        • Gadget Support
        • Better Web Part support
  • 8. Extending ASP.NET AJAX
  • 9. Goal
    • Create reusable custom ASP.NET AJAX Client Components and ASP.NET Server Controls that manage those components
  • 10. Types of Custom ASP.NET AJAX Client Components
    • Components
      • Typically non-visual
      • Not directly associated to DOM Elements
      • Derive from Sys.Component
    • Behaviors
      • Extend the behavior of an existing DOM Element
      • Derive from Sys.UI.Behavior
    • Controls
      • Represents a DOM Element as a client object
      • Derives from Sys.UI.Control
  • 11. Extending ASP.NET AJAX Process
    • Client Development
      • Defines something that should happen in the browser
      • Uses the ASP.NET AJAX prototype programming model
      • Relies upon the ASP.NET AJAX Client Runtime
    • Server Development
      • Developed using .NET code
      • Relies upon new ASP.NET AJAX libraries to register the JavaScript that manages the client component
  • 12. Steps to Create Client Components
    • Declare namespace
    • Declare new class
    • Declare internal members*
    • Define and implement properties*
    • Define and implement methods
    • Define events
    • Override base class methods^
    • Register class with framework
    • Declare inheritance from base class^
  • 13. Steps to Create Server Control
    • Declare control
    • Inherit from base class (i.e. control, label, panel, etc.)
    • Override base methods to emit JavaScript to control client component as necessary
  • 14. Developing ASP.NET AJAX Components
  • 15. Steps to Develop a Component
    • Setup the Environment
    • Develop the client code
    • Develop the server control
    • Wire up the server control to the client code
  • 16. Setting Up the Environment
    • Creating an ASP.NET AJAX Enabled Project
      • Included libraries
        • System.Web.Extensions.dll
        • System.Web.Extensions.Design.dll
      • Web.Config Settings
        • Section Groups
        • Assembly Inclusion
        • HttpHandlers
        • HttpModules
  • 17. Develop the Client Code
    • Register a Namespace
    • Declare the Component
    • Initialize inheritance from the base class
    • Register the Component with the runtime
    • Inherit from Sys.Component
  • 18. DEMO Creating a New ASP.NET AJAX Component
  • 19. Component’s Lifecycle
    • An ASP.NET AJAX Component is managed by the ASP.NET AJAX runtime just like an ASP.NET Control is managed by the ASP.NET page handler
    • Just like the ASP.NET Control, the ASP.NET AJAX Component goes through a lifecycle
      • ASP.NET Server Control
        • OnInit
        • CreateChildControls
        • PreRender
        • Render
        • Etc.
      • ASP.NET AJAX Component
        • Initialize
        • Dispose
  • 20. DEMO Adding the Initialize and Dispose Method Overrides
  • 21. Registering with the Runtime
    • Our component relies upon the ASP.NET AJAX Framework Runtime
      • Runtime must be loaded before our component’s code is parsed
      • Use ScriptManager to add component definition to page
        • Guarantees that our component will be parsed after the Runtime is loaded
  • 22. DEMO Registering our Component with the Runtime
  • 23. Instantiating the Component
    • Creating the component
    • Two Ways
      • var myComponent = Sys.Component.create( ComponentType, {id: “name”} );
      • var myComponent = $create( ComponentType, {id: “name”});
    • Both create the component, add it to the runtime’s component collection, and initialize the component.
    • Adding it to the component’s collection ensures that the same component with the same id isn’t created more than once.
  • 24. DEMO Instantiating our Component
  • 25. Develop the Server Control
    • Wire our new client component to a new server control
      • E.g. <ASP:Label … />
        • <span></span>
      • E.g. <NewTag:OurNewComponent …/> =
        • <script type=“javascript> $create(Interknowlogy.AJAX.OurNewComponent); </script>
    • Use ScriptManager.Registerxxx rather than Page.ClientScript.Register xxxx
      • Ensures that the JavaScript is registered properly when the control is contained within an UpdatePanel
  • 26. DEMO Create a Server Control Wired to Our New Component
  • 27. Develop the Server Control
    • Associate the Server Control to the Component’s client definition
      • Embed the JavaScript in the DLL as a resource
      • Load the JavaScript into the ScriptManager using a ScriptReference
  • 28. DEMO Add the Client Code to the Server Control
  • 29. More Client Code – Private Members and Properties
    • Private members
      • Use this._**** style
        • this._enabled
        • Private by convention, not be practice
    • Public properties
      • Use this.get_****, this.set_**** style
        • this.get_enabled: function() { return this._enabled;}
        • this.set_enabled: function(value) { this._enabled = value; }
    • Following these conventions sets up the ability for intellisense to work properly in Oracas
  • 30. DEMO Adding Private Members and Public Properties
  • 31. More Client Code – Validating Parameters
    • Very similar to .NET parameter checking capabilities
    • Built-in parameter validation functionality
    • var e xception = Function._validateParams(arguments, [{name: &quot;value&quot;, type: Boolean}]);
      • arguments represents the arguments of the method
      • Array of argument description objects
        • Name of argument (i.e. “value”)
        • Type of argument
          • Boolean, Function, Number, String, Sys.WebForms.PageRequestArgs, user-defined
        • Optional arguments
          • may be null
    • Exception is assigned to an error if the parameters did not validate properly
  • 32. DEMO Validating Parameters
  • 33. More Client Code - Events
    • All components have eventing model built-in
    • Add and removing events to the base class event collection
      • this.get_events().addHandler( eventName , function);
      • this.get_events().removeHandler( eventName, function);
    • Wrap adding/removing of events in “add_ eventName ”, “remove _eventName ” methods
      • add_enabledChange: function(handler) {…}
      • remove_enabledChange: function(handler) {…}
    • Again, provides ability for intellisense in Oracas
  • 34. DEMO Creating Event Handlers and Wiring Them Up
  • 35. DEMO A Useful Component - PostBackDisabler
  • 36. Contact Info
    • Joel Rumerman
    • Email: [email_address]
    • Blog: http://