Question

假设我有一个显示员工列表的视图：

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

然后我想为图像设置mouseover和mouseout事件，以便在弹出框中显示员工信息。如果鼠标位于图像上方，则在框中显示员工信息。如果鼠标不在图像中，请关闭信息框。

然后我为ajax调用创建控制器操作以从数据库获取员工数据，如：

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

  return View(obj);
}

然后我需要为mouseover事件编写一些jquery代码来获取动作中的数据和mouseout的代码以关闭弹出框（如果它正在显示）。

如何解决此问题？

Answer 1

您可能想要使用hover()方法。它包括过度/结束的回调，以便您可以对over over 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
      }
  );

请注意，您可能希望缓存AJAX查询的结果，这样每次将鼠标悬停在图像上时都不会返回服务器。

如何在mvc视图中使用jquery实现ajax弹出窗口？

1 个答案: