如何在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彈出窗口？

回答

相關問題