1. BIT 285: ( Web) Application Programming Lecture 18: Thursday, March 5, 2015 REST Creating a REST API Instructor: Craig Duckett

2. 2 Assignment 3: REST Framework is due on Tuesday, March 17 th Final Exam is on Tuesday, March 17 th Ajax Control Toolkit Tutorials

3. Installing the Ajax Control Toolkit 3

4. WALK-THROUGH 1.Create a new empty ASP.NET web site 2.Add a Default.aspx page 3.From the menu bar, select Build > Build Solution 4.Right-click on your project and select Manage NuGet Packages 5.In the popup window, select Online from the left-hand column and wait for the packages to load. 6.In the Search box in the upper right-hand column, type in Ajax and then search button 7.In the center column, select Ajax Control Toolkit (see screen cap on the next slide) then select Install button 4

5. 5

6. Installing the Ajax Control Toolkit 8.After the packages are retrieved, select the I Accept button to agree to License Acceptance window 9.After the packages are installed, select the Close button 10.You'll now see that a Bin folder has been added to the project in Solution Explorer. This folder contains all the packages you just installed and we are going to turn this into an Ajax Control Toolbox. 11.Open and pin the Toolbox in the left-hand column of Visual Studio 12.At the bottom of the Toolbox, under General, right-click on the text There are no usable controls in this group and select Add Tab (see screen cap on the next slide) 6

7. 7

8. Installing the Ajax Control Toolkit 13.When the new tab is created in the Toolbox, give it the name Ajax Controls 14.Right-click on the new Ajax Controls tab and select Choose Items… 15.After the Choose Toolbox Items loads all the.DLLs, select the OK button. 16.Right-click on the new Ajax Controls tab again and select Choose Items… 17.After the Choose Toolbox Items loads all the.DLLs, select the Browse button and go point it to inside the Bin folder in your project and select AjaxControlToolkit.dll then the Open button 18.This will load the Ajax Controls that will populated the new Ajax Controls tab (see screen cap on the next slide). 19.Select OK to add the Ajax Controls to the Ajax Control tab (see screen cap on the second slide following). 8

9. 9

10. 10

11. Using ASP.NET AJAX Controls WALK THROUGH 1.Download the lec18demo1.zip file from the Lecture 18 Example Files and unzip. 2.Open the lec18demo1 project in Visual Studio 3.Right-click on project, and select Manage NuGet Packages, then after the packages search for Ajax and install the Ajax Control Toolkit to create a Bin file in the project 4.Open the Grid.aspx file in Source view and add the following line of code to the top of the page (just below the first line already there): 5.Open the Grid.aspx file in Design view 6.In the Toolbox, under AJAX Control, drag-and-drop a ToolScriptManager control somewhere on the form (see screen cap on next slide) 11

12. 12

13. Using ASP.NET AJAX Controls 7.Click on the GridView Tasks arrow on the right to display the tasks, and you will see it has added an Add Extender…. Select Add Extender…. 13

14. Using ASP.NET AJAX Controls 8.This will display the Extender Wizard showing a collection of Ajax Controls that might be added to the GridView. 14

15. Using ASP.NET AJAX Controls 9.Select the HoverMenuExtender control, then the OK button The HoverMenuExtender is now added to your source code: NOTE: If you get an "Unable to reference extender assembly AjaxControlToolkit" error, you might try the following: - Right-click and Reset Ajax Controls in Toolbox - Delete the Bin folder and close visual studio - Recreate Bin and add Ajax Controls in Toolbox 15

16. Using ASP.NET AJAX Controls 10.Under Standard controls, add a Panel to the form, give it a BackColor, then switch to Source view and add some test text to the panel (see screen cap below). 16

17. Using ASP.NET AJAX Controls 11.Run the page to test, moving the mouse over the grid. The popup should appear in the upper left-hand corner. It's working, but now we need to add the functionality and features we want. 17

18. Using ASP.NET AJAX Controls 12.In Source view, in the GridView code, add a TemplateField after the UserName header, and add an ItemTemplate between the TemplateField tags 18

19. Using ASP.NET AJAX Controls 13.Move the Panel to inside the ItemTemplate 19

20. Using ASP.NET AJAX Controls 14.Delete the test text you added to the Panel, and replace it with: 15.In the Panel code, add style="display:none" 20

21. Using ASP.NET AJAX Controls 16.Move the HoverMenuExtender code to inside the ItemTemplate (just below the Panel) and change its ID to something easier, like hoverMenu 21

22. Using ASP.NET AJAX Controls 17.Next we will want to assign the hoverMenu ID to the current row. To do this we will need to jump through a few more hoops Return to Design view and click on the GridView control. In the Properties window, switch from the Properties columns to the Events columns by selecting the lightning bolt icon Scroll down to the RowCreated event (under Behaviors) and double-click on the textbox to create a GridView1_RowCreated() method in the code behind page 22

23. Using ASP.NET AJAX Controls 18.Add using AjaxControlToolkit; to the code behind page In the GridView1_RowCreated() method add the following lines of code: if(e.Row.RowType = DataControlRowType.DataRow) { HoverMenuExtender groovy = (HoverMenuExtender) e.Row.FindControl("hoverMenu"); e.Row.ID = e.Row.RowIndex.ToString(); groovy.TargetControlID = e.Row.ID; } 23

24. Using ASP.NET AJAX Controls 19.Back on the.aspx page, in Source view, add the following bit of code to the HoverMenuExtender" PopupPosition="Right" 24

25. Links Tooltip 25 http://www.codeproject.com/Questions/752804/Display-data-from-database-on-tooltip-of-gridview http://www.binaryintellect.net/articles/36f06160-5221-4d27-a177-320927f4b962.aspx http://aspsolutionkirit.blogspot.com/2014/02/show-gridview-row-details-in-tooltip-on.html http://aspforums.net/Threads/151783/Display-row-details-ToolTip-on-GridView-row-using-jQuery-in- ASPNet/ http://aspforums.net/Threads/151783/Display-row-details-ToolTip-on-GridView-row-using-jQuery-in- ASPNet/ http://www.dotnetcurry.com/showarticle.aspx?ID=395 http://asp.net-informations.com/gridview/popup.htm http://www.aspdotnet-pools.com/2014/06/autocomplete-textbox-in-aspnet-with.html http://www.c-sharpcorner.com/UploadFile/raj1979/how-to-use-ajax-hovermenuextender-control-using- grid-view/ http://www.c-sharpcorner.com/UploadFile/raj1979/how-to-use-ajax-hovermenuextender-control-using- grid-view/ https://www.youtube.com/watch?v=5K4qgW2Qlhg