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

假设我有一个视图来显示员工像列表：如何在mvc视图中使用jQuery实现ajax弹出窗口？

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

然后我想设置鼠标悬停和mouseout事件的图像disp已在弹出框中的员工信息。如果鼠标悬停在图像上，请在框中显示员工信息。如果鼠标不在图像上，请关闭信息框。

然后，我创建的控制器操作的Ajax调用从数据库中获取雇员数据，如：

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

    return View(obj); 
}

然后我需要编写鼠标悬停事件的一些jQuery代码来从行动和代码鼠标移出到数据关闭弹出框，如果它显示。

如何解决此问题？

来源

2009-07-22 KentZhou

您可能想要使用hover()方法。它包括over/out的回调，以便您可以在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查询这样你就不会每次将鼠标悬停在图像时光倒流到服务器的结果。

来源

2009-07-22 14:37:34 tvanfosson

谢谢。你能更详细地给我吗？如果使用$（'image'），它不会知道每行中每个图像的不同。不同行中的图像会导致不同的员工数据检索。如何为这个案例的每一行传递特定的员工？ – KentZhou 2009-07-22 14:59:09

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

回答

相关问题