如何在MVC3中显示鼠标悬停在文本上的部分视图

how to show partial view on mouse over on text in MVC3?

本文关键字：视图 文本 鼠标 MVC3 显示 悬停      更新时间：2023-09-26

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

如何做到这一点？

很抱歉，我在同一个问题中加入了另一个问题，因为我认为它和上面的问题有关。所以我的下一期是

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

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

如何做到这一点？

使用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是用户悬停在容器上时将显示的区域。

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

尝试jquery

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

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

您需要使用JavaScript来完成这项工作，使用jQuery（一个JavaScript库）可能会更容易。

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

请参阅http://api.jquery.com/hover/了解更多信息和示例。

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

相关文章：