jQueryUI Tooltip Widget with ASP.NET Web Service

jQueryUI Tooltip Widget with ASP.NET Web Service

Description: In this article, we will show some tooltips on textboxes and the tooltip text will come through our SQL Database tables for each textbox. We will achieve this using the following agenda.

  • First we will create a table in our database which contains tooltip text to be displayed against each control that we will use in our web page.
  • We will create an auto-implemented class file that have auto implemented properties that corresponds to our database table columns.
  • Now, we will create an ASP.NET web service, that retrieve data from database. This retrieved data will be used to display tooltip for each control in JSON format.
  • At last, we will design our web page body with some sample textboxes with specific ID’s and these ID’s should be same as that of our database table column which contains control name.
  • Now, we use jQuery code to call our web service which contains retreived data and show it as tooltip using tooltip widget property of jQueryUI.

Thinking it to be very difficult, hold on…first read the article then you will come to know, how easy it is.

You can download source code here..

Solution:

Step 1: Create Database with some sample data. You can use your own data or use the below script.

CREATE TABLE dbo.TooltipEmployees(controlName NVARCHAR(100) NULL,
                                  tooltipData NVARCHAR(100) NULL);
 
INSERT INTO dbo.TooltipEmployees(controlName,
                                 tooltipData)
VALUES(N'Name', N'Please enter as in Id proof');
 
INSERT INTO dbo.TooltipEmployees(controlName,
                                 tooltipData)
VALUES(N'Salary', N'Enter as per payslip');
 
INSERT INTO dbo.TooltipEmployees(controlName,
                                 tooltipData)
VALUES(N'EmailId', N'Enter official email');
 
INSERT INTO dbo.TooltipEmployees(controlName,
                                 tooltipData)
VALUES(N'Designation', N'Enter as per payslip');
 
CREATE PROC spGetTooltipData
       @controlName NVARCHAR(100)
AS
BEGIN
SELECT te.*
FROM dbo.TooltipEmployees te
WHERE te.controlName=@controlName;
END;

Our database table will look like this.

Step 2: Create an Empty ASP.NET Web application.

Step 3: Add a class file.

Step 4: Replace with the following code.

namespace Asp.netTooltipUsingJqueryUI
{
    public class Tooltip
    {
        public string controlName { getset; }
        public string tooltipData { getset; }
    }
}

Step 5: Add a new web service file.

Step 6: Replace with the following code.

using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;
 
namespace Asp.netTooltipUsingJqueryUI
{
 
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class TooltipDataService : System.Web.Services.WebService
    {
        [WebMethod]
        public void GetTooltipData(string controlName)
        {
            string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
 
            Tooltip toolTip = new Tooltip();
 
            using (SqlConnection con = new SqlConnection(CS))
            {
                con.Open();
                SqlCommand cmd = new SqlCommand("spGetTooltipData", con);
                cmd.CommandType = CommandType.StoredProcedure;
 
                cmd.Parameters.AddWithValue("@controlName", controlName);
 
                SqlDataReader dr = cmd.ExecuteReader();
 
                while(dr.Read())
                {
                    toolTip.controlName = dr["controlName"].ToString();
                    toolTip.tooltipData = dr["tooltipData"].ToString();
                }
 
                JavaScriptSerializer serializer = new JavaScriptSerializer();
                Context.Response.Write(serializer.Serialize(toolTip));
            }
        }
    }
}

Note: Go to Web.config file and add the connection strings to your database.

  <connectionStrings>
    <add connectionString="Data Source=.;Initial Catalog=DemoDB;Integrated Security=True" name="DBCS" providerName="System.Data.SqlClient"/>
  </connectionStrings>

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 strored procedure that returns data based on this parameter. We are just using simple ADO.NET code to retreive data.
  • The retreived 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 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 webform to implement our front end code.

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

            <table border="1">
                <tr>
                    <td><b>Name: </b></td>
                    <td>
                        <input type="text" title="" id="Name" class="tooltips" /></td>
                </tr>
 
                <tr>
                    <td><b>Salary: </b></td>
                    <td>
                        <input type="text" title="" id="Salary" class="tooltips" /></td>
                </tr>
 
                <tr>
                    <td><b>Email Id: </b></td>
                    <td>
                        <input type="text" title="" id="EmailId" class="tooltips" /></td>
                </tr>
 
                <tr>
                    <td><b>Designation: </b></td>
                    <td>
                        <input type="text" title="" id="Designation" class="tooltips" /></td>
                </tr>
            </table>

Note: The id of each of the HTML element should be same as 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.

    <script type="text/javascript">
        $(document).ready(function () {
 
            $('.tooltips').tooltip({
                content: getTooltipText
            });
 
            function getTooltipText() {
                var rtnValue = '';
                $.ajax({
                    method: "POST",
                    dataType: "json",
                    url: "TooltipDataService.asmx/GetTooltipData",
                    data: { controlName: $(this).attr('id') },
                    async: false,
                    success: function (data) {
                        rtnValue = data.tooltipData;
                    }
                });
                return rtnValue;
            }
        });
    </script>

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 as firstly we will call the service, then sends data to it and again retreive 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 success, we have returned the data back to control using rtnValue variable.
  • Finally, we are using jQuery class selector, and implemented 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 changes and press Ctrl + F5 and you will see this.

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

Hope you enjoyed this and if you like please visit my blog debugsolutions and subscribe for email alerts and share as much as possible.

Advertisements

One thought on “jQueryUI Tooltip Widget with ASP.NET Web Service

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s