Your SlideShare is downloading. ×
ASP Net 2B Assignment 4: Atlas Intro
ASP Net 2B Assignment 4: Atlas Intro
ASP Net 2B Assignment 4: Atlas Intro
ASP Net 2B Assignment 4: Atlas Intro
ASP Net 2B Assignment 4: Atlas Intro
ASP Net 2B Assignment 4: Atlas Intro
ASP Net 2B Assignment 4: Atlas Intro
ASP Net 2B Assignment 4: Atlas Intro
ASP Net 2B Assignment 4: Atlas Intro
ASP Net 2B Assignment 4: Atlas Intro
ASP Net 2B Assignment 4: Atlas Intro
ASP Net 2B Assignment 4: Atlas Intro
ASP Net 2B Assignment 4: Atlas Intro
ASP Net 2B Assignment 4: Atlas Intro
ASP Net 2B Assignment 4: Atlas Intro
ASP Net 2B Assignment 4: Atlas Intro
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

ASP Net 2B Assignment 4: Atlas Intro

1,447

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,447
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
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

Transcript

  • 1. ASP Net 2B Assignment 4: Atlas Intro 1. Understanding Client-based Web Applications, AJAX and MS AJAX A. Client side Javascript as been around for years. 1. Interacted with browser… B. New Browsers support DOM and 1. Now we have the XMLHTTPRequest object for asynchronous communications with the server… without a complete page round trip. C. Client side Async Javascript And XML = AJAX 1. Client side script talking directly to the server 2. Examples: Google API. D. ASP.Net AJAX is Microsoft’s extension of AJAX 1. No need to worry about browser specific differences 2. “Client” side programming is prepackaged 3. .Net Framework offers a full object model not just scripting. E. MS AJAX provides both 1. Client side script libraries for UI support a) Think client side ASP.Net code. 2. Server side DLL’s that interacts with client and create client side script on the fly. a) Web service(s) that interact with client b) AJAX server controls like ASP.Net controls but create client side script 2. MS AJAX Toolkit A. A group of tools (in the toolbox) that provide popular AJAX functionality B. A monitored collaborative program where tool authors submit their tools for publication and our benefit… LOTS of very cool stuff. C. It is version specific so when you update AJAX then update the tools. 3. Download / Install the Current MS AJAX Framework A. Uninstall any CTP or beta versions B. Microsoft Recommends Installing Visual Studio SP1 in 1. Ironically this comes in readme…. After you install AJAX! C. Download and install AJAX extensions D. http://AJAX.asp.net Page 1
  • 2. ASP Net 2B Assignment 4: Atlas Intro E. The install programs installs the AJAX DLLs directly into the GAC F. Creates the following in Program Files 1. Note the Dlls above. 2. If you drill down into the library you can find the actual .js files. G. Adds Visual Studio Web site MS AJAX Template 4. Create New Web Project HelloWorld with AJAX Template A. Modify Default.aspx as follows to check if AJAX is wired up. B. Drag on Label C. Drag on AJAX Update Panel and place another label and button in it. D. Name objects as follows E. Code as follows. Page 2
  • 3. ASP Net 2B Assignment 4: Atlas Intro F. When you run it. The Update Panel should update WITHOUT a postback. 1. Think about it… Async with server for partial page refresh in the Update panel. 2. G. Page 3
  • 4. ASP Net 2B Assignment 4: Atlas Intro 5. Download and install the Toolkit: A. Pre designed Open Source Controls using MS AJAX. functionality B. Takes you to CodePlex where you can download With Source Code to a temp folder C. CREATE “AJAX Toolkit” folder in location shown and extract files into it. D. Drill down to SampleWebSite bin folder and copy the two files. E. And paste into the Binaries folder for safe keeping… Page 4
  • 5. ASP Net 2B Assignment 4: Atlas Intro F. Drill down to the AjaxControlExtender and run the vsi file G. Note the AjaxControlToolkit is just a solution with one project per tool 1. You have all the source code. 2. You also get all the Samples! H. I. Double Click on AjaxControlToolkit.sln…. Open Normal Mode J. Set Samples as the Start PROJECT and run. 1. Patience: it is compiling three projects including ALL the tools. K. The sample site is Very Very took… note the walkthroughs 1. Check out the AJAX Calendar Control…. Page 5
  • 6. ASP Net 2B Assignment 4: Atlas Intro 6. Develop with the ToolKit A. Open HelloWorld you just created. B. Right click on the Toolbar and create a new tab for the toolkit C. D. Right click in the new tab. Choose Items and browse to the Binaries folder where you placed the AjaxControlToolKit.dll. Open it. E. You will get dozens of tools! F. “Extender” concept… it extends the functionality of an existing ASP control (ie creates a “super textbox”) G. In DESIGN mode Drag the ConfirmButtonExtender into the update panel 1. Set properties as shown. 7. Screen print it working and all source code. 8. Using MS AJAX Update Panel with Grid, Form View and Database A. Create new MS AJAX Website Contacts B. Right click on App_Data . Add New . SQL Database . Contacts C. Right click on tables . Add NewTable MyContacts Page 6
  • 7. ASP Net 2B Assignment 4: Atlas Intro 1. Note that ContactID is Identity , primary key D. Show table data and add 4 records. Two active, two inactive. E. F. Modify the Default Page as follows G. Add Dropdown list ddlStatus as shown Page 7
  • 8. ASP Net 2B Assignment 4: Atlas Intro H. Drag on GridView and Link to Dropdown list in datasource as shown I. Configure Grid as follows…Mostly default J. Test to make sure it works. K. Drag on a formview control and link to same Datasource as gridview. L. Make the default mode Insert. Page 8
  • 9. ASP Net 2B Assignment 4: Atlas Intro M. Should work like the following: N. Test to make sure it all works. Note the postbacks on changes. Adding MS AJAX to “Enable” partial page postbacks. O. Add scriptmanager if not already there (Default comes with it) P. Wrap up the Grid in Update panel, add a trigger pointing to the dropdownlist Page 9
  • 10. ASP Net 2B Assignment 4: Atlas Intro 9. Test: Note that changes to the drop down list trigger a NON postback (or partial page) refresh of just the grid. A. Very very cool stuff. 10. Wrap up the Form View in an Update.content panel A. Goal is not to flash back with a postback when adding a new record Page 10
  • 11. ASP Net 2B Assignment 4: Atlas Intro B. BUT we only want this panel to update when a condition within the panel requires it… this is called conditional C. Test to see if Adding a new record does not trigger a post back. 1. BUT the panel only contacts the server if something inside it changes. 11. But AJAX is Async so network latency means we need to entertain the user while we are waiting for the server to respond A. Add the following Update Panel below the dropdown list B. I provide a number of animated gifs on our web site… C. +1 Extra credit for the Green Spinner used in Reporting Services! 1. Have to provide the class with the gif D. But we need to slow down the updates and inserts so we can see it so add the following code. Page 11
  • 12. ASP Net 2B Assignment 4: Atlas Intro 12. If you are good with SnagIt you can capture the UpdateProgress in Action 13. Print All Code and Screen shots to prove its working. 14. AJAX Enabling an Existing Web Application & Calendar Control A. Create a New Empty Web Application B. Add HelloWorld.aspx as shown C. D. Code as follows E. F. Run WITH DEBUG (F5) 1. To generate a web.config and 2. To prove it works with a POSTBACK… green progress bar across bottom. G. Drag on AJAX Scriptmanager and UpdatePanel 1. Drag controls inside UpdatePanel Page 12
  • 13. ASP Net 2B Assignment 4: Atlas Intro H. Run with Debug and double click on browser error in lower left corner I. PRINT the following message… you will probably see it again someday! J. Open an exsiting AJAX site such as HelloWorld you created earlier 1. Note its web config….lots here. 2. This is minimum to get our page running 3. 4. Copy and paste into your web.config. K. Now run the page without errors or PostBack L. PRINT the web.config. Page 13
  • 14. ASP Net 2B Assignment 4: Atlas Intro 15. Add Web Page Calendar.aspx A. Drag on ScriptManager and three textboxes as shown. B. C. In page load preset the date to a couple months in the future. D. Drag on CalendarExtender and hook up to the basic calendar E. Run and flip through the various modes of the calendar by clicking on various parts. F. Add Existing calendar icon from the samples project G. H. Hook up the second text box as follows I. Page 14
  • 15. ASP Net 2B Assignment 4: Atlas Intro J. Run to prove it works K. Add a new style sheet called styles.css L. From the Samples project, open SytleSheet.css copy the following section into your styles.css 1. PLEASE MODIFY with your own experiments! 2. Show me what this can do! M. N. Drag styles.css onto the head of calendar.aspx Page 15
  • 16. ASP Net 2B Assignment 4: Atlas Intro O. Hookup txtFormat as follows. 1. Note… I will not use the text box format in real life… 2. 3. Running P. 16. Extra Credit A. How would you use OnClientDateSelectionChanged ? B. What other method, controls code could you use to validate user entry on the client side? 17. Next Week AJAX part two! Page 16

×