服务器端控件的"客户端"

 

控件的服务端ID和客户端ID

 

比如一个ID为TextBox1的服务器端控件,在客户端访问该控件的DOM元素时

 

错误: var txtbox=document.getElementByID("TextBox1");

 

正确: var txtbox=document.getElementByID('<%=TextBox1.ClientID%>');

 

原因: 服务器端控件不像客户端控件那样只有一个ID。服务器端控件有三个属性表示控件的唯一名称 : ID UniqueID ClientID。ID表示我们给它命名的ID,而不管在服务端还是在客户端都不会使用这个ID。UniqueID表示服务端ID。ClientID表示客户端ID。从使用角度讲,如果继承了INamingContainer接口,当我们为子控件设定一个ID后,它的UniqueID和ClientID会自动加上父控件的名称和分隔符作为前缀,服务端前缀分隔符为$,客户端前缀符为_。

 

如果采用前面的错误的写法,某天把TextBox1控件放到母板容器中,TextBox1控件的UniqueID会变为Panel1$TextBox1,其ClientID会变为Panel1_TextBox1,这时当然获取不了。之前没放在容器控件里,TextBox1控件的ID UniqueID ClientID恰巧是一样的。

 

 

在ASP.NET服务端控件出现以前,开发人员使用HTML客户端元素标记可以操作的事件非常丰富(accesskey,align,class,dir,disabled,id,lang,language,style,tabindex,title,onactivate,onafterupdate,

onbeforeactivate,onbeforecopy,onbeforecut,onbeforedeactivate,onbeforeeditfocue,onbeforepaste,

onbeforeupdate,onblur,onclick,oncontextmenu,oncontrolselect,oncopy,oncut,ondbclick,ondeactivate,

ondrag,ondragend,ondragenter,ondragleave,ondragover,ondragstart,ondrop,onerrorupdate,

onfilterchange,onfocus,onfocusin,onfocusout,onhelp,onkeydown,onkeypress,onkeyup,

onlayoutcomplete,onlosecapture,onmousedown,onmouseenter,onmouseleave,onmouseout,

onmousemove,onmouseover,onmouseup,onmousewheel,onmove,onmoveend,onmovestart,onpaste,

onpropertychange,onreadystatechange,onresize,onresizeend,onresizestart,onscroll,onselectstart,

ontimeerror)

这些属性和事件除了在HTML元素中使用外

<input type=text οnmοuseοver="this.style.backgroundColor='red';" 

οnmοuseοver="this.style.backgroundColor='white';"/>

对于ASP.NET控件也是可以使用的

 

方法1(照搬法) 像使用HTML客户端元素一样,强制为服务端控件增加客户端属性和事件,如：

<asp：TextBox ID=“TextBox1” runat=“server” οnmοuseοver="this.style.backgroundColor='red';" 

οnmοuseοver="this.style.backgroundColor='white';"></asp：TextBox>

但当我们要为位于容器控件内的子控件强制增加客户端属性和事件时是不会成功的。

 

方法2(使用服务端控件的Attributes属性)

this.TextBox1.Attributes.Add("onmouseover","this.style.backgroundColor='Red';"); 增加一个行为

this.TextBox1.Attributes.Remove("onmouseover");  删除一个行为

this.TextBox1.Attributes["onmouseover"]="this.style.backgroundColor='Red';"; 

修改一个行为(如果此key对应的值为null则新增一个行为)

 

对于复杂控件的处理(在此以GridView为例)

Protected void GridView1_RowDataBound(object sender,GridViewRowEventArgs e)

 {

     if(e.Row.RowType==DataControlRowType.DataRow)

     //鼠标移动到每项时产生颜色交替效果

     e.Row.Attributes.Add("onmouseover","this.style.backgroundColor='Red';"this.style.Color='Black'");

     e.Row.Attributes.Add("onmouseout","this.style.backgroundColor='Black';"this.style.Color='Red'");

     //单击 双击 按键事件

     e.Row.Attributes.Add("OnClick","ClickEvent('"+e.Row.Cells[1].Text+"')");

     e.Row.Attributes.Add("OnDblClick","BbClickEvent('"+e.Row.Cells[1].Text+"')");

     e.Row.Attributes.Add("OnKeyDown","GridViewItemKeyDownEvent('"+e.Row.Cells[1].Text+"')");

     //设置鼠标指针为小手

     e.Row.Cells[1].Attributes["style"]="Cursor:hand";

 }

以上对GridView的数据行对象(tr)设置了一些客户端效果,如鼠标进入离开事件单击双击事件按键事件,最后还对每行的第二个单元格(td)设置了小手形状的鼠标样式。