BIT 285: (Web) Application Programming

Lecture 19: Tuesday, March 10, 2015

Ajax and jQuery: Adding Tooltip and Search Box (with Auto-Complete) to a Project

Instructor: Craig Duckett

2

Assignment 3: REST Framework is due on Tuesday, March 17th Final Exam is on Tuesday, March 17th

Ajax Control Toolkit Tutorials

3

Things We Did Not Cover in the BIT285 Class This Quarter (but which you will eventually need to learn moving forward)

ASP.NET MVCMVC is a framework for building web applications using a MVC (Model View Controller) design:

- The Model represents the application core (for instance a list of database records).

- The View displays the data (the database records).

- The Controller handles the input (to the database records).

• ASP.NET MVC Overview (Microsoft Documentation)

• Introduction to ASP.NET MVC (Microsoft Video, Documentation)

• Getting Started with ASP.NET and MVC 5 (Microsoft Tutorial, Walkthrough)

Entity FrameworkEntity Framework is an object-relational mapper that enables ASP.NET developers to work with relational data using domain-specific objects. It eliminates the need for most of the data-access code that developers usually need to write.

• Get the Entity Framework (Manage NuGet Packages)

• Get Started with Entity Framework (Microsoft Video, Documentation)

• Getting Started with Entity Framework Using MVC 5 (Microsoft Tutorial, Walkthrough Project)

4

Ajax and jQuery: Adding Tooltip and Search Box to a Project

5

Using ASP.NET AJAX ControlsWALK THROUGH

1. Download the lec19demo1.zip file from the Lecture 19 Example Files and unzip.

2. Open the lec19demo1 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. Add an new Ajax Controls tab to the Toolbox, and add the Ajax Control items to the tab.

5. 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):

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix=“jax" %>

6. Open the Grid.aspx file in Design view

7. In the Toolbox, under the new AJAX Controls, drag-and-drop a ToolkitScriptManager control somewhere on the form (see screen cap on next slide)

6

7

Using ASP.NET AJAX Controls7. Go into Source view and comment out the Email, Password, and Country datafields in the

GridView

8

Using ASP.NET AJAX Controls8. This will display the Extender Wizard showing a collection of Ajax Controls that might be

added to the GridView.

9

10

Using ASP.NET AJAX Controls9. Add a Label (called LabelSearch) and give it the text Search

10. Add a Textbox (called txtSearch) and add a coupe of line breaks <br> after the control

NOTE: I Usually do this in Source view because it is easier to place the controls.

11

12

Using ASP.NET AJAX Controls11. From the new Ajax Control tab, drag-and-drop the AutoCompleteExtender control to a line

just below the two line breaks

13

Using ASP.NET AJAX Controls12. In Design view, click on the AutoCompleteExtender and set the following Properties:

• TargetControlID="txtSearch"

• MinimumPrefixLength="1"

• EnableCaching="false"

• CompletionSetCount="10"

• CompletionInterval="100"

• ServiceMethod="SearchUser"

• UseContextKey="True"

14

Using ASP.NET AJAX Controls13. In the Grid.aspx.cs code-behind, add the following to the top of the page

using System.Data.SqlClient;using System.Configuration;using System.Data;

15

Using ASP.NET AJAX Controls14. In the Grid.aspx.cs code-behind, add the following below the Page_Load() method:

[System.Web.Script.Services.ScriptMethod()] [System.Web.Services.WebMethod] public static List<string> SearchUser(string prefixText, int count) { using (SqlConnection conn = new SqlConnection()) { conn.ConnectionString = ConfigurationManager.ConnectionStrings["RegistrationConnectionString"].ConnectionString; using (SqlCommand cmd = new SqlCommand()) { cmd.CommandText = "select UserName from UserData where " + "UserName like @SearchText + '%'"; cmd.Parameters.AddWithValue("@SearchText", prefixText); cmd.Connection = conn; conn.Open(); List<string> user = new List<string>(); using (SqlDataReader reader = cmd.ExecuteReader()) { while (reader.Read()) { user.Add(reader["UserName"].ToString()); } } conn.Close(); return user; } } }

16

Using ASP.NET AJAX Controls15. Return to the Grid.aspx page, and run the program to test. This should bring up a user name

from the grid when the first letter is typed into the search box. If this is working, then we can go on to add more features and functionality to the program.

17

Using ASP.NET AJAX Controls16. Go to the BIT285 website and invoke Assignment 3, and under Hints and Help select the

first link offered from the aspsnippets.com site:

Display GridView Row details on Cell MouseOver using jQuery ToolTip Plugin in ASP.Net ASP.Net, C#.Net, VB.Net, AJAX, JQuery

18

Using ASP.NET AJAX Controls17. Scroll down to the section called jQuery implementation of ToolTip and copy the two

jQuery script paths, then paste these in the head of the Grid.aspx file:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.simpletip/1.3.1/jquery.simpletip-1.3.1.min.js"></script>

19

Using ASP.NET AJAX Controls18. In the Solution Explorer, right-click on the project and add a new JavaScript file, naming it

Scripts.js and add a link to the Scripts.js file in the head of the Grid.aspx file

<script type="text/javascript" src="Scripts.js"></script>

20

Using ASP.NET AJAX Controls19. Return to the aspsnippets.com page and copy the function (leaving off the <script> tages,

and paste it in the Scripts.js file:

21

$(function () { $('[id*=GridView1] tr').each(function () { var toolTip = $(this).attr("title"); $(this).find("td").each(function () { $(this).simpletip({ content: toolTip }); }); $(this).removeAttr("title"); });});

22

Using ASP.NET AJAX Controls20. In the Solution Explorer, right-click on the project and add a new web form called Info.aspx

23

Using ASP.NET AJAX Controls21. Delete the Info.aspx.cs code behind file, then open the Info.aspx page in Source view, and

overwrite the code in the page with the following code (see next slide for copying code):

24

<%@ Page Language="C#" %><%@ Import Namespace="System.Data" %><%@ Import Namespace="System.Data.SqlClient" %>

<script runat="server">

protected void Page_Load(object sender, EventArgs e) { string connect = ConfigurationManager.ConnectionStrings["RegistrationConnectionString"].ConnectionString; string query = "SELECT UserName, Email, Password, Country FROM UserData WHERE UserName = @UserName"; string id = Request.QueryString["searchName"]; if (id != null) { using (SqlConnection conn = new SqlConnection(connect)) { using (SqlCommand cmd = new SqlCommand(query, conn)) { cmd.Parameters.AddWithValue("@UserName", Request.QueryString["searchName"]); conn.Open(); SqlDataReader readit = cmd.ExecuteReader(); if (readit.HasRows) { while (readit.Read()) { Response.Write("<div id='readit'>"); Response.Write("<strong>User Name: </strong>" + readit["UserName"].ToString() + "<br />"); Response.Write("<strong>Password: </strong>" + readit["Password"].ToString() + "<br />"); Response.Write("<strong>Email: </strong>" + readit["Email"].ToString() + "<br />"); Response.Write("<strong>Country: </strong>" + readit["Country"].ToString() + "<br />"); Response.Write("</div>"); } } } } } else { Response.Write("NO USER NAME SELECTED"); } Response.End(); }</script>

25

Using ASP.NET AJAX Controls22. Return to the Grid.aspx in Design view, click on the Gridview Control to show the properties

window, click on the lightning bolt icon to get to the Events, scroll down to the Data section and double-click in the empty text space after RowDataBound; this will auto-fill-in the pertinent method and create it in the Grid.aspx.cs code behind file and add the connecting code to the GridView in the Grid.aspx file.

26

Using ASP.NET AJAX Controls23. In the Grid.aspx.cs code behind file, add the following code to the GridView1_RowDataBound

method (code available on the next slide)

27

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.ToolTip = "<strong>User Name: </strong>" + (e.Row.DataItem as DataRowView)["UserName"].ToString() + "<br/> " + "<strong>Country: </strong>" + (e.Row.DataItem as DataRowView)["Country"].ToString() + "<br/>" + "<strong>Email: </strong>" + (e.Row.DataItem as DataRowView)["Email"].ToString(); } }

28

Using ASP.NET AJAX Controls24. In the Scripts.js file, add the following code above the function you copy-pasted there from

the aspsnippets.com site, and add a closing }); at the bottom (copy code available on next slide)

29

$(document).ready(function () { $('#txtSearch').change(function () { $.ajax({ contentType: "text/html; charset=utf-8", data: "searchName=" + $('#txtSearch').val(), url: "Info.aspx", dataType: "html", success: function (data) { $("#Info").html(data); } }); });

// For more info see https://code.google.com/p/jquery-simpletip/wiki/Tutorials2 for simple tooltip $(function () { $('[id*=GridView1] tr').each(function () { var toolTip = $(this).attr("title"); $(this).find("td").each(function () { $(this).simpletip({ content: toolTip }); }); $(this).removeAttr("title"); }); }); });

30

Using ASP.NET AJAX Controls25. At this point the features should sorta/kinda work, but not in the way envisioned. This is

because CSS hasn’t been applied yet to do the formatting.

31

Using ASP.NET AJAX Controls26. In the Solution Explorer, right-click on the project and add a new Stylesheet called

Styles.css, then link to the Styles.css stylesheet in the head of Grid.aspx

<link rel="stylesheet" href="Styles.css" type="text/css" />

32

Using ASP.NET AJAX Controls27. Add CSS elements to the Styles.css file, then go in add the ID/Class names to the pertinent

tags in the Grid.aspx file (copy code on the next slide)

33

body { background-color: #313165; }

td { cursor: pointer; }

h3 { color: white; font-family: Verdana; }

.tooltip { position: absolute; top: 0; left: 0; z-index: 3; display: block; margin-left: 22px; margin-top: -10px; height: 60px; width: 300px; background-color: #99ccff; border: solid thin black; border-radius: 10px; color: Blue; padding: 10px; font-size: 11pt; font-family: verdana; }

.tooltip:before { content: ""; position: absolute; height: 0; width: 0; right: 100%; top: 0; margin-top: 8px; margin-right: -9px; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 9px solid #333366;* }

#content { width: 590px; margin-left: auto; margin-right: auto; padding: 10px; background-color: #666699; }

#readit { background: #cab2e9; width: 400px; float: right; padding: 10px; margin-top: -140px; position: fixed; margin-left: 160px; margin-right: 20px; color: blue; font: normal 11pt verdana; border: solid thin black; }

#searchit { width: 152px; float: right; clear: right; }

34

Using ASP.NET AJAX Controls28. Make sure and add an additional <div id=“Info”></div> at the bottom of the Grid.aspx file

just above the last closing </div> tab

35

Using ASP.NET AJAX Controls29. At this point all the functionality of the Search Box and Tooltips should be operational,

although you may still have to go in and tweak your CSS to make sure everything lines up correctly.

30. For your convenience, a completed, functional, fully styled example of this project can be downloaded here: lec19_1v3.zip

A FEW DIFFERENCES BETWEEN THE lec19_1v3 PROJECT AND THE WALK THROUGH:

• Rather then linking to the simpletip.js file in the header, I downloaded a simpletip.js file, added it to the project, and linked to it in the project.

• The OnRowDataBound property was given a slightly different name

• The formatting/style of the GridView is slightly different.

• There is a <h3> tag near the top of the Grid.aspx page

36

REVIEW Installing the Ajax Control Toolkit

37

Installing the Ajax Control Toolkit 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

38

39

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)

40

41

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).

42

43

44

LinksTooltip

• 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-ASPN

et/

• 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-gri

d-view/

• https://www.youtube.com/watch?v=5K4qgW2Qlhg