[翻译]使用ASP.NET AJAX让GridView的数据行展现提示框(ToolTip)

原文地址:http://www.dotnetbips.com/articles/36f06160-5221-4d27-a177-320927f4b962.aspx
[初稿源码下载]
[翻译改后源码下载]

[翻译]利用ASP.NET AJAX让GridView的数据行展现提示框(ToolTip)

初稿公布日期:2007.05.06
作者:Bipin Joshi
翻译:webabcd

介绍
ASP.NET AJAX能够使您的web应用程序具有更增加的成效和越多的用户响应。
本文中,我将演示怎么着通过ASP.NET
AJAX的帮衬,给像GridView这样的多寡绑定控件的多寡行扩展popup提醒框。

初看这些必要后,你恐怕会想到利用AJAX Control Toolkit来促成这么些职能。
因为AJAX Control Tool基特里含有一个浮动菜单控件(HoverMenu)。
可是,假设菜单是动态读取的话,你就不可以运用那个控件了。 一个HoverMenu
Extender仅能被增大到一个对象控件。
大家可以想像一下,如若您有一个GridView,它里面有一个HyperLinkField类型的列。
当用户的鼠标经过这一个HyperLink的时候,你愿意弹出一个Popup提醒框来彰显该数据行的详细新闻。
此时,使用AJAX Control Toolkit就不可能完成大家的必要了。
本文中,我将图文结合的演示怎么办到如此的效益。

提醒框的图例
在开盘此前让大家先来看一看那些提示框是怎么着显示的。 请看下图:
SQL Server 1

上图演示了一个内含GridView控件的Web窗体。
那几个GridView控件由一个HyperLinkField类型的列构成。
当你的鼠标浮动到其它超链上的时候,就会弹出一个提示框,用来体现改数据行的更详尽的音信。
那段通过提醒框展现的叙述文本是从数据库中动态读取的,也就是说它不是静态文本。

前日就让大家开头开发那些提示框吧!

先是新建一个名为AJAXTooltip的ASP.NET AJAX-Enabled Web Site。
SQL Server 2

创制数据库
为了完结本示例的效劳,你须求创建一个数据库,该数据库内有一个名为Menus的表。
右键单击App_Data文件夹,拔取“添加新项…”。
然后添加一个名为Database.mdf的SQL数据库。
SQL Server 3

在服务器资源浏览器中开创一个名为Menus的表。 其表结构如下:
SQL Server 4

MenuID列是重点字,它是每一条菜单的唯一ID。
Text列保存着用来在浏览器中浮现的菜单项的公文。
NavigateUrl列为单击该菜单项后应该链接到的URL。
最终的TooltipText列保存的是当鼠标经过菜单项后所显得的详实文本。

建完表后,再在表中插入一些数量,那样就会给之后测试你的web程序时提供方便。

创建Web Service
ASP.NET AJAX允许你通过客户端脚本调用web services。
在大家的那么些事例中就应用了那项技能。 首先在您的web程序中新建一个web
service(WebService.asmx),并在其内添加一个web method。代码如下:

SQL Server 5[WebMethod]
SQL Server 6public string GetToolTipText(int menuid) 
SQL Server 7SQL Server 8SQL Server 9{
SQL Server 10    string strConn = ConfigurationManager.ConnectionStrings[“connstr”].ConnectionString;
SQL Server 11    SqlConnection cnn = new SqlConnection(strConn);
SQL Server 12    
SQL Server 13    cnn.Open();
SQL Server 14    
SQL Server 15    SqlCommand cmd = new SqlCommand();
SQL Server 16    cmd.Connection = cnn;
SQL Server 17    cmd.CommandText = “select tooltiptext from menus where menuid=@id”;
SQL Server 18    
SQL Server 19    SqlParameter p = new SqlParameter(“@id”, menuid);
SQL Server 20    cmd.Parameters.Add(p);
SQL Server 21    
SQL Server 22    object obj = cmd.ExecuteScalar();
SQL Server 23    
SQL Server 24    cnn.Close();
SQL Server 25    
SQL Server 26    return obj.ToString();
SQL Server 27}

中间的GetToolTipText()方法需要一个菜谱ID作为参数,然后再次回到提醒框文本。
这段代码首先利用ConfigurationManager类从web.config中获取数据库连接字符串。
然后创制一个SqlConnection和一个SqlCommand对象。
最终,使用SqlCommand类的ExecuteScalar()方法,根据菜单ID获得对应的提示框文本。

数据库连接字符串保存在web.config中的<connectionStrings>节点下。代码如下:

SQL Server 28<connectionStrings>
SQL Server 29    <add name=”connstr” connectionString=”Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True” providerName=”System.Data.SqlClient” />
SQL Server 30</connectionStrings>

注意Database.mdf文件的路径使用的是AttachDbFilename属性。
用那种方法就会使App_Data文件夹(DataDirectory)中的数据库附加到SQL
Server Express上。

到此之前都和以往开发web service是同等的。 不过,这么些web
service是从客户端脚本调用的。 也就是说,客户端脚本为了调用那几个web
service须要由一个代理。 大家得以给这几个web
service扩大一个[ScriptService]属性来完成那么些特性。
该属性在System.Script.Services命名空间内。
该命名空间在System.Web.Extensions程序集中。
[ScriptService]品质必须像上面那样应用到web service类中。

SQL Server 31[ScriptService]
SQL Server 32public class WebService : System.Web.Services.WebService
SQL Server 33SQL Server 34

如此就已毕了俺们的web service

开发Web Form
今昔打开默许的web form – Default.aspx –
确保其内有ScriptManager控件的实例。
拖拽一个SQL数据源控件到页上,并配备它,以使它可以从Menus表中读取全体记录。
SQL Server 35

接下去,拖拽一个GridView控件进来并设置它的DataSourceID属性为SqlDataSource1。
继续设置那么些GridView控件,使它有一个门类为HyperLinkField的列。
然后如下设置该HyperLinkField列的性质:
SQL Server 36

点名DataNavigateUrl菲尔德s属性为一个用逗号分隔的字段列表,其中有着字段的值都足以功效于URL中。
DataNavigateUrlFormatString属性指向格式化后的URL。
因为大家的Menus表中的NavigateUrl列保存的就是URL,所以大家不需求做任何格式化的行事。
因而DataNavigateUrlFormatString属性只含有一个站位符 – {0}。
在运行时,NavigateUrl列的实在值将会取代{0}。
最终,DataText菲尔德属性的值为超链所彰显的文件。

在大家这么设置了GridView控件之后,再拖拽一个Panel控件到页上。
设置那个Panel控件的BorderStyle属性为Solid,BorderColor属性为#FF8000,BackColor属性为Yellow。
那些Panel控件是用来突显提示框的。

最终,大家需求选拔ScriptManager控件添加一个针对到大家的web
service的引用。
如下图所示,定位到ScriptManager的Services属性,然后添加一个针对性到我们的web
service的引用即可。

创建AJAX类
ASP.NET AJAX给客户端脚本增添部分面向对象的表征。
为了选取那几个特点,大家须要支出一个名为ToolTip的类。
那个ToolTip类是用来显示提示框的,我们首先要藏匿它,然后调用大家的web
service。 ToolTip类的上上下下代码如下:

SQL Server 37<script type=”text/javascript”>
SQL Server 38Type.registerNamespace(“Demo”);
SQL Server 39
SQL Server 40Demo.ToolTip=function(panelid)
SQL Server 41SQL Server 42SQL Server 43{
SQL Server 44  this._panelid=panelid;
SQL Server 45  this.x=0;
SQL Server 46  this.y=0;
SQL Server 47}
SQL Server 48        
SQL Server 49Demo.ToolTip.prototype=
SQL Server 50SQL Server 51SQL Server 52{
SQL Server 53  get_PanelID:function()
SQL Server 54SQL Server 55  SQL Server 56{
SQL Server 57    return this._panelid;
SQL Server 58  },
SQL Server 59            
SQL Server 60  set_PanelID:function(panelid)
SQL Server 61SQL Server 62  SQL Server 63{
SQL Server 64    this._panelid=panelid;
SQL Server 65  },
SQL Server 66            
SQL Server 67  BeginShowToolTip:function(event,menuid)
SQL Server 68SQL Server 69  SQL Server 70{
SQL Server 71    WebService.GetToolTipText(menuid,this.
SQL Server 72    EndShowToolTip,this.OnError,this.OnTimeOut);
SQL Server 73    this.x=event.clientX + 10;
SQL Server 74    this.y=event.clientY + 10;
SQL Server 75  },
SQL Server 76            
SQL Server 77  EndShowToolTip:function(result)
SQL Server 78SQL Server 79  SQL Server 80{
SQL Server 81    var pnl=$get(tooltip.get_PanelID());
SQL Server 82    if(pnl.innerText!=null)
SQL Server 83SQL Server 84    SQL Server 85{
SQL Server 86      pnl.innerText=result;
SQL Server 87    }
SQL Server 88    else
SQL Server 89SQL Server 90    SQL Server 91{
SQL Server 92      pnl.textContent=result;
SQL Server 93    }
SQL Server 94  pnl.style.visibility=”visible”;
SQL Server 95  pnl.style.display=”inline”;
SQL Server 96  pnl.style.position=”absolute”;
SQL Server 97  pnl.style.left= tooltip.x + “px”;
SQL Server 98  pnl.style.top= tooltip.y + “px”;
SQL Server 99  },
SQL Server 100            
SQL Server 101  HideToolTip:function()
SQL Server 102SQL Server 103  SQL Server 104{
SQL Server 105    var pnl=$get(this.get_PanelID());
SQL Server 106    pnl.style.visibility=”hidden”;
SQL Server 107    pnl.style.display=”none”;
SQL Server 108  },
SQL Server 109            
SQL Server 110  OnError:function(result)
SQL Server 111SQL Server 112  SQL Server 113{
SQL Server 114    alert(result.get_message());
SQL Server 115  },         
SQL Server 116           
SQL Server 117  OnTimeOut:function(result)
SQL Server 118SQL Server 119  SQL Server 120{
SQL Server 121    alert(result);
SQL Server 122  }
SQL Server 123}
SQL Server 124        
SQL Server 125Demo.ToolTip.registerClass(“Demo.ToolTip”);
SQL Server 126</script>

我们要求把上边的这段脚本放到ScriptManager标记之后。
一般的话,你应该把它放到</form>标签之后。

那段代码首先应用Type类的registerNamespace()方法注册了一个名为Demo的命名空间。

接下来创立了一个名为ToolTip的类。
这一个ToolTip类的构造函数需求一个用来浮现提示框的Panel的ID作为参数。
那么些Panel的ID存储在一个名为_panelid的民用变量中。
此外,构造函数内还宣称四个个体变量 – (x 和 y) –
它们用来保存鼠标的坐标。

在ToolTip类的原型中定义了一部分质量和方式。
getter和setter方法用来读取和安装PanelID那些特性。
PanelID那些特性格外简单,就是设置和再次回到变量_panelid而已。

BeginShowToolTip()方法用来调用web service的GetToolTipText()方法。
它须要八个参数 – (event和menuid)。
那八个参数所提供的音信分级是现阶段的JavaScript事件和内需浮现的提示框的菜单项的ID。
其中间会调用web service的GetToolTipText()方法。
注意,WebService会为真实的web service生成一个客户端代理。
GetToolTipText()方法的第1个参数是menuid。
第2、3、4个参数分别是推行成功、失利、超时后所调用的主意。
最终,变量x和y被设置为鼠标当前的地方。
为了保证弹出框不会来得在鼠标上面,所以给x和y坐标分别增加10个像素的偏移量。
你也能够依照不相同的需要调整这几个偏移量。
当用户的鼠标经过HyperLinkField列的超链上的时候,就会调用那个BeginShowToolTip()方法。

设若web service再次回到了提醒框的公文就会调用EndShowToolTip()方法。 web
service的重临值就是该方法的result参数。
就下去的代码通过设置Panel的visibility、position、left和top属性来突显它和谐。
注意,为了使我们的那几个类能在IE和FireFox中行事,必必要有限支撑innerText属性是实惠的。

HideToolTip()方法会在鼠标离开超链后被调用,它会透过安装Panel的CSS属性来掩藏掉Panel。

OnError()和On提姆eout()方法会以弹出窗口的法子来呈现相应的错误信息。

最终,用大家刚创制好的那几个ToolTip类的registerClass()方法将ToolTip类注册到ASP.NET
AJAX的客户端框架。

现行,将如下那段脚本添加到web form的<head>节点中。

SQL Server 127<script type=”text/javascript”>
SQL Server 128var tooltip=null;    
SQL Server 129function pageLoad()
SQL Server 130SQL Server 131SQL Server 132{
SQL Server 133tooltip=new Demo.ToolTip(“Panel1”);
SQL Server 134tooltip.HideToolTip();
SQL Server 135}
SQL Server 136</script>

SQL Server,那段脚本中有一个名为pageLoad()的函数。
当该网页在浏览器中加载的时候,这一个函数会被ASP.NET AJAX框架自动地调用。
在那么些函数内部首先会创制一个ToolTip类的实例,
然后调用ToolTip类的HideToolTip()方法来掩藏掉Panel。

叠加上JavaScript事件处理器
咱俩的GridView控件所概括的多少行是依靠于数据库中的Menus表中的记录的。
为了使用户的鼠标在经过任何超链上的时候都调用BeginShowToolTip()方法,我们必要在GridView的RowDataBound事件内写一些代码。
其全体内容如下:

SQL Server 137protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
SQL Server 138SQL Server 139SQL Server 140{
SQL Server 141    if (e.Row.RowType == DataControlRowType.DataRow)
SQL Server 142SQL Server 143    SQL Server 144{
SQL Server 145        HyperLink hl = e.Row.Cells[0].Controls[0] as HyperLink;
SQL Server 146        int menuid = Convert.ToInt32(GridView1.DataKeys[e.Row.RowIndex].Value);
SQL Server 147        hl.Attributes.Add(“onmouseover”, “tooltip.BeginShowToolTip(event,” + menuid + “)”);
SQL Server 148        hl.Attributes.Add(“onmouseout”, “tooltip.HideToolTip()”);
SQL Server 149    }
SQL Server 150}

GridView的每一行,包涵HeaderRow和FooterRow都会触发RowDataBound事件。
所以大家首先要检查当前行是还是不是是DataRow,也就是说,行中必须概括实际的数据值。
若是是数量行,那么就应用Cell中的控件集合来收获HyperLink控件。
菜单ID可以通过GridView的DataKeys集合来获得。
最后,使用HyperLink控件的Attributes集合来增添名为onmouseover和onmouseout的客户端事件处理器。
onmouseover对应ToolTip类的BeginShowToolTip()方法,onmouseout对应ToolTip的HideToolTip()方法。

上述就是本文的全部内容。 你现在就能够运行一下这一个web
form,看看大家做的那些提示框的作用。

总结
ASP.NET AJAX允许你通过客户端脚本调用web services。
这几个特点可以带给大家许多不等以往的落到实处。
在本例中,大家给GridView的数据行创造了一个动态的提醒框。 ASP.NET AJAX
extensions可以让我们以面向对象的不二法门来编排JavaScript,它将使大家的代码变得更强健、更清楚。

作者:Bipin Joshi
Email:http://www.dotnetbips.com/contact.aspx
简介:Bipin
Joshi是DotNetBips.com的管理员。他是http://www.binaryintellect.com/的提议者,这么些集团提供.NET
framwork的培训和咨询服务。他在印度法兰克福为开发者提供培训。他也是微软的MVP(ASP.Net)和ASPInsiders的会员。

相关文章