Javascript 如何在MVC3中的文本上显示鼠标的局部视图？

我正在使用MVC3开发网站。我创建了一个局部视图，其中包含4个水平放置的图像。现在我有了另一个视图，即详细视图，我显示了一个文本。当用户将鼠标移到该文本上时，我希望显示图像的局部视图

如何做到这一点

很抱歉，我在同一个问题中包含了另一个问题，因为我认为它与上述问题相关。所以我的下一个问题是-

当该图像显示给用户，然后用户从该列表中选择一个图像，并根据这一点，我必须执行一些操作

我在给定的答案上工作，但我知道我不能执行其他操作，比如在显示的图像列表上选择

---

如何做到这一点呢？

您需要使用JavaScript来实现这一点，使用jQuery（JavaScript库）可能更容易

您需要将局部视图包装在一个隐藏元素中，然后在用户悬停时显示该元素

有关更多信息和示例，请参见

另请参见这里的一个基本示例：

尝试使用jquery

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

---

您还可以决定使用ajax（带有标识图像的参数）调用鼠标悬停时的操作。Ajax调用将返回部分视图，然后您可以将其包装在一个div中并以您想要的方式显示，例如，使用一些工具提示库

使用

jQuery

获取部分视图的内容，并将其显示在

moveover

或

悬停

：

例如：

$("#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

是当用户悬停在容器上时将显示的区域。

如果要在悬停时动态加载局部视图，可以使用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);
     }
}

---

是否只有当用户将鼠标移到文本上时，才可能只加载部分视图？加载新内容和显示页面中已存在的隐藏内容之间存在差异。你到底想要什么？当然有可能做到这一点，但是我只会在你要根据客户端事件动态更改这些图像时才这么做，因为客户端事件会阻止你在呈现页面时只加载这些图像。