Suppose I have a view to display the list of employee like:
假设我有一个显示员工列表的视图:
<table>
<% foreach (var item in Model)
{ %>
<tr><td>
<img name=<%="disp"+item.id%> alt="" src="../../Content/Disp.gif" />
</td></tr>
<% { %>
Then I want to set mouseover and mouseout event for the image to disp the employee info in a popup box. If the mouse is over the image, display employee info in the box. If the mouse is out of the image, close the info box.
然后我想为图像设置mouseover和mouseout事件,以便在弹出框中显示员工信息。如果鼠标位于图像上方,则在框中显示员工信息。如果鼠标不在图像中,请关闭信息框。
Then I create controller action for ajax call to get employee data from database like:
然后我为ajax调用创建控制器操作以从数据库获取员工数据,如:
public ActionResult AjaxDisp(int id, string format)
{
var obj= repository.GetEmployee(id);
if (format == "json")
return Json(obj);
return View(obj);
}
Then I need to write some jquery code for mouseover event to get the data from the action and code for mouseout to close popup box if it is showing on.
然后我需要为mouseover事件编写一些jquery代码来获取动作中的数据和mouseout的代码以关闭弹出框(如果它正在显示)。
How to resolve this issue?
如何解决这个问题?
1 个解决方案
#1
You probably want to use the hover() method. It includes callbacks for over/out so that you can do different actions on over vs. out.
您可能想要使用hover()方法。它包括过/退的回调,以便您可以对over over out执行不同的操作。
$('image').hover(
function() {
var empId = $(this).attr('name').replace(/disp/,'');
$.ajax({
url: '<%= Url.Action( "AjaxDisp" ) %>',
data: { id: empId, format: 'json' },
dataType: 'json',
success: function(data,status) {
// populate the popup and display it
}
});
}
function() {
// remove (hide?) the popup
}
);
Note that you may want to cache the results of the AJAX query so you're not going back to the server every time you hover over the image.
请注意,您可能希望缓存AJAX查询的结果,这样每次将鼠标悬停在图像上时都不会返回服务器。
#1
You probably want to use the hover() method. It includes callbacks for over/out so that you can do different actions on over vs. out.
您可能想要使用hover()方法。它包括过/退的回调,以便您可以对over over out执行不同的操作。
$('image').hover(
function() {
var empId = $(this).attr('name').replace(/disp/,'');
$.ajax({
url: '<%= Url.Action( "AjaxDisp" ) %>',
data: { id: empId, format: 'json' },
dataType: 'json',
success: function(data,status) {
// populate the popup and display it
}
});
}
function() {
// remove (hide?) the popup
}
);
Note that you may want to cache the results of the AJAX query so you're not going back to the server every time you hover over the image.
请注意,您可能希望缓存AJAX查询的结果,这样每次将鼠标悬停在图像上时都不会返回服务器。