如何顯示鼠標懸停在MVC3中的文本的部分視圖？

Question

我正在使用MVC3開發網站。 我創建了一個局部視圖，其中包含4張水平放置的圖像。 現在，我有另一個視圖是詳細信息視圖，並且顯示了一個文本。 當用戶將鼠標懸停在該文本上時，我想顯示圖像的局部視圖。

這該怎么做 ？

抱歉，我在同一個問題中包含另一個問題，因為我認為這與上述問題有關。 所以我的下一個問題是-

當顯示給用戶的圖像時，用戶從該列表中選擇圖像之一，並根據此圖像我必須執行一些操作。

我致力於給出的答案，但是我知道我無法執行其他操作，例如在顯示的圖像列表上進行選擇。

怎么做呢？

Answer 1

使用jQuery獲得局部視圖的內容和顯示它們moveover或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 2

如果要在懸停時動態加載部分視圖，可以使用jquery ajax調用來完成：

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

    }); 

});

在您的控制器中，您將需要執行以下操作：

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);
     }
}

Answer 3

您將需要使用JavaScript進行此操作，而使用jQuery（一個javascript庫）可能會更容易。

您需要將“部分視圖”包裝在一個隱藏元素中，然后在用戶將鼠標懸停時顯示此元素。

有關更多信息和示例，請參見http://api.jquery.com/hover/ 。

另請參見此處的基本示例： http : //jsfiddle.net/49bAz/

Answer 4

嘗試用jQuery

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

Answer 5

您還可以決定使用ajax（帶有標識圖像的參數）調用鼠標懸停操作。 Ajax調用將返回部分視圖，然后您可以將其包裝在div中並以所需的方式顯示，例如使用一些工具提示庫