Your SlideShare is downloading. ×
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Building Rich Web UI with the Microsoft AJAX Library, Extensions ...
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building Rich Web UI with the Microsoft AJAX Library, Extensions ...

1,856

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,856
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 04/29/10 12:02 ©2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. Overview Talk about the goals of the web platform, why it is the preferred mechanism for delivering application that need a broad reach Script The overall themes of the web platform can be broken down into 4 categories: Developer Productivity ASP.NET 2.0 has dramatically reduced the amount of code that is needed to product enterprise ready applications. In some cases, up to 70% of code reduction has been reported by simply choosing ASP.NET as a platform. That is pretty shocking if you stop to think about it. It is important to note that not only does the .NET Framework provide the infrastructure to reduce code, but Visual Studio gives a RAD approach to building web applications. Using the Framework and Visual Studio, richer web scenarios are possible. Extensibility The .NET Framework allows for complete customization of how you implement code and services. The ability for the framework to understand attribute based programming means that newer frameworks can be added to existing frameworks. Today you are going to see how ASP.NET AJAX extends the framework to enable a richer web experience. Administration & Management From an Admin point of view, managing multiple applications recourses on a single or multiple servers is not complicated. Using tools built into IIS, counters built into the .NET Framework, and ASP.NET’s built in administration capabilities, the ASP.NET web platform is by far the easiest platform to administer and manager.
  • 04/29/10 12:02 ©2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. Overview Discuss User Experience Script As applications get more complicated and users become more educated on using computers, users are more demanding on what they expect out of an application. There are several factors that need to be include – obviously look and feel is important, how the user clicks a button and what happens when that button is clicked – that is important too. But even more so is the emotional connection a user can feel with an application or piece of hardware. Think about people who love using Microsoft Money – people love Money. They love the UI, they love the interaction. They love the colors, they love how the screens change, they love the menus, the toolbars, etc. They are emotionally attached to the application. There is something special about how they feel when they use the application. This needs to be a goal of every application developer – a user experience so amazing that emotions take over and the application is embraced. This does start at the UI – Gartner Group reported several years ago that 40 to 60 percent of development time should be spent on the presentation layer. I think most of here would agree that this is not the case in most of their applications. But it needs to be. Better User Experience is what makes a good application a GREAT application. If we look at why most applications do not create an emotional reaction out of users, it is probably because they are too hard to design. If we take a poll in this room and ask who enjoys working with graphics designers when it comes to building out applications, the answer would probably be “not many”. The tools are complicated, you cannot expect a designer to fully understand everything about your goals. So they create mock-ups, and you are expected to somehow re-create that beauty in the application. It is difficult to say the least. As User Experience becomes more important to organizations, it will become more important to include the designer in the lifecycle of the application development, and vendors will need to improve the tooling to make it easier for designers and developers to work together.
  • 04/29/10 12:02 ©2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. Overview ASP.NET AJAX is step towards building a great user experience. Script Now we get to the tools to help build a better user experience. With ASP.NET AJAX, you get a complete framework for building rich, interactive applications in the browser. The experience is better across the board – from the developer to the end user. From a developer perspective you are writing much less code to do very complex user interaction scenarios. Who wants to write code that does drag and drop in a web page? And they somehow write code that is going to remember where those items were dropped the next time a user visits a page? Well, that would be hundreds or maybe even thousands of lines of code in Javascript and C#. With the tools and components available in ASP.NET AJAX, it is no code at all! Newer frameworks should be delivering increased productivity – ASP.NET AJAX does that. You will be convinced by the end of this talk. From a debugging and maintenance perspective, you have a better separation of the code from the design. This means it will be easier to find out where problems exist when debugging. Now this is also because everything is integrated with Visual Studio, so you get all of the great benefits of VS which accounts for an enormous amount of productivity gains when developing applications. You are also using the same model we are all used to using when developing applications – server controls. Using server controls, you can simply drag and drop controls and components on a page, and the correct JavaScript and HTML gets generated on the server and sent down to the client. This is no different in ASP.NET AJAX – you develop your applications the same way you do now – dragging controls onto a webform in Visual Studio, and letting the tools do their magic. The best part of all of this is that everything shipping with ASP.NET AJAX is standards compliant – all Javascript and HTML are cross browser compatible. You do not need to worry about FireFox or Opera not being able to take advantage of the features you are building. The framework will work no matter what browser your pages are being hosted in.
  • Overview Describe the 2 key components that make up ASP.NET AJAX Script So what do you need to actually take advantage of these great capabilities. First, you need the ASP.NET 2.0 AJAX Extensions. This is of course the framework previously known as ATLAS. This the core client and server framework for ASP.NET AJAX. You get all of the client and server code needed to do pure cross browser JavaScript, as well as these key server controls : Timer UpdatePanel UpdateProgress ScripManager ScriptManagerProxy – that can AJAXify any of your existing applications without you needing to change a single line of code. That is what is most exciting about this new stuff – you can go home today, download ASP.NET AJAX Extensions, install them on your server, and take advantage of these great new AJAX capabilities without have to change any of your existing code. A few things to note if you are moving from a CTP or Beta to the RTM: <atlas:> Script Tags are now <asp:> script tags Assembly reference - Old - Microsoft.Web.Atlas.dll - New - Microsoft.Web.Extensions.dll It is important to note that the ASP.NET 2.0 AJAX Extensions are fully supported by Microsoft. The next part you’ll need to look at is the ASP.NET 2.0 AJAX Futures CTP’s. These are another set of great controls that did make it into the final bits of the ASP.NET 2.0 AJAX Extensions, but are being considered for future release. The controls in the Futures CTP include: DragOverlayExtender ProfileService TimerControl WebPartManager WebPartZone So should you consider using the Futures CTP? I think the answer is Yes if you want more impressive UX controls in your applications. They are CTP’s so they are not supported by Premiere Support Services. 04/29/10 12:02 © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • 04/29/10 12:02 ©2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. Note: "Web Services Bridge" is in the Futures CTP only – when discussing the Service Proxies, make sure to mention that it's CTP only. Overview Cover the overall architecture of the framework Script If we take a look at a visual of where all the pieces fit together, you’ll see how the parts make up the whole. Let’s remember that the overall concept of AJAX is simple, but if you need to write your own home-grown AJAX code for your entire application, you will be writing a lot of code and doing a lot of debugging. The goal of this AJAX framework is to simply your AJAX experience, and in most cases, allow this experience without you writing a single line of code. I want you to look at this diagram in 2 parts – a Client Side and a Server Side. The reason this is important is that most of the time, you will probably be doing your work on the Server side. This is the comfort zone for most ASP.NET developers – the ability to use Visual Studio 2005 and Server controls to build out applications. This does not mean you are not using the Client side, which we’ll cover on the left side of this diagram. But it does mean that you are not required to dig into the Client side. This abstracted out into server controls, but you still get all the benefits of it. Now, for the hard-core JavaScript guys out there – you can enjoy the entire object oriented client script libraries to build out your applications. <hit enter to animate first slide> So first , you have the Client Script Library. The Client Script Library has some core capabilities, but it boils down to this: A consistent, object-oriented set of APIs for developing in JavaScript. A typing and type-reflection framework for client script. Automatic browser compatibility, so that you do not have to write code or deploy components to make your applications run in multiple browsers. Client-script APIs and components that support rich UI features, which saves you from having to write the extensive code normally required in AJAX-style applications. For example, ASP.NET AJAX provides commonly used behaviors including drag and drop and auto-completion, which you can bind to HTML controls with minimal coding. A declarative scripting model for client development that is similar to the declarative syntax for ASP.NET server controls. This can reduce or eliminate complex coding <hit enter to animate> And then you have the Server side, which ASP.NET 2.0 is the rock upon which everything is built. The AJAX Extensions are running on top of ASP.NET 2.0, as well other technologies like the ASMX and WCF. As I mentioned a little earlier, this is where the power of ASP.NET 2.0 is recognized – you have a high performing, scalable, extensible framework for building almost any type of web based application you can think of. Add AJAX on top of that, and you have a killer platform.
  • Overview Continue with the 2-sided way of the development scenarios that were described in the previous slide before the demo – Client and Server. Script So let’s just bring home the 2 development scenarios that you are looking at – Client and Server based development. Of course we are all used to server side development, using server controls, drag and drop onto forms, etc. With the AJAX Extensions, this allows for an incremental approach to building these new AJAX style applications with the ASP.NET Ajax Extensions. As a matter of fact, one of the key controls that is included in the ASP.NET Ajax Extensions is the UpdatePanel, which we’ll talk about a little later. The beautiful thing about this control is that you can add AJAX to any part of your web page without changing any code at all. So this means your UI code is still in your code-behind, and the new AJAX functionality is in the ASPX page. No code changes. So you might be wondering how your ASPX page even knows to use AJAX on it. And that is a great questions. There is a single absolute requirement for using ASP.NET AJAX Extensions or Futures CTP or Control Toolkit controls on a page - the ScriptManager control – All server side features that use AJAX Extensions or Futures CTP on a Web page, such as partial page updates, custom and library client script referencing and rendering, Web service referencing -- for client-side asynchronous access and exception handling are managed by this control. Every single asp.net Web page or user control that requires implementing 'Atlas' functionality needs to declare a single instance of this control. If you choose to do all or just some of your coding on the client side, you are accessing classes, properties, methods and events in JavaScript just like you would in C#. You would use the client side model if you cannot get the granular control you might need for a richer user experience. There are always going to be edge cases where the functionality of the AJAX Extension, Future CTP or the Control Toolkit do not meet your needs. That is why this client side framework is so important – it gives you full reign over the client. A little later we are going to talk about the client side script libraries. 04/29/10 12:02 © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Overview Talk about the most important control in the AJAX Extensions – the UpdatePanel. Script So now let’s talk about what I would consider the most interesting and arguably the most “to be used” control in the new framework. This is the UpdatePanel. The UpdatePanel control is a server control that helps you develop Web pages that exhibit complex client behavior. For example, developing a Web page so that only specified parts of the client page are updated requires a high degree of specialized knowledge and coordination between server and client. By using the UpdatePanel control and a ScriptManager control, you can automatically enable your Web page to participate in partial page rendering without writing any client script. If you choose, you can additionally enhance the client user experience with additional client script. Using UpdatePanel controls makes your Web page appear more interactive to the end user. Additionally, your page behavior is browser-independent and might also potentially reduce the amount of data transferred between client and server. If you define a ScriptManager control on a master page, by default partial-page updates are enabled for all content pages. If do not want to enable partial updates for an individual content page, you can disable that capability. You might do this is if your content page contains custom controls that are not compatible with partial-page updates. If partial-page rendering is not enabled for a page, or if it has been disabled or is not supported in a client browser, the fallback behavior for the page is to perform a postback, as with any ASP.NET Web page. Actions that normally would perform an asynchronous postback instead perform a synchronous postback and update the entire page. Any UpdatePanel controls on the page are effectively ignored, and their contents are rendered as if they were not inside an UpdatePanel control. <note: the following block is supplemental information> How UpdatePanel Controls Work UpdatePanel controls work by specifying regions of a page that can be updated without refreshing the entire page. This process is coordinated by ScriptManager server control and the client PageRequestManager class. When partial-page rendering is enabled, controls asynchronously post back to the server. An asynchronous postback behaves similarly to a regular postback in that the resulting server page executes the page and control life cycle. The difference is that with an asynchronous postback, the page rendering is limited to the regions of the page enclosed in UpdatePanel controls and marked to be updated. Fragments of HTML are sent back to the client, where the PageRequestManager performs Document Object Model (DOM) manipulation to replace existing HTML with updated fragments. 04/29/10 12:02 © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Overview Discuss how an UpdatePanel can be triggered to do an asynchronous postback Each UpdatePanel has a Triggers Collection that allows an Async or Synchronous postback to be triggered by another control. This is a common use-case when you are using UpdatePanels on a form. You may have multiple panels on a form, and external events may need to force the asynchronous postback of a panel. This is where Triggers come into play. So let’s look at how the UpdatePanel actually works with it’s AsyncPostBack capability - When you use UpdatePanel controls to specify partial-page updates, by default, any control inside an UpdatePanel control causes an asynchronous postback and refresh of the panel's contents. However, you can also declaratively specify what causes an UpdatePanel control to refresh during partial-page updates. You do this by defining a trigger for the UpdatePanel. A trigger is a binding that specifies what postback control and event can cause an update of a panel's contents. When the specified control's event is raised (for example, a button's Click event), the update panel is refreshed. 04/29/10 12:02 © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Overview Introduce Extender Controls Script So the UpdatePanel is pretty exciting – it can AJAXify your applications without the requirement of you changing any code. The next type of control to introduce is a set of Extender controls. The Extender controls that ship with the Futures CTP extend existing asp.net and 3 rd party controls with added client-side functionality. The DragOverlayExtender control, for example, enables drag-and-drop behaviour. The AJAX Control Toolkit, which we’ll cover later, includes a multitude of extenders. One of the most popular of those extenders is the AutoCompleteExtender. The beauty of the extender controls is there simplicity – they each only have the exact number of properties to do their task. For example, to “extend” a textbox to do Google-Suggest like auto-complete, all you need to do is drag a ScriptLibrary onto your page, an AutoCompleteExtender , and a plain old <asp:TextBox> control. On the AutoCompleteExtender, you set 4 properties: The target control that is going to have the auto-complete UI (in this case, TextBox1) The WebService that has the method you are going to call which returns the values for the auto-complete The method in the WebService The number of Characters you want to start searching after – for example, if you set the MinimumPrefixLength to 4, then the auto-complete will trigger at 4 characters typed into the TextBox 04/29/10 12:02 © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Overview Discuss the ability to show visual progress of the AsyncPostback that is occurring Script Since the first time I saw Expedia doing a search for my airline flights, I always wanted to do the fancy “progress updates” in my applications. My problem ended up being that I was never actually doing anything asynchronously. Now with ASP.NET AJAX, I have asynchronous operations going on all the time. And a new control in the toolbox is the UpdateProgress control. The UpdateProgress control enables you to provide feedback on the progress of partial-page rendering. For postbacks or initial page rendering, UpdateProgress control content is not displayed. There can be many UpdateProgress controls on a page, each associated with a different UpdatePanel control. Alternatively, you can use one UpdateProgress control and associate it with all UpdatePanel controls on the page. The UpdateProgress control renders a <div> element that is displayed or hidden depending on where a postback originates and on whether the AssociatedUpdatePanelID property of the UpdateProgress is set. Associating an UpdateProgress with an UpdatePanel You associate UpdateProgress controls with an UpdatePanel control by setting the AssociatedUpdatePanelID property of the UpdateProgress control. When a postback event originates from inside an UpdatePanel control any associated UpdateProgress controls are displayed. If you do not set the AssociatedUpdatePanelID property, the UpdateProgress control will display progress for any asynchronous postback that originates from inside any UpdatePanel or for controls that are triggers for panels. The following table summaries the AssociatedUpdatePanelID property's effect on UpdateProgress control behavior. Specifying Contents of the UpdateProgress Control Use the ProgressTemplate property to specify the message displayed by an UpdateProgress control. If the ProgressTemplate property is empty, nothing will be shown when the UpdateProgress control is displayed. The template can contain HTML and markup. For example, you could show an animated image that notifies the user that the postback is processing and a button that the user can click to stop the partial-page rendering update. Additionally, you might want to prevent all other postbacks from happening while one is in progress. You can also customize when UpdateProgress controls are displayed. If you need finer control over when an UpdateProgress control is displayed, you must provide client script for the beginRequest and endRequest events of the PageRequestManager class. In the beginRequest event handler, display the DOM element that represents the UpdateProgress control and in the endRequest event handler, hide it. The following are examples of scenarios where you must provide client script to show an UpdateProgress control when a target UpdatePanel is updated: A postback from a control that is registered as an asynchronous postback trigger for the panel, and there is an UpdateProgress control on the page but its AssociatedUpdatePanelID property is not set to the panel's ID. Postbacks from controls that are registered as asynchronous postback controls using the RegisterAsyncPostBackControl(Control) method of the ScriptManager control. 04/29/10 12:02 © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • 04/29/10 12:02 ©2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. Overview Cover the contents of the Client Script Library in more detail Script Earlier we touched on the Client Script Library, and how it is the core framework for what is actually happening on the client. So it is important to understand that when you are added the ScriptManager to a page, you are telling the page to manage the what scripts need to get sent down to the client in order to successfully execute the AJAX on the page. So what does the ScriptManager manage: Script resources for client pages, which includes the Microsoft AJAX Library as well as any custom scripts that you want to send to the browser. For more information, see ASP.NET AJAX and JavaScript. Partial-page rendering, which enables regions on the page to be incrementally refreshed without a postback. The ASP.NET 2.0 AJAX ExtensionsUpdatePanel, UpdateProgress, and Timer controls require a ScriptManager control. JavaScript proxy classes for Web services that simplify client scripting with Web services by exposing Web services as strongly typed objects. Custom authentication Web service and user profile information. Why is this important? Well you need to understand that you can actually just write all of this code yourself in JavaScript in the HTML of your pages using the Client Script Library. The ASP.NET AJAX client script libraries consist of a number of JavaScript (.js) files that provide features for object-oriented development. This was not previously available to developers in a scripting environment, and it enables a new level of consistency and modularity in client scripting. The following layers are included in the ASP.NET AJAX script libraries: A browser compatibility layer. This provides compatibility across most browsers for your ASP.NET AJAX scripts. core services, which include a number of extensions to JavaScript, such as classes, namespaces, event handling, inheritance, data types, and object serialization. An ASP.NET AJAX base class library, which includes components like string builders and extended error handling. A networking layer that handles communication with Web-based services and applications, and managing the asynchronous remote method calls. A UI layer that provides a number of ASP.NET AJAX client capabilities: behaviors, ASP.NET AJAX declarative syntax, UI components, and data binding. A controls layer that creates ASP.NET AJAX-specific controls for client development. These controls can be data-bound, scripted, bound to ASP.NET AJAX behaviors such as drag and drop, and so on. This layer includes controls such as an auto-completion text box, ordinary form controls, a data-bound listview control, and navigation controls.
  • Overview Discuss how you can work with a register your types when using the client script library Script Now that you get the idea that the client script library is created in a object oriented fashion, how can you write your custom client script to leverage these capabilities? The Microsoft AJAX Library Type methods extend object-oriented programming functionality to your code with a typing system and type reflection. Similar to the server aspect of programming, you have the ability to use various types when developing applications. A key way to mange these types is through namespaces. Namespaces will help you avoid collisions with same-named functions. This is the same concept used in the .NET Framework namespaces. So you can use fully qualified references, like namespace.class.method . You will register code relationships and structure including classes, interfaces, base classes and enumerations for use across your client side application. Use the Type reflection methods such as Type.isInstanceOfType and Type.isImplementedBy for inspecting classes. You can create enumerations using the Type.createEnum method. The Microsoft AJAX LibraryType methods support single inheritance as well. You can derive one class from another by following these steps: Specify a base class in the baseType parameter of the Type.registerClass method when registering the derived class. Initialize the derived class's base by calling the Type.initializeBase method in the first line of the derived class's definition. Remember – the whole idea of this OO JavaScript is to help you architect and write code in a similar fashion that you would on the server. 04/29/10 12:02 © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Overview You can create custom extender controls that take advantage for of the client behavior Script There may be times that you want to create your own custom extender controls that you saw earlier. You can do this with a little bit of server code and client code. An extender control is made up of 2 parts, the client piece and the server piece. The client piece is know as the “client behavior” and the server part of a behavior is an extender control. An extender control is a Web server control that inherits the ExtenderControl abstract class from the System.Web.UI namespace. An extender control class definition includes one or more TargetControlType attributes that identify the type of control to which the extender control can be applied. To create a new extender control, you can inherit from the ExtenderControl Abstract Class or implement the IExtenderControl interface. Either way, the ExtenderControl abstract class has the following two required members that you must implement in an extender control. GetScriptDescriptors(Control) Returns a collection of ScriptDescriptor objects that describe the client capabilities of the associated behavior, including properties, events, and so on. GetScriptReferences() Returns a collection of ScriptReference objects that describe client scripts to be included with the behavior. Once you have created your server class, you create a JavaScript file on the client that handles the eventing, properties, and it registers the namespaces well as the class of the behavior. In the Hands on Lab you can do later, you will be going step by step on how to created a custom extender. 04/29/10 12:02 © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Overview Talk about calling a Web Service from client script Script ASP.NET AJAX allows you to call ASP.NET Web services (.asmx files) from the browser using client script. This brings a rich experience to a Web application without the need to post back, because only data is transferred between the browser and the Web server. ASP.NET AJAX provides the foundation for calling Web services by exposing JavaScript proxies from Web services. ASP.NET AJAX also provides built-in support for JavaScript calls to ASP.NET application services such as profile and membership authentication. To call a Web service from an ASP.NET Web page, you add a ScriptManager control. In the <asp:ScriptManager> element on the page, you define the Web service location by creating an <asp:servicereference> child element and setting its path attribute. The ScriptManager control's Services collection contains a ServiceReference object for each Web service registered with ScriptManager. Microsoft ASP.NET AJAX generates a client proxy object for each ServiceReference object in the Services collection. You can programmatically add ServiceReference objects to the Services collection to register Web services at run time. When you register a Web service with the ScriptManager control, a JavaScript proxy class for the Web service is generated and sent to the client as a script resource. Being able to write client script using the proxy class object and strongly typed members simplifies using the Web service. For more information, see Web Services. You can also expose a Web service method in an ASP.NET page, which enables you to call the page as a Web service instead of creating a separate .asmx file. To do so, in the page's code, import the System.Web.Services namespace and add a WebMethodAttribute to each method that you want to expose. Note: [Microsoft.Web.Script.Services.ScriptMethod] : for any method used as page method. [Microsoft.Web.Script.Services.ScriptService] : for any webservice to include for an extender or just typical JS reference, etc.. 04/29/10 12:02 © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Overview WebService Success/Failure Callbacks are available Script When working with calling web services from client script, you should use the client callback parameters to execute the success or failure code of your call. This is a just a straight forward best practice for using the client library and web services. 04/29/10 12:02 © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • 04/29/10 12:02 © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • ANIMATED SLIDE NOTE – HIT ENTER MID-WAY THRU YOUR TALK TO DISPLAY THE LIST OF CONTROLS Overview Talk about the exciting controls in the AJAX Control Toolkit Script The ASP.NET AJAX Control Toolkit is a collection of samples and components that makes it easier then ever to build and consume rich client-side ASP.NET AJAX controls and extenders. The toolkit provides both ready to go samples and a powerful SDK to simplify the creation and re-use of your own custom controls and extenders. Inside the toolkit you will find: A rich set of sample controls and extenders that make spicing up your web site with rich functionality a snap. Everything you need to get started is inside including full source code, documentation, and pre-built samples An easy to use SDK that simplifies the process of writing ASP.NET AJAX components. The ASP.NET AJAX Control Toolkit helps you write your own AJAX controls and extenders. In addition to the controls and extenders mentioned above, the toolkit contains: Helper Classes: This library of helper classes eliminates many of the steps needed to create ASP.NET AJAX controls or extenders so you can quickly produce the code that will make your web site shine. Project and Item Templates: With just a few clicks of the mouse, you'll be writing your first ASP.NET AJAX component. The toolkit contains Visual Studio 2005 Templates for Visual Basic and Visual C# users to create their own controls and extenders. 04/29/10 12:02 © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • 04/29/10 12:02 © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • 04/29/10 12:02 © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. Overview Final slide in the talk. Mostly a placeholder slide to leave up as you finish the talk and answer any final questions. Script That completes my talk. Thank you, and are there any questions.
  • Transcript

    • 1. Building Rich Web UI with the Microsoft AJAX Library, Extensions, and Toolkit PRESENTER NAME Title | Web Live Rhythm
    • 2. WEB PLATFORM THEMES
      • Developer Productivity
        • Dramatically reduce concepts, lines of code required
        • Deliver an awesome Visual Studio Web tool experience
        • Enable rich Web scenarios not possible today
      • Extensible Platform
        • Replace/extend all built-in features + services
        • Customize for any enterprise environment
      • Administration and Management
        • Easiest platform to manage and administer
      • Performance and Scalability
        • The world’s fastest Web application server
    • 3. Why Does User Experience Matter?
      • The world has shifted, experience matters
        • Look and feel
        • User interaction
        • Emotional connection
      • Designers are now an important part of any software development lifecycle
        • Too hard today for designers and developers to work together
        • Tooling has not caught up with this shift
        • Throwing it over the wall is not good enough
    • 4. ASP.NET AJAX
      • Increased productivity
        • Fewer concepts, fewer lines of code
        • Application and UI building blocks for common scenarios
      • Easier to author, debug, and maintain
        • Clean separation of content, style, behavior, and code
        • Well integrated with design and development tools
      • Seamlessly integrated application model
        • Works with ASP.NET pages and server controls
        • Allows access to ASP.NET-hosted web services and components
      • Works everywhere – cross-browser, standards based
      A FRAMEWORK FOR BUILDING RICHER, MORE INTERACTIVE, MORE PERSONALIZED WEB EXPERIENCES
    • 5. FEATURE MATRIX
      • ASP.NET AJAX 1.0
        • Provides the core ASP.NET 2.0 AJAX Extensions and Microsoft AJAX Library for creating AJAX-style applications with either server-centric or client-centric development models.
        • At final release, this package will be fully supported by Microsoft Premier Support Services.
      • ASP.NET AJAX Futures January CTP
        • Provides features that extend the core ASP.NET AJAX 1.0 platform with additional functionality that remains under development.
    • 6. ASP.NET AJAX Architecture Server Framework Client Framework and Services Client Application Services Browser Integration ASP.NET AJAX ASP.NET Pages Web Services HTML, Script, ASP.NET AJAX Markup Service Proxies ASP.NET AJAX Server Extensions ASP.NET AJAX Server Controls App Services Bridge Web Services Bridge Client Script Library Controls, Components Script Core Base Class Library Component Model and UI Framework Browser Compatibility ASP.NET 2.0 Application Services Page Framework, Server Controls
    • 7.
      • NAME
      • Title | Group
      • Microsoft Corporation
      DEMO ASP.NET AJAX PROJECT TYPES
    • 8. DEVELOPMENT SCENARIOS
      • Server-centric Ajax Web Development
        • Incremental Ajax approach to add UI enrichment for key scenarios
        • Enrich applications without lots of JavaScript code required
        • Enable you to keep core UI/Application logic on server (VB/C#)
      • Client-centric Ajax Web Development
        • Leverage full power of script/DHTML
        • Provide richer and more interactive user experience
        • Build mash-ups, gadgets and other new immersive experiences
    • 9. PARTIAL PAGE UPDATES
      • <asp:UpdatePanel> control
        • Easily define “updatable” regions of a page
        • Server roundtrips become asynchronous
        • ASP.NET AJAX handles all the infrastructure
        • Supports Triggers that allow other controls to fire the Postback
          • <asp:UpdatePanel id=“updatepanel1” runat=“server”>
          • <ContentTemplate>
          • <!-- This content will be dynamically updated! -->
          • <asp:Calendar id=“calndr1” runat=“server”/>
          • <ContentTemplate>
          • </asp:UpdatePanel>
    • 10. TRIGGERING POSTBACKS
      • Add Triggers to UpdatePanel to Enable Other Controls to Trigger the AsyncPostback
        • Controls outside the UpdatePanel can trigger a Postback
        • <asp:UpdatePanel ID=&quot;UpdatePanel1&quot; runat=&quot;server&quot;>
        • <Triggers>
        • <asp:AsyncPostBackTrigger
        • ControlID=&quot;Button1“
        • EventName=&quot;Click&quot;/>
        • </Triggers>
        • </asp:UpdatePanel>
    • 11. ENHANCE EXISTING CONTROLS
      • Control Extenders
        • Extend ASP.NET controls with ASP.NET AJAX client behaviors
        • Encapsulate both client and server behavior
        • Same familiar programming model as ASP.NET server controls
        • <asp:TextBox runat=&quot;server&quot; ID=&quot;TextBox1&quot; />
        • <asp:AutoCompleteExtender runat=&quot;server&quot; ID=&quot;AC1”
        • TargetControlID=&quot;TextBox1&quot;
        • ServicePath=&quot;AutoComplete.asmx“
        • ServiceMethod=&quot;GetWords&quot; Enabled=&quot;true&quot;
        • MinimumPrefixLength=&quot;1&quot; />
    • 12. SHOWING PROGRESS
      • UpdateProgress Control
        • Provides feedback on the progress of partial-page rendering
        • <asp:UpdateProgress ID=&quot;UpdateProgress1“ runat=&quot;server&quot;>
        • <ProgressTemplate>
        • Please Wait ...
        • </ProgressTemplate>
        • </asp:UpdateProgress>
    • 13.
      • NAME
      • Title | Group
      • Microsoft Corporation
      DEMO UPDATEPANEL
    • 14. ASP.NET AJAX Client Script Library Script core and base class library
      • ASP.NET AJAX script core – a full type system for JavaScript
        • Classes and interfaces, inheritance, virtual and abstract methods
        • Enumerations
        • Multi-cast event handlers similar to .NET
      • Base class library
        • StringBuilder, extensions to existing types
        • Serializers
        • Debugging and tracing classes
        • Networking
    • 15. WORKING WITH TYPES
      • Register Types Using Type Methods
        • Type.RegisterNamespace
        • Type.RegisterClass
        • Type.RegisterInterface
        • Type.RegisterEnum
      • Enables Object Oriented Capabilities
      • Supports Single Inheritance
      Type.registerNamespace(&quot;Samples.DinnerNow&quot;);
    • 16. CREATING EXTENDER CONTROLS
      • Extend Existing Controls with new Behaviors
        • Create a server extender control that developers can add to an ASP.NET page to control the client behavior of a targeted Web server control.
        • Handle events from the browser Document Object Model (DOM) using a client behavior.
      • Inherit the ExtenderControl Abstract Class
      • Implement the IExtenderControl interface
      • Create JavaScript File for Client Behavior
    • 17. WORKING WITH WEB SERVICES
      • ScriptManager Handles WebService Access
        • Services Collection has a ServiceReference
      • Server ASMX Requirements
        • Reference to Microsoft.Web.Script.Services
        • [ScriptService] Attribute on Class
      • Inline Methods on ASPX can be called as Web Services
        • Add [WebMethod] Attribute to Method
      <asp:ScriptManager runat=&quot;server&quot; ID=&quot;scriptManager&quot;> <Services> <asp:ServiceReference path=&quot;~/WebServices/SimpleWebService.asmx&quot; /> </Services> </asp:ScriptManager>
    • 18. WEBSERVICE FAILURES
      • Callbacks for Success or Failure of Web Service Calls
        • Handle Errors
        • If you do not pass a client callback function to the Web service method, the return value is ignored
      function Div(a, b) { Samples.AspNet.WebService.Div(a, b, OnSucceeded , OnFailed ); } function OnFailed (error) { … } function OnSucceeded (error) { … }
    • 19.
      • NAME
      • Title | Group
      • Microsoft Corporation
      DEMO USING TYPES
    • 20. ASP.NET AJAX Control Toolkit
      • A rich set of sample controls and extenders that makes it easier then ever to build and consume rich client-side ASP.NET AJAX controls and extenders.
        • Ready to go samples
        • SDK to simplify the creation and re-use of your own custom controls and extenders.
      • Full source code & documentation
      • SDK that simplifies the process of writing ASP.NET AJAX components
      • 28 Controls and components
      Not supported by Microsoft This is a community project on CodePlex Toolkit Controls Accordion NoBot AlwaysVisibleControl NumericUpDown Animation PagingBulletedList CascadingDropDown PasswordStrength CollapsiblePanel PopupControl ConfirmButton Rating DragPanel ReorderList DropDown ResizableControl DropShadow RoundedCorners DynamicPopulate Slider FilteredTextBox TextBoxWatermark HoverMenu ToggleButton ModalPopup UpdatePanelAnimation MutuallyExlcusiveCheckBox ValidatorCallout
    • 21.
      • NAME
      • Title | Group
      • Microsoft Corporation
      DEMO AJAX CONTROL TOOLKIT
    • 22.  

    ×