This document provides an overview of building intranet applications using ASP.NET AJAX and jQuery. It discusses the technologies used, including ASP.NET AJAX, jQuery, and Rich Internet Applications. It covers development topics such as common patterns, tools, and debugging. The document also provides references and resources for further learning about ASP.NET AJAX, jQuery, and their integration.
Angular or Backbone, which one you will use in your mobile app? How could you develop a mobile app across iOS, Android or windows devices? This talk will take an intimate look at two of today’s most popular frameworks, Angular and Backbone and explore their differences. We’ll show how Apache Cordova opens the world of mobile app development to web developers. In the session, we will demonstrate a “To Do” app using Angular and Backbone, with access to native device capabilities. We’ll compare the frameworks when transported to the world of mobile app development. Along the way, you'll also learn what kind of apps are best-suited for the hybrid architecture and when to make the switch from web app to mobile app.
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
Angular: Go Mobile!
How could you develop a mobile app across iOS, Android or windows devices? We’ll show how Apache Cordova opens the world of mobile app development to web developers. In the session, a “To Do” app using Angular will be explored and then it will be demonstrated step by step on how to turn it into a mobile app, with access to native device capabilities. Along the way, you'll also learn what kind of apps are best-suited for the hybrid architecture and when to make the switch from web app to mobile app.
This presentation will show the latest Web Components technologies and examples, and whether you should be using Web Components now. (spoiler alert: you should be!)
JavaScript basics
JavaScript event loop
Ajax and promises
DOM interaction
JavaScript object orientation
Web Workers
Useful Microframeworks
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
Why Backbone
Events
Models
Collections
Views
Routers
Summary
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
Angular or Backbone, which one you will use in your mobile app? How could you develop a mobile app across iOS, Android or windows devices? This talk will take an intimate look at two of today’s most popular frameworks, Angular and Backbone and explore their differences. We’ll show how Apache Cordova opens the world of mobile app development to web developers. In the session, we will demonstrate a “To Do” app using Angular and Backbone, with access to native device capabilities. We’ll compare the frameworks when transported to the world of mobile app development. Along the way, you'll also learn what kind of apps are best-suited for the hybrid architecture and when to make the switch from web app to mobile app.
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
Angular: Go Mobile!
How could you develop a mobile app across iOS, Android or windows devices? We’ll show how Apache Cordova opens the world of mobile app development to web developers. In the session, a “To Do” app using Angular will be explored and then it will be demonstrated step by step on how to turn it into a mobile app, with access to native device capabilities. Along the way, you'll also learn what kind of apps are best-suited for the hybrid architecture and when to make the switch from web app to mobile app.
This presentation will show the latest Web Components technologies and examples, and whether you should be using Web Components now. (spoiler alert: you should be!)
JavaScript basics
JavaScript event loop
Ajax and promises
DOM interaction
JavaScript object orientation
Web Workers
Useful Microframeworks
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
Why Backbone
Events
Models
Collections
Views
Routers
Summary
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
jQuery: The World's Most Popular JavaScript Library Comes to XPagesTeamstudio
Whether you want to add some serious eye candy to your XPages Applications or just want to do more with less code, jQuery, the world’s most popular JavaScript framework can help you. Come to this webinar and find out how you can use some of the thousands of jQuery plugins, in harmony with Dojo, within your XPages applications to create a better experience not only for your users, but for you as a developer. In this webinar, we'll look at how jQuery works, how to add it to your XPages, and how a complete JavaScript beginner can take advantage of its power. We'll demonstrate many working examples -- and a sample database will be provided.
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
jQuery: The World's Most Popular JavaScript Library Comes to XPagesTeamstudio
Whether you want to add some serious eye candy to your XPages Applications or just want to do more with less code, jQuery, the world’s most popular JavaScript framework can help you. Come to this webinar and find out how you can use some of the thousands of jQuery plugins, in harmony with Dojo, within your XPages applications to create a better experience not only for your users, but for you as a developer. In this webinar, we'll look at how jQuery works, how to add it to your XPages, and how a complete JavaScript beginner can take advantage of its power. We'll demonstrate many working examples -- and a sample database will be provided.
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
In this presentation we will discuss the information technology structure and an overview of intranet, extranet and internet is also provided in this presentation.
To know more about Welingkar School’s Distance Learning Program and courses offered, visit:
http://www.welingkaronline.org/distance-learning/online-mba.html
Building modern web sites with ASP .Net Web API, WebSockets and RSignalAlessandro Pilotti
My session at ITCamp.ro 2012:
Web site development is an ever changing landscape. Thanks to the latest web browser technologies it's possible to create highly responsive single page applications, requiring a new approach to design and development on the server side. During this session we'll see ho to use .Net technologies to get the best out of the new Web API, WebSockets and the excellent RSignal framework.
Introduction to web application development with Vue (for absolute beginners)...Lucas Jellema
In this slide deck I show you how you can easily and quickly create quite rich web applications with Vue 3 – without having to study complex concepts or understand many technical details. I have only recently learned how to work with Vue 3 myself and now is the best time for me to share my learning experience (and my enthusiasm) with you. I know what I found essential to understand and what most got me excited in these early steps (what was a little bit hard to grasp). I believe that I can present my steps and guide you to experience the same fun and have a similarly gratifying experience. I am not an expert in this subject – I have barely learned how to walk and that is why I can help you with these first steps with Vue.
In this deck, I do not explain how Vue works. I do not really know that. I will show you how to work with it and how to create web applications that are functional, appealing, fast and responsive.
The approach I am taking is straightforward:
• I will tell you a little bit about web development, browsers and reactive frameworks
• I will show the hello world of Vue applications
• I will explain about components and nesting, events, data binding and reactive behavior and demonstrate these concepts
• I will introduce Vue UI Component libraries – and with no effort at all we will launch our application to the next level – with rich components to explore, manipulate, visualize data collections
• We will publish the web application from our development environment to where the whole world could see it – using GitHub Pages
• As bonus topic – we discuss state management
At the end of this session you will be able to quickly create a simple yet rich web application with Vue 3. You have a starting point to further evolve your skills with the many online resources I am convinced that you will enjoy your newfound powers and the simplicity and power of Vue 3.
Note: a tutorial accompanies this slide deck - see https://github.com/lucasjellema/code-face-vue3-intro-reactiive-webapps-aug2023/blob/main/README.md
The future of web development write once, run everywhere with angular.js and ...Mark Roden
This slide deck was used in support of BTE 102 - The future of web development write once, run everywhere with angular.js and domino at IBMConnectED 2015
Presentation was given with Mark Leusink
Piwik - description of the software, why is it better than the competition, screenshots
piwik is an open source (GPL license) web analytics software. It gives interesting reports on your website visitors, your popular pages, the search engines keywords they used, the language they speak… and so much more.
piwik aims to be an open source alternative to Google Analytics.
1. Open APIs
2. Plugins Architecture
3. Data abstraction layer
4. Customizable dashboard
5. Innovative User Interface
piwik is an open source (GPL license) web analytics software. It gives interesting reports on your website visitors, your popular pages, the search engines keywords they used, the language they speak… and so much more.
Piwik - description of the software, why is it better than the competition, screenshots
piwik aims to be an open source alternative to Google Analytics.
1. Open APIs
2. Plugins Architecture
3. Data abstraction layer
4. Customizable dashboard
5. Innovative User Interface
Hot Topics: The DuraSpace Community Webinar Series,
“Introducing DSpace 7: Next Generation UI”
Curated by Claire Knowles, Library Digital Development Manager, The University of Edinburgh.
Introducing DSpace 7
February 28, 2017 presented by: Claire Knowles - The University of Edinburgh, Art Lowel - Atmire, Andrea Bollini - 4Science, Tim Donohue – DuraSpace
The Tooling API provides powerful new ways to manage your code. It can help you measure code health, find circular dependencies, and identify code that's no longer in use. Join us to learn how to use the Tooling API to conduct a quality analysis of your code, and how to do this using an app integrated via Force.com Canvas -- no command line or desktop install required! Take your Apex knowledge to the next level.
This presentation covers why libraries like jQuery exist, what was web development like before jQuery, the main benefits of jQuery, and some alternate libraries.
Turbocharge your applications with HTML5 features and its JavaScript APIs. Simplify tasks that weren’t possible previously. Understand how to tap the full potential of HTML5 features in your web applications using: HTML5 features, File API, Video, Location API, Application Cache API, Local Storage API, Animating the User Interface, Web Workers.
Transform Your Communication with Cloud-Based IVR SolutionsTheSMSPoint
Discover the power of Cloud-Based IVR Solutions to streamline communication processes. Embrace scalability and cost-efficiency while enhancing customer experiences with features like automated call routing and voice recognition. Accessible from anywhere, these solutions integrate seamlessly with existing systems, providing real-time analytics for continuous improvement. Revolutionize your communication strategy today with Cloud-Based IVR Solutions. Learn more at: https://thesmspoint.com/channel/cloud-telephony
Takashi Kobayashi and Hironori Washizaki, "SWEBOK Guide and Future of SE Education," First International Symposium on the Future of Software Engineering (FUSE), June 3-6, 2024, Okinawa, Japan
Enterprise Resource Planning System includes various modules that reduce any business's workload. Additionally, it organizes the workflows, which drives towards enhancing productivity. Here are a detailed explanation of the ERP modules. Going through the points will help you understand how the software is changing the work dynamics.
To know more details here: https://blogs.nyggs.com/nyggs/enterprise-resource-planning-erp-system-modules/
What is Augmented Reality Image Trackingpavan998932
Augmented Reality (AR) Image Tracking is a technology that enables AR applications to recognize and track images in the real world, overlaying digital content onto them. This enhances the user's interaction with their environment by providing additional information and interactive elements directly tied to physical images.
Top Features to Include in Your Winzo Clone App for Business Growth (4).pptxrickgrimesss22
Discover the essential features to incorporate in your Winzo clone app to boost business growth, enhance user engagement, and drive revenue. Learn how to create a compelling gaming experience that stands out in the competitive market.
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI AppGoogle
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI App
👉👉 Click Here To Get More Info 👇👇
https://sumonreview.com/ai-fusion-buddy-review
AI Fusion Buddy Review: Key Features
✅Create Stunning AI App Suite Fully Powered By Google's Latest AI technology, Gemini
✅Use Gemini to Build high-converting Converting Sales Video Scripts, ad copies, Trending Articles, blogs, etc.100% unique!
✅Create Ultra-HD graphics with a single keyword or phrase that commands 10x eyeballs!
✅Fully automated AI articles bulk generation!
✅Auto-post or schedule stunning AI content across all your accounts at once—WordPress, Facebook, LinkedIn, Blogger, and more.
✅With one keyword or URL, generate complete websites, landing pages, and more…
✅Automatically create & sell AI content, graphics, websites, landing pages, & all that gets you paid non-stop 24*7.
✅Pre-built High-Converting 100+ website Templates and 2000+ graphic templates logos, banners, and thumbnail images in Trending Niches.
✅Say goodbye to wasting time logging into multiple Chat GPT & AI Apps once & for all!
✅Save over $5000 per year and kick out dependency on third parties completely!
✅Brand New App: Not available anywhere else!
✅ Beginner-friendly!
✅ZERO upfront cost or any extra expenses
✅Risk-Free: 30-Day Money-Back Guarantee!
✅Commercial License included!
See My Other Reviews Article:
(1) AI Genie Review: https://sumonreview.com/ai-genie-review
(2) SocioWave Review: https://sumonreview.com/sociowave-review
(3) AI Partner & Profit Review: https://sumonreview.com/ai-partner-profit-review
(4) AI Ebook Suite Review: https://sumonreview.com/ai-ebook-suite-review
#AIFusionBuddyReview,
#AIFusionBuddyFeatures,
#AIFusionBuddyPricing,
#AIFusionBuddyProsandCons,
#AIFusionBuddyTutorial,
#AIFusionBuddyUserExperience
#AIFusionBuddyforBeginners,
#AIFusionBuddyBenefits,
#AIFusionBuddyComparison,
#AIFusionBuddyInstallation,
#AIFusionBuddyRefundPolicy,
#AIFusionBuddyDemo,
#AIFusionBuddyMaintenanceFees,
#AIFusionBuddyNewbieFriendly,
#WhatIsAIFusionBuddy?,
#HowDoesAIFusionBuddyWorks
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...Mind IT Systems
Healthcare providers often struggle with the complexities of chronic conditions and remote patient monitoring, as each patient requires personalized care and ongoing monitoring. Off-the-shelf solutions may not meet these diverse needs, leading to inefficiencies and gaps in care. It’s here, custom healthcare software offers a tailored solution, ensuring improved care and effectiveness.
Artificia Intellicence and XPath Extension FunctionsOctavian Nadolu
The purpose of this presentation is to provide an overview of how you can use AI from XSLT, XQuery, Schematron, or XML Refactoring operations, the potential benefits of using AI, and some of the challenges we face.
Utilocate offers a comprehensive solution for locate ticket management by automating and streamlining the entire process. By integrating with Geospatial Information Systems (GIS), it provides accurate mapping and visualization of utility locations, enhancing decision-making and reducing the risk of errors. The system's advanced data analytics tools help identify trends, predict potential issues, and optimize resource allocation, making the locate ticket management process smarter and more efficient. Additionally, automated ticket management ensures consistency and reduces human error, while real-time notifications keep all relevant personnel informed and ready to respond promptly.
The system's ability to streamline workflows and automate ticket routing significantly reduces the time taken to process each ticket, making the process faster and more efficient. Mobile access allows field technicians to update ticket information on the go, ensuring that the latest information is always available and accelerating the locate process. Overall, Utilocate not only enhances the efficiency and accuracy of locate ticket management but also improves safety by minimizing the risk of utility damage through precise and timely locates.
Software Engineering, Software Consulting, Tech Lead, Spring Boot, Spring Cloud, Spring Core, Spring JDBC, Spring Transaction, Spring MVC, OpenShift Cloud Platform, Kafka, REST, SOAP, LLD & HLD.
Code reviews are vital for ensuring good code quality. They serve as one of our last lines of defense against bugs and subpar code reaching production.
Yet, they often turn into annoying tasks riddled with frustration, hostility, unclear feedback and lack of standards. How can we improve this crucial process?
In this session we will cover:
- The Art of Effective Code Reviews
- Streamlining the Review Process
- Elevating Reviews with Automated Tools
By the end of this presentation, you'll have the knowledge on how to organize and improve your code review proces
Atelier - Innover avec l’IA Générative et les graphes de connaissancesNeo4j
Atelier - Innover avec l’IA Générative et les graphes de connaissances
Allez au-delà du battage médiatique autour de l’IA et découvrez des techniques pratiques pour utiliser l’IA de manière responsable à travers les données de votre organisation. Explorez comment utiliser les graphes de connaissances pour augmenter la précision, la transparence et la capacité d’explication dans les systèmes d’IA générative. Vous partirez avec une expérience pratique combinant les relations entre les données et les LLM pour apporter du contexte spécifique à votre domaine et améliorer votre raisonnement.
Amenez votre ordinateur portable et nous vous guiderons sur la mise en place de votre propre pile d’IA générative, en vous fournissant des exemples pratiques et codés pour démarrer en quelques minutes.
May Marketo Masterclass, London MUG May 22 2024.pdfAdele Miller
Can't make Adobe Summit in Vegas? No sweat because the EMEA Marketo Engage Champions are coming to London to share their Summit sessions, insights and more!
This is a MUG with a twist you don't want to miss.
GraphSummit Paris - The art of the possible with Graph TechnologyNeo4j
Sudhir Hasbe, Chief Product Officer, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
Graspan: A Big Data System for Big Code AnalysisAftab Hussain
We built a disk-based parallel graph system, Graspan, that uses a novel edge-pair centric computation model to compute dynamic transitive closures on very large program graphs.
We implement context-sensitive pointer/alias and dataflow analyses on Graspan. An evaluation of these analyses on large codebases such as Linux shows that their Graspan implementations scale to millions of lines of code and are much simpler than their original implementations.
These analyses were used to augment the existing checkers; these augmented checkers found 132 new NULL pointer bugs and 1308 unnecessary NULL tests in Linux 4.4.0-rc5, PostgreSQL 8.3.9, and Apache httpd 2.2.18.
- Accepted in ASPLOS ‘17, Xi’an, China.
- Featured in the tutorial, Systemized Program Analyses: A Big Data Perspective on Static Analysis Scalability, ASPLOS ‘17.
- Invited for presentation at SoCal PLS ‘16.
- Invited for poster presentation at PLDI SRC ‘16.
Launch Your Streaming Platforms in MinutesRoshan Dwivedi
The claim of launching a streaming platform in minutes might be a bit of an exaggeration, but there are services that can significantly streamline the process. Here's a breakdown:
Pros of Speedy Streaming Platform Launch Services:
No coding required: These services often use drag-and-drop interfaces or pre-built templates, eliminating the need for programming knowledge.
Faster setup: Compared to building from scratch, these platforms can get you up and running much quicker.
All-in-one solutions: Many services offer features like content management systems (CMS), video players, and monetization tools, reducing the need for multiple integrations.
Things to Consider:
Limited customization: These platforms may offer less flexibility in design and functionality compared to custom-built solutions.
Scalability: As your audience grows, you might need to upgrade to a more robust platform or encounter limitations with the "quick launch" option.
Features: Carefully evaluate which features are included and if they meet your specific needs (e.g., live streaming, subscription options).
Examples of Services for Launching Streaming Platforms:
Muvi [muvi com]
Uscreen [usencreen tv]
Alternatives to Consider:
Existing Streaming platforms: Platforms like YouTube or Twitch might be suitable for basic streaming needs, though monetization options might be limited.
Custom Development: While more time-consuming, custom development offers the most control and flexibility for your platform.
Overall, launching a streaming platform in minutes might not be entirely realistic, but these services can significantly speed up the process compared to building from scratch. Carefully consider your needs and budget when choosing the best option for you.
2. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Intro
• Speaker
– Alek Davis: Technoblog: http://alekdavis.blogspot.com
• Goals
– Basic understanding of jQuery, ASP.NET AJAX
– Know how to build an application using ASP.NET AJAX and jQuery
– Know what can go wrong and how to fix common problems
– Know where find information, support, and tools
• Presentation
– Use as a reference
– References contain active hyperlinks
– Code samples
• Audience
– Expected to understand
• JavaScript: Basic JavaScript syntax
• ASP.NET: Postback, code-behind, viewstate, data binding
2 of 44
3. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Topics
• Technologies
– Rich Internet Applications (RIA)
– ASP.NET AJAX
– jQuery
• Pros and cons
– ASP.NET + AJAX + jQuery
– Other alternatives
• Development
– Web design
– Common patterns
– Caveats
– Tools
– Debugging
• References
3 of 44
4. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Rich internet applications (RIA)
• Server-side
• ASP/ASP.NET (Microsoft)
• JSP (Sun/Oracle)
• PHP
• Client-side
– virtual machine (plug-in) based
• Flash/Flex (Adobe)
• Java/JavaFX (Sun)
• Gears (Google)
• Silverlight (Microsoft)
• BrowserPlus (Yahoo!)
• Curl
– JavaScript based
• ASP.NET AJAX
• Yahoo! User Inter Interface (YUI) Library
• Google AJAX APIs, Data (GData) APIs, …
• jQuery, Prototype, MooTools, Dojo, script.aculo.us, …
4 of 44
5. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Comparing RIA technologies
• Server-side
– Pros: ease of development
– Cons: user experience (flicker), server load, web traffic
• Client-side virtual machine based
– Pros: user experience, capabilities, platform support
– Cons: user experience, platform support, no HTML benefits
• Client-side JavaScript based
– Pros: user experience, availability, graceful degradation (NOSCRIPT)
– Cons: performance (less of an issue), browser specifics, JavaScript
5 of 44
6. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Choosing RIA technologies
• Assumptions
– Building intranet, line-of-business (LOB) application
– Using Microsoft stack (Visual Studio, etc)
• Criteria
– Utilize existing knowledge (ASP.NET)
– Development ease and speed
– Code maintainability
– Application performance
• Options
– ASP.NET AJAX
– AJAX libraries
6 of 44
7. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
ASP.NET AJAX
• Quick facts
– Comes with Visual Studio 2008 (ASP.NET 3.5)
• Add-on for Visual Studio 2005
• Overview
– 3+ primary controls
• ScriptManager (required)
– Enables ASP.NET AJAX, partial page rendering, Web service calls
• UpdatePanel (optional)
– Partial page update (see also: UpdatePanel Tips and Tricks by Jeff Prosise)
• UpdateProgress (optional)
– Progress indicator
– Add-ons
• ASP.NET Control Toolkit
– Open-source project
– Last release: September 2009
• jQuery
7 of 44
8. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Learning ASP.NET AJAX
• Documentation
– Adding AJAX and Client Capabilities Roadmap
• Web sites
– http://ajax.asp.net (main site)
– http://asp.net/AJAX/Documentation/Live/ (old, but good examples)
– http://encosia.com/ (ASP.NET, AJAX, and more; articles, tutorials, tips, RSS)
– http://mattberseth.com/blog/aspnet_ajax/ (articles, tips, RSS)
• Presentations/talks/demos/screencasts
– ASP.NET AJAX 100 by Bruce Kyle (16 min)
– ASP.NET AJAX Futures by Bertrand Le Roy at PDC 2008 (84 min)
– Building Great AJAX Applications from Scratch Using ASP.NET 3.5 and Visual Studio 2008 by
Brad Adams at MIX 2008 (76 min)
– Real-World AJAX with ASP.NET by Nikhil Kothari at MIX 2008 (75 min)
• Books
– ASP.NET AJAX UpdatePanel Control by Matt Gibbs, Bertrand Le Roy
– More from Amazon
8 of 44
9. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
jQuery
• Quick facts
– JavaScript library (file) created by John Resig
– Open source (MIT and GPL licenses; good for commercial use)
– Current version: 1.4.2
– Size: ~155 KB (~24 KB minimized)
– Browser support: IE 6+, Firefox 2+, Opera 9+, Safari 2+, Chrome
– Actively developed
– Large and active community
– Used by many companies (Google, IBM, Amazon, Dell, Netflix, Intel, …)
– Shipped with ASP.NET MVC Framework
– Included with Visual Studio 2010 (and later)
– 24/7 support by Microsoft through Product Support Services (PSS)
• See also
– Learning jQuery @ MIT (presented by John Resig at MIT)
• More facts, performance benchmarks, key features
9 of 44
10. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Learning jQuery
• Web sites
– http://jquery.com/ (downloads, docs, tutorials, bug tracker, forums)
– http://www.learningjquery.com/ (tips, techniques, tutorials, RSS)
• Tutorials/articles
– jQuery for Absolute Beginners (15 short videos, about 5 minutes each)
– An introduction to jQuery (Part 1: The Client Side)
– Using jQuery with ASP.NET (Part 2: Making Ajax Callbacks to the Server)
• Books
– Learning jQuery: … by Karl Swedberg & Jonathan Chaffer
– jQuery Reference Guide by Karl Swedberg & Jonathan Chaffer
– jQuery in Action by Bear Bibeault & Yehuda Katz
10 of 44
11. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
jQuery basics
• Syntax
– $('select element').doSomething('info').doSomethingElse('more info');
• Selectors
– $('#txtSearchBox'): element with ID txtSearchBox
– $('.SelectedCell'): element(s) with class attribute SelectedCell
– $('#userGrid tr:even'): even rows of the element with ID userGrid
– $('input:checkbox[id$='chkDelete']'): input element(s) of the type
checkbox with ID that ends with chkDelete
– $('img.ImgLink[id$='imgOK'],img.ImgLink[id$='imgCancel']'): IMG
element(s) with class attribute ImgLink and ID ending with imgOK or
imgCancel
• Animations
– $(…).hide() $(…).show()
– $(…).fadeIn("fast") $(…).fadeOut("slow")
– $(…).slideUp(1000) $(…).slideDown(5000)
– …
11 of 44
12. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
More jQuery
• Common operations
– $(…).preventDefaults(): prevents default behavior
– $(…).attr(): sets/gets attribute value
– $(…).css(): sets/gets CSS attribute value
– $(…).val(): sets/gets value of a text input element (text box, text area)
– $(…).text(): sets/gets text value of an element (span, etc)
– …
• Events
– $(…).click(function(e){ … }): on click event handler
– $(…).keydown(function(e){ … }): on key down event handler
– $(…).hover(function(){ … }, function()): on hover (in and out) event handler
– $(…).bind("eventX eventY …", …): binds one or more event to event hander
– …
12 of 44
13. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
jQuery extras
• jQuery UI
– jQuery widgets
• Handle drag-and-drop, sorting, resizing, selecting
• Accordion, date picker, dialog, progress bar, slider, tabs controls
• Effects (color animation, class transitions, theming)
• Plugins
– Third party widgets
• User interface
• Data manipulation
• AJAX
• …
– See also: Plugins/Authoring
• See also
– http://docs.jquery.com/ (documentation)
13 of 44
14. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
jQuery demo
• Features
– Custom search box
• Auto-show, auto-hide
• Submit, cancel
• Buttons and keyboard
• Input validation
14 of 44
15. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
ASP.NET AJAX + jQuery benefits
• Why ASP.NET?
– Server-side (code-behind) programming
• Why ASP.NET AJAX?
– Simple partial page updates and progress indicator
– Simple asynchronous postbacks and partial page updates
– Can reuse code-behind (no additional code for Web services)
– Graceful degradation (<NOSCRIPT>)
– Less JavaScript code
• Why jQuery?
– Efficient, small, clean JavaScript; shields from browser specifics
– Complements ASP.NET AJAX: offers animations, selectors, plugins
– Minor overlap with ASP.NET AJAX (unlike other JavaScript libraries)
• Why ASP.NET AJAX (UpdatePanel, UpdateProgress) + jQuery?
– Less code (clean code)
– Reasonable efficiency (not the best, but good enough)
15 of 44
16. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
ASP.NET AJAX + jQuery limitations
• Why not use ASP.NET AJAX (UpdatePanel, UpdateProgress) +
jQuery?
– Performance (in certain scenarios)
– HTML payload
– ViewState size
– Not pure
• Alternatives
– ASP.NET AJAX + DHTML
– ASP.NET (without AJAX) + jQuery
– ASP.NET AJAX (without UpdatePanel) + jQuery
– ASP.NET AJAX + ASP.NET AJAX Toolkit + jQuery (just kidding)
• Video (good talk describing one alternative)
– ASP.NET and jQuery by Stephen Walther at PDC 2008 (74 min)
16 of 44
17. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Web development
• Design skills
– Don't Make Me Think by Steve Krug
– The Non-Designer's Design Book by Robin Williams
– SitePoint TechTimes and SitePoint Design View newsletters
• Graphics (*free* icons)
– Visual Studio 2008 Image Library
– Sweetie icons (2 collections: BasePack and WebCommunication)
– ICONlook: the icon search
– Crystal Project (see also Crystal Clear)
– See also: 14 Free Icon Resources
• CSS frameworks
– BlueprintCSS
– YUI Grid CSS
– See also: List of CSS frameworks
17 of 44
18. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Browsers and tools
• Firefox
– Use IE Tab add-on to switch between Firefox and IE views
– Use Web Developer add-on/toolbar for… lots of things
– Use Firebug add-on for debugging
• console.log is your friend
– Use YSlow add-on to see performance score
• Chrome
– Use the built-in Developer Tools menu
• Internet Explorer
– Use Fiddler to debug HTTP traffic
– Use Internet Explorer Developer Toolbar for debugging
– Use IE7Pro add-on for "everything" else
• Web tools
– jQuery API Browser
– Visual jQuery
18 of 44
19. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
ASP.NET AJAX + jQuery demo
• Features
– ASP.NET AJAX (.NET 3.5) + jQuery 1.3
– Repeater control
• Each item in Repeater is an UpdatePanel
• Each UpdatePanel holds an UpdateProgress control
– jQuery is responsible for DHTML operations
19 of 44
20. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Application settings and configuration
• Enable a Visual Studio project for ASP.NET AJAX
– Set Target Framework (in the project Properties – Application tab)
to .NET Framework 3.5
– For upgraded projects (e.g. migrated from VS 2005 to VS 2008)
• Don't use <xhtmlConformance mode="Legacy"/> in Web.config; otherwise,
you may get the following error:
"'Sys.WebForms.PageRequestManager' is null or not an object"
– See Scott Guthrie's post (read comments on suggestions for customization of the
xhtmConformance settings)
20 of 44
21. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Adding ASP.NET AJAX functionality
• Use ScriptManager control
– Set EnablePartialRendering attribute to true
<asp:ScriptManager
id="ScriptManager1"
EnablePartialRendering="true"
runat="server">
…
</asp:ScriptManager>
– Include references to JavaScript files in the <Scripts> section
21 of 44
22. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Using jQuery in a project
• Options
– Option 1: Reference distribution source (Google)
• Pros: Download speed, caching, proximity
• Cons: External reference
– Option 2: Make your own copy
• Pros: Internal reference
• Cons: Download speed (possibly)
• Example
<asp:ScriptManager …>
<Scripts>
<asp:ScriptReference Path="~/Scripts/jQuery-1.3.1-vsdoc.js" />
</Scripts>
</asp:ScriptManager>
22 of 44
23. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
jQuery and IntelliSense
• The documentation (-vsdoc.js) file
– Use for documentation only (it’s not functional)
– If official version is not available (e.g. immediately after release)
• Generate vsdoc file via InfoBasis JQuery IntelliSense Header Generator
– Generated stub file contains no code (only comments, only works wit v.1.3)
• Usage options
– If using VS 2008 SP1
• Install hotfix KB958502 (see Visual Studio patched for better jQuery IntelliSense)
• Add the vsdoc file to the project; do not reference it in code
• Vsdoc file must have the same name as the original with –vsdoc suffix
– If not using VS 2008 SP1 (also see the Resources slide)
• Add the vsdoc file to the project
• Wrap the vsdoc file in an invisible control (use appropriate name):
<asp:Label Visible="false" runat="server">
<script src="../Scripts/jQuery-1.3.1-vsdoc.js" type="text/javascript" />
</asp:Label>
• In JavaScript files, add at the top (use appropriate name):
/// <reference path="jQuery-1.3.1-vsdoc.js"/>
23 of 44
24. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
jQuery code
• Traditional jQuery code
– Does not work after partial postback
$(document).ready(function() // or $(function()
{
// JavaScript code here
// …
});
• ASP.NET AJAX-specific jQuery
– Works after partial postback
// $(function()
function pageLoad(sender, args)
{
// JavaScript code here
// …
}
// });
– But…
24 of 44
25. On pageLoad()
• pageLoad is not the same as $(document).ready
– pageLoad is called on initial page load and after every partial postback
– Can cause repeated event bindings
• One event (such as click) triggers event handler multiple times
• What to do?
– Call unbind before any defining any bindings for an element (selector)
function pageLoad(sender, args){
$('a[id$='ItemName']').unbind();
$('a[id$='ItemName']').click(function(e){…}
}
• See $(document).ready() and pageLoad() are not the same! by Dave Ward
– Or use live for event binding inside of $(document).ready:
$(document).ready(function(){
$('a[id$='ItemName']').live("click", function(e){…});
});
• live binds all current and future elements (selectors)
• live works for most common, but not all event types
• See jQuery live() and ASP.NET Ajax asynchronous postback by Arnold Matusz
09/03/15Building intranet applications with ASP.NET AJAX and jQuery25 of 44
26. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
UpdateProgress control
• Basics
– Works with UpdatePanel control
– Invisible during initial page load and full postback
– Visible only during partial postback
– Can implement UpdateProgress as a user control
• Advanced
– Modal UpdateProgress for UpdatePanel – Revisited by Damien White
• *Free* progress indicators (graphics)
– Activity indicators
– Ajaxload: Ajax loading gif generator
26 of 44
27. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Anatomy of a postback
• Full postback
– Client server: GET (initial request, URL)
– Server client: <HTML>…<BODY></BODY></HTML>
– Client server: POST (form data, including VIEWSTATE)
– Server client: <HTML>…<BODY></BODY></HTML>
• Partial postback
– Client server: GET (initial request, URL)
– Server client: <HTML>…<BODY></BODY></HTML>
– Client server: POST (form data, including VIEWSTATE)
– Server client: <DIV id="UpdatePanelID"></DIV>, VIEWSTATE
27 of 44
28. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
UpdatePanel control
• Basics
– Embeds contents in the <DIV></DIV> tags
– Set UpdateMode attribute to Conditional
– Not everything can be implemented as an UpdatePanel
• Cannot include <TR> elements in UpdatePanel
• Using UpdatePanel with data-bound controls
– Using Eval (slower)
<asp:ImageButton … CommandArgument='<%# DataBinder.Eval("ID") %>'/>
– Using DataBinder.GetPropertyValue (faster)
<a …><%# DataBinder.GetPropertyValue(Container.DataItem, "Name") %></a>
– For complex formatting use String.Format
<asp:HyperLink …
NavigateUrl='<%# String.Format("?ID={0}&Mode={1}", Eval("ID"), Eval("Mode"))
%>' />
• Accessing controls in UpdatePanel
28 of 44
29. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
How to find a control?
• Helper function
– Find control recursively
public static Control FindControl(Control start, string id) {
Control foundControl;
if (start != null) {
foundControl = start.FindControl(id);
if (foundControl != null) return foundControl;
foreach (Control c in start.Controls) {
foundControl = FindControl(c, id);
if (foundControl != null) return foundControl;
}
}
return null;
}
• See also
Generic Recursive Find Control Extension by Brendan Enrick
ASP.NET 2.0 MasterPages and FindControl() by Rick Strahl
29 of 44
30. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Accessing UpdatePanel from code-behind
• Access UpdatePanel control
private void someCtrl_Click(object sender, EventArgs e)
{
…
UpdatePanel updPanel = FindControl((Control)sender, "updPanel") as UpdatePanel;
…
}
• Access controls hosted by UpdatePanel
HtmlTable tbl = FindControl(updPanel, "tblDetails") as HtmlTable;
LinkButton lnk = FindControl(updPanel, "lnkItem") as LinkButton;
ImageButton img = FindControl(updPanel, "imgDetails") as ImageButton;
30 of 44
31. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Find controls via jQuery
• If you do not know IDs of elements (e.g. in Repeater)
– Example: Make sure that check box A gets checked and disabled when
user checks box B (both check boxes belong to a repeater item and have
IDs chkA and chkB)
$('input:checkbox[id$='chkB']').click(function(e)
{
var elemID = $(e.target).attr('id');
var prefixID = elemID.replace(/chkB$/i, "");
var elemIDchkA = "#" + elemID.replace(/chkB$/, "chkA");
if (this.checked)
{
$(elemIDchkA).attr('checked', 'true');
$(elemIDchkA).attr('disabled', 'true');
}
else
$(elemIDchkA).removeAttr('disabled');
});
31 of 44
32. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
What is $(this)?
• this can have different contexts
– Most common contexts
• Context #1: JavaScript DOM element
– Inside of a callback function (click, hover, …)
• Context #2: jQuery object
– Inside of custom jQuery function
• Context #3: JavaScript object
– Such as an array element
• What about $(this)?
– $(this) converts a DOM object into a jQuery object
• To convert a jQuery object to a DOM object use:
– $(…).get(0) or $(…)[0]
• See also
– What is this? By Mike Alsup
– jQuery's this: demystified by Remy Sharp
32 of 44
33. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Partial postback
• Detecting partial postback
– In code-behind
if (ScriptManager1.IsInAsyncPostBack)
{
…
}
– In JavaScript
function pageLoad(sender, args)
{
if (args.get_isPartialLoad())
{
…
}
}
33 of 44
34. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Handle concurrent partial postbacks
• Default behavior
– Cancels running postback and switch to the new postback (confusing)
• Custom behavior
– Options: show error message, …
• How
Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler(sender, args) {
if (!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack())
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequest);
}
function InitializeRequest(sender, args) {
if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
args.set_cancel(true);
alert('Please wait until the already running operation finishes processing and retry.');
}
}
Sys.Application.notifyScriptLoaded();
• Example
Giving Precedence to a Specific Asynchronous Postback
34 of 44
35. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Customize postbacks
• Default behavior
– Children of UpdatePanel automatically invoke (partial) postback
• Unless AutoPostBack property is set to false
• Custom behavior
– Can specify which controls/events perform partial/full updates
• Use <Triggers> section of UpdatePanel control
<asp:UpdatePanel … UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="btnFull" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnPartial" EventName="Click" />
</Triggers>
<ContentTemplate>
…
</ContentTemplate>
</asp:UpdatePanel>
• See also
– Understanding ASP.NET AJAX UpdatePanel Triggers
35 of 44
36. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Handle errors from partial postback
• Default behavior
– Does not display errors (non-documented change in ASP.NET 3.5)
• Custom behavior
– Show error message box, or show inline error message, or …
• How
– Add OnAsyncPostbackError attribute to ScriptManager element
<asp:ScriptManager … OnAsyncPostbackError="ScriptManager1_AsyncPostBackError">
– In OnAsyncPostbackError event handler, set AsyncPostBackErrorMessage
property of the ScriptManager object (see next slide)
ScriptManager1.AsyncPostBackErrorMessage = e.Exception.Message;
– Add JavaScript code to handle error event and process error message
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);
function EndRequest(sender, args){/* see next slide */}
• Examples
– Handling Errors During a Partial-page Postback by Matthew Ellis
– How to improve ASP.NET AJAX error handling by Dave Ward (read comments)
36 of 44
37. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Error handlers
• Server-side (code-behind)
protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e) {
if (e.Exception.Data["UserError"] == null)
ScriptManager1.AsyncPostBackErrorMessage = e.Exception.Message;
else
ScriptManager1.AsyncPostBackErrorMessage = e.Exception.Data["UserError"].ToString();
}
• Client-side (JavaScript)
function EndRequest(sender, args) {
if (!args.get_error()) return true;
if (args.get_error().message == null || args.get_error().message.length == 0)
return true;
// Get message without the prefix (name of exception type).
var msg = args.get_error().message.replace(/^[^:]+:s*/, "");
if (msg == null || msg.length == 0) return true;
alert(msg);
args.set_errorHandled(true);
}
37 of 44
38. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Processing control info
• In ASPX code
<asp:LinkButton …
ID="lnkItem"
Text='<%# Eval("Name") %>'
OnClientClick='<%# String.Format("return ToggleDetails("{0}");",
lnkItem.ClientID) %>'
OnClick="lnkItem_Click"
CommandArgument='<%# Eval("ID") %>' />
• In JavaScript
function ToggleDetails(elemID) {
…
if (/* panel has not been initialized, pass event to server */)
return true;
// Assume that $(…) returns a details panel
if ($(…).is(':visible')) $(…).hide();
else $(…).show();
// Suppress default operation caused by click event.
return false;
}
38 of 44
39. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Obtaining control info in code-behind
• In code-behind
private void lnkItem_Click(object sender, EventArgs e)
{
…
int id = 0;
if (sender is LinkButton)
id = Convert.ToInt32(((LinkButton)sender).CommandArgument);
else
…
…
}
39 of 44
40. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Other ASP.NET AJAX considerations
• ViewState
– May need to disable ViewState for controls updated via JavaScript
• Invisible elements
– Be careful with <… Visible="false" />; jQuery may not find these
elements
• Use <… style="display:none;" /> if possible
– See also
• ATLAS UpdatePanel problem with Postback Scripts and invisible controls by Rick Strahl
40 of 44
41. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Other jQuery considerations
• Text values
– Know when to use $(…).text() or $(…).val()
• Prevent default behavior
– Use e.PreventDefaults or return false from function
41 of 44
42. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
What's next?
• Interesting topics
– Page methods (see ASP.NET AJAX Page Methods by Damien White)
– jQuery, UpdatePanel, UpdateProgress in master pages
– jQuery, UpdatePanel, UpdateProgress in user controls
– Calling Web services via client-side proxy classes in ASP.NET AJAX
– Using client templates in ASP.NET 4.0 AJAX
– Using jQuery plugins
– Writing jQuery plugins
– Using jQuery UI
42 of 44
43. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Videos
• Presentations/talks/demos/videocasts/samples
– Performance Improvements in Browsers by John Resig at Google (92 min)
– MIX08 Presentation : Real-World AJAX with ASP.NET Video by Nikhil Kothari (references to
presentations/demos/talks/samples)
– ASP.NET 3.5: Adding AJAX Functionality to an Existing ASP.NET Page by Todd Miranda
– ASP.NET Podcast Show #128 - AJAX with jQuery by Wallace B. (Wally) McClure
43 of 44
44. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Resources
• JavaScript
– Create Advanced Web Applications With Object-Oriented Techniques by Ray Djajadinata
• jQuery
– The Grubbsian: jQuery (a few interesting articles)
– jQuery for JavaScript programmers by Simon Willison
• jQuery, ASP.NET, AJAX
– Tales from the Evil Empire by Bertrand Le Roy
– Blog - Microsoft .NET, ASP.NET, AJAX and more by Visoft, Inc.
• IntelliSense
– JQuery 1.3 and Visual Studio 2008 IntelliSense by James Hart
– (Better) JQuery IntelliSense in VS2008 by Brad Vin
– JScript IntelliSense FAQ
• Rich Internet Applications (RIA)
– Developing rich Internet applications (RIA) by Alek Davis (links to many samples)
• CSS
– Which CSS Grid Framework Should You Use for Web Design?
44 of 44