JQueryUI Tooltip Widget With ASP.NET Web Service

Note: Go to Web.config file and add the connection strings to your database.
Explanation of Web Service code:

• I have created a method that needs a parameter. This parameter actually is the control name which will check with the control name in our database table.
  
  
• We have created a stored procedure that returns data based on this parameter. We are just using simple ADO.NET code to retrieve data.
  
  
• The retrieved data is now assigned to auto-implemented properties of class file.
  
  
• This data is now changed to JSON format using JavaScriptSerializer class.
  
  
• The connection string is used to connect to the database. The (.) in data source refers to local connection.

Step 7: Now let's check our webservice, if it is returning correct data from database or not. Press Ctrl + F5.







Now you can see that our web service is returning correct data in JSON format.

Step 8: Add a new Web form to implement our front end code.



Step 9: Go to source mode of Web form and add the following code in the body tag.

Note: The id of each of the HTML element should be same that you have stored in your database.

Step 10: To add the jQuery references, visit my article here and follow step 5 and step 9 to download jQueryUI files and add their references or you can just download the code file attached with this article.

Step 11: Add the following jQuery code to the head section.
Explanation of jQuery code:

• We have created a function to make the AJAX call to web service. We will send the controlName parameter to web service using the id property of our input elements in the body tag.
  
  
• Method is POST, since firstly we call the service, then send the data to it and again retrieve database from it.
  
  
• Datatype is JSON as we are returning data from services in JSON format using JavascriptSerializer class.
  
  
• The call to service should be synchronous as if it is asynchronous, then the call to service will be once, but we need continuous connection with service.
  
  
• If the ajax call is a success, we have returned the data back to control using rtnValue variable.
  
  
• Finally, we are using jQuery class selector, and implement tooltip widget and the content of that widget comes from the function that made the AJAX call and returned data.

Step 12: Now save all the changes, press Ctrl + F5 and you will see the following:











Have you ever wondered how easy to do it using jQuery.

Hope you enjoyed this!