how to implement ajax popup with jquery in mvc view?

Question

Suppose I have a view to display the list of employee like:

<table>
<% foreach (var item in Model)
{ %>
<tr><td>
 <img name=<%="disp"+item.id%> alt="" src="../../Content/Disp.gif" />
</td></tr>
<% { %>

Then I want to set mouseover and mouseout event for the image to disp the employee info in a popup box. If the mouse is over the image, display employee info in the box. If the mouse is out of the image, close the info box.

Then I create controller action for ajax call to get employee data from database like:

public ActionResult AjaxDisp(int id, string format)
{
  var obj= repository.GetEmployee(id);
  if (format == "json")
     return Json(obj);

  return View(obj);
}

Then I need to write some jquery code for mouseover event to get the data from the action and code for mouseout to close popup box if it is showing on.

How to resolve this issue?

Answer 1

You probably want to use the hover() method. It includes callbacks for over/out so that you can do different actions on over vs. out.

  $('image').hover(
      function() {

           var empId = $(this).attr('name').replace(/disp/,'');
           $.ajax({
              url: '<%= Url.Action( "AjaxDisp" ) %>',
              data: { id: empId, format: 'json' },
              dataType: 'json',
              success: function(data,status) {
                 // populate the popup and display it            
              }
           });
      }
      function() {
           // remove (hide?) the popup
      }
  );

Note that you may want to cache the results of the AJAX query so you're not going back to the server every time you hover over the image.