MVC3에서 마우스로 부분 뷰를 표시하는 방법?

Question

MVC3을 사용하여 웹 사이트를 개발 중입니다. 나는 수평으로 놓인 4 개의 심상을 포함하는 부분적인 전망을 창조했다. 이제 세부보기 및 하나의 텍스트를 표시하는 다른보기가 있습니다. 그 텍스트 위에 마우스를 올리면 이미지의 부분 뷰를 보여주고 싶습니다.

어떻게 하시겠습니까?

미안하지만 나는 위 질문과 관련이 있기 때문에 같은 질문에 다른 질문을 포함하고 있습니다. 그래서 내 다음 문제는 -

입니다. 그 이미지가 사용자에게 표시되면 사용자는 해당 목록에서 이미지 중 하나를 선택하고 이에 따라 일부 작업을 수행해야합니다.

나는 주어진 답변에 대한 작업을했지만, 나는 표시된 이미지 목록에서 선택과 같은 다른 작업을 수행 할 수 없다는 것을 알게되었다.

어떻게해야합니까?

Answer 1

JavaScript를 사용하면 jQuery (자바 스크립트 라이브러리)를 사용하는 것이 더 쉽습니다.

사용자가 숨겨진 요소에 래핑 된 부분 뷰를 가져온 다음 사용자가 마우스 오버 할 때이 요소를 표시해야합니다.

자세한 내용과 예제는 http://api.jquery.com/hover/을 참조하십시오.

또한 기본 예제 여기를 참조하십시오

Answer 2

http://jsfiddle.net/49bAz/ JQuery와

또한 (이미지를 식별하는 매개 변수) Ajax를 사용하여 마우스 호버에 대한 작업을 호출하도록 결정할 수 있습니다

$("#id").mouseover(function() { 
    $.ajax({ 
     url: 'url', 
     success: function (response) { 
     $(response.responseText).appendTo($('body')); 
    } 
    }); 
}); 

Answer 3

으로 시도합니다. Ajax 호출은 부분 뷰를 반환 한 다음 div에 래핑하여 원하는 방식으로 표시 할 수 있습니다 (예 : 부분보기의 내용을 얻을 moveover에 표시하는 일부 툴팁 라이브러리

Answer 4

사용 jQuery를 사용하거나 hover : 예를 들어

:

$("#container").mouseover(function() { 
    $.ajax({ 
    url: "@Url.Action("YourPartialView")", 
    type: "GET", 
    success: function(data) { 
     var htmlx = data; // the View 

     $("#content").append(htmlx); 
     $("#content").slideDown('slow'); 
     } 
    }); 
}); 

어디 #container 당신의 텍스트를 유지하는 영역 #content은 사용자가 컨테이너를 가리킬 때 표시 될 영역입니다.

Answer 5

당신이 가져가에 동적 부분 뷰를로드 할 경우, JQuery와 아약스 호출을 사용하여 수행 할 수 있습니다

public ActionResult Action(int imageId) 
{ 
    // get the model for your partial view 
    var model = GetModel(imageId); 

    // you can optionally return different result based on request type 
    if (Request.IsAjaxRequest()) 
    { 
      // update with actual path of your partial view 
      return PartialView("path-to-your-view", model); 
    } 
} 

:이 유사 조치가 필요합니다 컨트롤러에서

$("img.your-class").mouseover(function() { 

    // get the image ID - modify according to your markup 
    var imageId = $(this).data('image-id'); 

    $.ajax({ 

     // use the imageId from above here 
     url: "add-your-view-url", 

     success: function(data) { 
      $("#target-div-id").html(data); 
     } 

    }); 

}); 

을