• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Asp.Net Ajax Component Development

Asp.Net Ajax Component Development






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Add the reference to the JavaScript class normally and show the error message that occurs. Then switch to the ScriptManager
  • create

Asp.Net Ajax Component Development Asp.Net Ajax Component Development Presentation Transcript

  • ASP.NET AJAX Component Development San Diego .NET User Group Meeting February 6, 2007 Joel Rumerman
  • Topics
    • AJAX Overview
    • ASP.NET AJAX Overview
    • Extending ASP.NET AJAX
    • Developing ASP.NET AJAX Components
  • 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
  • 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
  • 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
  • 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 http://ajax.asp.net
    • Client source code available under Microsoft Permissive License
    • Server source code available under Microsoft Resource License
  • 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
  • Extending ASP.NET AJAX
  • Goal
    • Create reusable custom ASP.NET AJAX Client Components and ASP.NET Server Controls that manage those components
  • 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
  • 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
  • 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^
  • 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
  • Developing ASP.NET AJAX Components
  • 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
  • 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
  • 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
  • DEMO Creating a New ASP.NET AJAX Component
  • 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
  • DEMO Adding the Initialize and Dispose Method Overrides
  • 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
  • DEMO Registering our Component with the Runtime
  • 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.
  • DEMO Instantiating our Component
  • 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
  • DEMO Create a Server Control Wired to Our New Component
  • 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
  • DEMO Add the Client Code to the Server Control
  • 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
  • DEMO Adding Private Members and Public Properties
  • 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
  • DEMO Validating Parameters
  • 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
  • DEMO Creating Event Handlers and Wiring Them Up
  • DEMO A Useful Component - PostBackDisabler
  • Contact Info
    • Joel Rumerman
    • Email: [email_address]
    • Blog: http:// blogs.interknowlogy.com/joelrumerman