5

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

这个怎么做 ？

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

当该图像显示给用户时，用户从该列表中选择一个图像，并据此我必须执行一些操作。

我处理了给定的答案，但我知道我无法执行其他操作，例如在显示的图像列表上进行选择。

这也要怎么做？

4

5 回答 5

3

用于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，当用户将鼠标悬停在容器上时将显示的区域。

于 2012-09-07T11:44:26.057 回答
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);
     }
}
于 2012-09-07T11:51:05.860 回答
0

尝试使用 jquery

$("#id").mouseover(function () {
   $.ajax({
       url: 'url',
       success: function (response) {
        $(response.responseText).appendTo($('body'));
    }
   });
});
于 2012-09-07T11:42:09.113 回答
0

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

于 2012-09-07T11:43:22.107 回答
0

您需要使用 JavaScript 执行此操作，使用 jQuery（一个 javascript 库）可能更容易。

您需要将局部视图包裹在隐藏元素中，然后在用户悬停时显示此元素。

有关更多信息和示例，请参阅http://api.jquery.com/hover/ 。

另请参阅此处的基本示例：http: //jsfiddle.net/49bAz/

于 2012-09-07T11:38:33.960 回答