Fetching Record From Database using Mouseover Event of jQuery

Ever since the world of computers moved from web 1.0 to web 2.0, asynchronous calls have become dominate and the ever popular term preferred by the developers all over the world. Remember, when developer mankind moved from static pages, progressing with server-side code to asynchronous calls, it is the role of an individual developer to learn them.

Modern websites are currently migrating to ajax techniques, some very fast and some a little slow, but the migration happens. Okay. Enough of our stories! I have been working with asynchronous calls and it interests me a lot when working.

Recently, I have tried a small trick for retrieving values from a database from jQuery. The logic inspired me to share it with you.

In this article, I am trying to fetch a record from a database on mouseover event of jQuery. There are three methods in ASP.NET available for this to happen.

1. Using page methods
2. Using web services (retrieve values from them by means of using page methods in them)
3. Using handler files

I prefer the third method since handlers are light in weight, for small amount of HTTP response, it is better to use handler files. Let us have a tour based on the third method.

First, we should have an ASP.NET page. The page should process the request asynchronously. I prefer jQuery, a light-weight, writeless do-more JavaScript library that helps to reduce front-end development coding time to make an asynchronous call.

1. Create an ASP.NET project. Right-click on the Solution Explorer and choose "Add new item" or press CTRL+SHIFT+A. It opens a popup window and select web form. Name it HomePage.aspx or any name you want to give it.
   
   
2. If you are using Visual Studio 2010, you can see jQuery 1.4.1 added to the script section. Just drag it and drop it to the head section of your page. It creates a reference.
   
   
3. Now we need a div to append the content from the database using jQuery. May I ask you to create a page like the following one?
   
   
   
   
4. Now the page is created and we need to bind the data from the database table. So far, where is the database? OOPS, let's create one.
   
   
5. Right-click on the Solution Explorer, add an .mdf file and name it as a database and click OK. In the Add_Data folder, it will create a mdf file named database.mdf. This is our database now. From the Solution Explorer create a table named Employee Details and add columns from the Server Explorer.
   
   
   
   
6. Okay, I hope I have explained well about the preceding step. Our ultimate purpose is to load a record from a database from jQuery. Just think, how a plugin like jQuery understands SQL Server data. Practically, it is a big no or plain English will be "not possible". We need to be creative here.
   
   
7. Understanding Ajax call methods in jQuery will provide you two major methods for retrieving data. One, $.get() and second, $.load(). I am quite comfortable with $.load(). You might ask me a question. “These methods are used to load pages. How can you tell me it loads from a database?” To answer this question, this is where we use HTTP handlers.
   
   
8. Right-click on the Solution Explorer and add an .ashx file and by default the name will be Handler.ashx. This is where the data will be loaded. Once added, we can see it in the tree of Solution Explorer. Click on it to see two predefined methods, Process Request and IsReusable. We will use Process Request and the code will be the same, like the select code we use in ADO.Net. I hope you will understand this very well. Here the output is printed using response.write() on the screen.
   
   
   
   
9. Next is we need to load the page on mouse over. The following jQuery code does this. Remember, this load() method works fine when the page is loaded from your application.
   
   

The output for the code will be like the following one before hover:

The output on hover will be: