10. april 2023 | Microsoft Norge

ASP.NET -> AJAX

Jan Blomquist, MVP, MCT

www.traincert.net

www.cbtoffice.no

Agenda

A Better Web User Experience

• Better user experiences make better applications

• Higher user traffic and retention

• Greater differentiation

• Higher user productivity

ASP.NET AJAX

• Fully cross-platform, cross-browser• High productivity AJAX application development• Client script framework for easy script creation and reuse• End-to-end programming model for browser and server• Rich tool experience integrated with Visual Studio• Free, fully supported runtime and tools

What is ASP.NET Ajax?

An end-to-end framework for building rich, interactive Web experiences and browser-based applications

ASP.NET 2.0 Ajax Extensions– Server controls that very simply enable AJAX in any ASP.NET application

Microsoft Ajax Library– Client script framework that works cross-browser, and back-end server

ASP.NET Ajax Control Toolkit– Rich set of server controls and client script functionality

– Community development model

Key Goals– Simple, Yet Powerful

– .NET-like feel to script framework

– Reduce the need for scripting by every developer in mainline scenarios

Why AJAX?Looking Beyond the Hype

Improving site/application characteristics

– Performance: smaller updates, requests/responses

– End-user perception: smooth interactions; no hard breaks

– Usability: visual notifications, new gestures, widgets

– Improve visual appeal: animations

– Provide additional functionality: auto-updates, background work, etc.

Why Ajax-ify?

– Not just because of the hype!

– Differentiated experiences are key to new successes with customers and meeting rising expectations

AJAX Video Viewer

Which Scenarios does ASP.NET Ajax Address?

Enriching ASP.NET applications– No scripting required– Declaratively enable post-back-less updates and partial rendering

of portions of pages– Ajax-enabled controls or extenders for scenarios beyond page

updates

Using Web services from client script– Some amount of scripting– Method-based abstraction over XMLHttp for .asmx/.svc services– Support for JSON, RESTful services

Building reusable Ajax Components– Requires scripting with pay for play model– Script framework provides more robust, and productive

development model– Extensibility support on both server and client

Demo NotesAjax via UpdatePanels

Simple mechanism for basic “Ajax-y” feelDeclarative model to specify logical parts of your page

– No need for scriptingEach part can update incrementally and independently without a postbackUpdates happen without regular post-backs

– Browser does not refresh entire pageRequests are processed as regular post-backs

– Server-side logic and model is preserved– Framework code determines the parts of the page that should be re-rendered

UpdatePanel Under the Covers

Client script suppresses normal form submit– Simulates post-back request via XMLHttpRequest

• All form fields, including view state– One extra header to request partial rendering

Server processes a regular post-back– Same page lifecycle, post-back processing– UpdatePanels determine if they need to be updated

• Always vs. Conditional modes– ScriptManager control takes over rendering

• Only render content of UpdatePanels needing update• Response includes updated view state

Client script processes “delta” response– Updates rendering with new markup– Update hidden fields etc.

Demo NotesUpdatePanel Performance Guidelines

Post-back requests are still full post-back requests– Incremental approach; preserves existing app models– One request at a time– Smaller responses, but requests are same– Think about which user actions should cause post-backs

Optimize what needs to be updated and when– Set UpdatePanels into Conditional Mode– Use Triggers, or Update() method to control

Demo NotesAccessing Web Services

Applications can expose data and operations as “Web services”– SOAP (.asmx, .svc), RESTful (.ashx) models

Support for JSON-based message format and object serializationXMLHttp abstractions on the clientScript proxies for .asmx and .svc services

– Enables calling methods which in turn perform web requests, and marshalling of parameters and return values

Demo NotesPartial Rendering vs. Web Services

Two models for updating UI incrementallyPartial rendering – when you need page state, controls etc. in server-side logic

– Pros: Simple to incorporate, use control properties, page state– Cons: Full-postback, one request at a time

Web Services – when your server-side logic is stateless– Pros: Light-weight, multiple requests in parallel– Cons: Need to write a bit of client script to extract data from UI, and package as

parameters to call web serviceBoth are useful toolsASP.NET Ajax provides both models

– UpdatePanel– .asmx/.svc programming model; client script proxies provide higher level of

abstraction over XMLHttpRequest

Demo NotesScripting

Improvements to raw scripting

– OOP simulation: namespaces, classes, interfaces, enums, delegates

– BCL extensions: Array, String, etc.

– BCL additions: StringBuilder, Debug, etc.

UI Framework

– Behaviors and Controls on the client to attach functionality to DOM elements

– Unobtrusive script model keeps content and behavior separate

Resources

ASP.NET AJAX Website– Downloads, videos, tutorials, and forums

– http://ajax.asp.net

ASP.NET AJAX Release RoadmapBeyond

New features previewed in ASP.NET AJAX Futures CTP

Visual Studio and .NET Framework “Orcas”

– ASP.NET AJAX will be rolled into .NET Framework

– Better tools for script authoring and debugging

– Better designer support for ASP.NET AJAX server controls

– Richer server controls

– Fully localized versions of runtime, tools, and documentation(V1.0 already supports localized applications)

10. april 2023 | Microsoft Norge

Til slutt…

Hjelp oss å bli bedre– Fyll ut evalueringen som kommer på e-post– Gi direkte råd til Microsoft-representanter

Hold deg oppdatert– www.microsoft.no/informasjon – Besøk oss på www.microsoft.no/msdn eller www.microsoft.no/technet