我正在使用MVC3开发网站。我创建了一个局部视图,其中包含4个水平放置的图像现在我有另一个视图,是详细视图,我显示了一个文本。当用户将鼠标悬停在该文本上时,我想显示我对图像的部分视图。
怎么做?
很抱歉,我在同一个问题中包含了另一个问题,因为我认为它与上述问题相关。所以我的下一期是 -
当向用户显示图像然后用户从该列表中选择一个图像时,我必须执行某些操作。
我致力于给出答案,但我知道我无法执行其他操作,如选择显示的图像列表。
如何做到这一点?
答案 0 :(得分: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
是用户将鼠标悬停在容器上时显示的区域。
答案 1 :(得分: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);
}
}
答案 2 :(得分:0)
您需要使用JavaScript执行此操作,使用jQuery(javascript库)可能更容易。
您需要将部分视图包装在隐藏元素中,然后在用户将鼠标悬停时显示此元素。
有关更多信息和示例,请参阅http://api.jquery.com/hover/。
另见这里的基本示例:http://jsfiddle.net/49bAz/
答案 3 :(得分:0)
尝试使用jquery
$("#id").mouseover(function () {
$.ajax({
url: 'url',
success: function (response) {
$(response.responseText).appendTo($('body'));
}
});
});
答案 4 :(得分:0)
您还可以决定使用ajax(带有标识图像的参数)在鼠标悬停时调用操作。 Ajax调用将返回部分视图,然后您可以将其包装在div中并以您想要的方式呈现,例如使用一些工具提示库