mvc보기에서 jquery 함께 아약스 팝업 구현하는 방법?

Question

다음과 같은 직원 목록을 표시하는보기가 있다고 가정합니다.

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

그러면 mouseover 및 mouseout 이벤트를 설정하여 팝업 상자에 직원 정보를 표시합니다. 마우스가 이미지 위에 있으면 사원 정보를 상자에 표시하십시오. 마우스가 이미지에서 벗어나면 정보 상자를 닫으십시오.

그런 다음 아약스 호출에 대한 컨트롤러 작업을 만들어 데이터베이스에서 직원 데이터를 가져옵니다.

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() 메서드를 사용하고 싶을 것입니다. 오버/아웃에 대한 콜백이 포함되어있어 오버 또는 아웃에 대해 서로 다른 작업을 수행 할 수 있습니다. 당신은 당신이 서버에 다시 당신이 이미지 위에 마우스를마다하지 않을거야 그래서 AJAX 쿼리의 결과를 캐시 할 수 있습니다

$('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 
     } 
); 

참고.