在ASP.NET中的Gridvied中的LINKBUTTON上的HOVER上显示POPUP Chart窗口 [英] showing POPUP Chart window on HOVER on LINKBUTTON in Gridvied in ASP.NET

问题描述

你好朋友，

我正在ASP.NET中开发一个网站，需要显示POPUP

在位于GRIDVIEW控件内的Linkbutton上的HOVER上.

POPUP应该显示图表，其中包含我们从数据库中获取的值.

每次用户将鼠标悬停在Linkbutton上，他/她都应该能够在
中显示不同的图表
POPUP，并在将鼠标移出时，弹出窗口应关闭.

你能建议一个最好的方法吗?我试图调用Javascript Window.OPen，它工作正常，但是我需要以更漂亮的格式显示POPUP.

您的建议对我很重要.

祝你有美好的一天，

问候，
Kishor

Hello Friends,

I am developing a website in ASP.NET where I need to show a POPUP

on HOVER on Linkbutton which is Placed inside the GRIDVIEW control .

The the POPUP should display the chart with Values that we fetch from Database.

Every Time user hover the Linkbuttons he/she should be able to different chart in

POPUP and on mouseout the popup should close.

Can you suggest a best way to do this.I tried to Call Javascript Window.OPen and it works fine But I need to display the POPUP in more nice format .

Your advice is important to me.

Have a good day ahead,

Regards,
Kishor

推荐答案

我建​​议您使用jQuery UI对话框. jQuery对话框具有丰富的UI，并且可以自定义.您可以在链接按钮悬停时显示jQuery对话框，并通过ajax加载对话框的内容.

在链接按钮上绑定悬停事件:

I would suggest you to use the jQuery UI Dialog. The jQuery Dialog has a rich UI and it can be customizable. You can display the jQuery Dialog on hover of the link button and load the content of the dialog through ajax.

Bind hover events on link button:

private void OnItemDataBound(object sender, 
        System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if(e.Item.ItemType == Listitemtype.Item || e.Item.ItemType == Listitemtype.AlternateItem ) 
{
        LinkButton Img = (LinkButton)e.item.FindControl("lnkButton");
       lnkButton.Attributes.Add("onmouseover","OpenDialog");
       lnkButton.Attributes.Add("onmouseout","CloseDialog");

 }

}

JavaScript方法:

Javascript methods:

function OpenDialog() {

(" .chartPanel").dialog({确保您有一个类为chartPanel的div元素 autoOpen: false ， 打开:功能(){ // 您在此处的ajax调用以加载图表 } }); } 函数 CloseDialog() {

(".chartPanel").dialog({ //Ensure you have a div element with class as chartPanel autoOpen: false, open: function() { //Your ajax call here to load the chart } }); } function CloseDialog() {

(" ).dialog(" )； }

(".chartPanel").dialog("close"); }

您可以参考下面的链接，以通过Ajax将内容加载到jQuery Dialog中.

http://www.christopherchin. com/blog/index.cfm/2009/3/19/jQuery--ajax-dialog--load-external-content [

You can refer the link below of loading the content inside jQuery Dialog through Ajax.

http://www.christopherchin.com/blog/index.cfm/2009/3/19/jQuery--ajax-dialog--load-external-content[^]

这篇关于在ASP.NET中的Gridvied中的LINKBUTTON上的HOVER上显示POPUP Chart窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！